From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/tr/_redirects.txt | 164 -- files/tr/_wikihistory.json | 2387 ---------------- .../cascade_and_inheritance/index.html | 148 - .../learn/css/first_steps/how_css_works/index.html | 119 - .../index.html | 115 - .../index.html | 137 - .../conflicting/learn/css/first_steps/index.html | 54 - .../reference/global_objects/boolean/index.html | 78 - .../reference/global_objects/map/index.html | 86 - .../web/javascript/reference/operators/index.html | 295 -- .../index.html | 567 ---- .../index.html | 314 --- files/tr/games/index.html | 85 - .../create_the_canvas_and_draw_on_it/index.html | 110 - .../2d_breakout_game_pure_javascript/index.html | 51 - files/tr/games/tutorials/index.html | 27 - files/tr/glossary/ajax/index.html | 26 - files/tr/glossary/browser/index.html | 25 - files/tr/glossary/callback_function/index.html | 64 - files/tr/glossary/css/index.html | 46 - files/tr/glossary/dom/index.html | 28 - files/tr/glossary/html/index.html | 47 - files/tr/glossary/http/index.html | 21 - files/tr/glossary/index.html | 45 - files/tr/glossary/javascript/index.html | 45 - files/tr/glossary/mixin/index.html | 10 - files/tr/glossary/mutable/index.html | 43 - files/tr/glossary/mvc/index.html | 68 - files/tr/glossary/object/index.html | 19 - files/tr/glossary/oop/index.html | 18 - files/tr/glossary/protocol/index.html | 23 - files/tr/glossary/ruby/index.html | 21 - files/tr/glossary/statement/index.html | 23 - files/tr/glossary/vendor_prefix/index.html | 66 - .../how_does_the_internet_work/index.html | 95 - files/tr/learn/common_questions/index.html | 135 - .../what_are_browser_developer_tools/index.html | 239 -- .../backgrounds_and_borders/index.html | 325 --- .../cascade_and_inheritance/index.html | 358 --- .../css/building_blocks/debugging_css/index.html | 213 -- .../handling_different_text_directions/index.html | 169 -- .../images_media_form_elements/index.html | 212 -- files/tr/learn/css/building_blocks/index.html | 102 - .../css/building_blocks/organizing/index.html | 377 --- .../css/building_blocks/overflow_tasks/index.html | 67 - .../building_blocks/overflowing_content/index.html | 141 - .../selectors/attribute_selectors/index.html | 166 -- .../selectors/combinators/index.html | 120 - .../learn/css/building_blocks/selectors/index.html | 238 -- .../pseudo-classes_and_pseudo-elements/index.html | 414 --- .../type_class_and_id_selectors/index.html | 135 - .../building_blocks/sizing_items_in_css/index.html | 154 -- .../css/building_blocks/sizing_tasks/index.html | 83 - .../css/building_blocks/styling_tables/index.html | 331 --- .../index.html | 88 - .../css/building_blocks/the_box_model/index.html | 368 --- .../building_blocks/values_and_units/index.html | 415 --- .../css/building_blocks/values_tasks/index.html | 98 - .../building_blocks/writing_modes_tasks/index.html | 83 - files/tr/learn/css/css_layout/index.html | 85 - .../learn/css/css_layout/introduction/index.html | 708 ----- .../css/first_steps/getting_started/index.html | 273 -- .../first_steps/how_css_is_structured/index.html | 552 ---- .../learn/css/first_steps/how_css_works/index.html | 158 -- files/tr/learn/css/first_steps/index.html | 65 - .../using_your_new_knowledge/index.html | 106 - .../learn/css/first_steps/what_is_css/index.html | 137 - files/tr/learn/css/index.html | 87 - .../learn/css/styling_text/fundamentals/index.html | 738 ----- files/tr/learn/css/styling_text/index.html | 84 - .../css/styling_text/styling_links/index.html | 454 --- .../css/styling_text/styling_lists/index.html | 437 --- .../styling_text/typesetting_a_homepage/index.html | 144 - .../tr/learn/css/styling_text/web_fonts/index.html | 222 -- files/tr/learn/front-end_web_developer/index.html | 199 -- .../how_the_web_works/index.html | 104 - .../learn/getting_started_with_the_web/index.html | 50 - .../installing_basic_software/index.html | 60 - .../javascript_basics/index.html | 387 --- .../what_will_your_website_look_like/index.html | 94 - files/tr/learn/html/index.html | 62 - .../getting_started/index.html | 747 ----- .../tr/learn/html/introduction_to_html/index.html | 93 - files/tr/learn/index.html | 112 - .../first_steps/a_first_splash/index.html | 601 ---- files/tr/learn/javascript/first_steps/index.html | 62 - files/tr/learn/javascript/index.html | 57 - .../tr/learn/javascript/objects/basics/index.html | 258 -- files/tr/learn/javascript/objects/index.html | 54 - .../server-side/django/authentication/index.html | 678 ----- files/tr/learn/server-side/django/index.html | 73 - .../learn/server-side/django/sessions/index.html | 183 -- .../server-side/django/skeleton_website/index.html | 395 --- files/tr/learn/server-side/index.html | 53 - files/tr/mdn/about/index.html | 139 - files/tr/mdn/at_ten/index.html | 37 - files/tr/mdn/contribute/feedback/index.html | 56 - files/tr/mdn/contribute/getting_started/index.html | 133 - .../howto/create_and_edit_pages/index.html | 12 - files/tr/mdn/contribute/howto/index.html | 15 - files/tr/mdn/contribute/index.html | 71 - files/tr/mdn/index.html | 31 - files/tr/mdn/tools/index.html | 16 - .../tools/kumascript/troubleshooting/index.html | 76 - files/tr/mdn/yari/index.html | 27 - files/tr/mozilla/add-ons/index.html | 108 - .../extending_the_developer_tools/index.html | 168 -- files/tr/mozilla/add-ons/webextensions/index.html | 139 - .../webextensions/user_interface/index.html | 96 - .../what_are_webextensions/index.html | 69 - .../your_first_webextension/index.html | 158 -- files/tr/mozilla/firefox/index.html | 45 - files/tr/mozilla/firefox/releases/63/index.html | 139 - files/tr/mozilla/firefox/releases/81/index.html | 94 - files/tr/mozilla/firefox/releases/index.html | 12 - files/tr/mozilla/index.html | 13 - .../tr/orphaned/fennec_(firefox_mobile)/index.html | 16 - .../selectors/box_model_tasks/index.html | 87 - files/tr/orphaned/mdn/community/index.html | 54 - .../howto/do_an_editorial_review/index.html | 49 - files/tr/orphaned/mdn/editor/basics/index.html | 428 --- files/tr/orphaned/mdn/editor/index.html | 14 - .../tr/orphaned/mdn/kuma/server_charts/index.html | 64 - .../tr/orphaned/mdn/tools/page_watching/index.html | 45 - .../getting_started_with_web-ext/index.html | 336 --- files/tr/orphaned/tr/index.html | 64 - files/tr/orphaned/web/html-alani/index.html | 104 - .../global_objects/array/prototype/index.html | 206 -- files/tr/tools/browser_console/index.html | 188 -- files/tr/tools/debugger/index.html | 56 - files/tr/tools/index.html | 114 - files/tr/tools/page_inspector/index.html | 47 - files/tr/tools/performance/index.html | 93 - files/tr/tools/remote_debugging/index.html | 23 - files/tr/tools/web_console/index.html | 46 - files/tr/tools/web_console/rich_output/index.html | 114 - .../tr/tools/web_console/split_console/index.html | 21 - .../the_command_line_interpreter/index.html | 142 - files/tr/tools/web_console/ui_tour/index.html | 31 - files/tr/web/accessibility/index.html | 77 - .../accessibility/understanding_wcag/index.html | 59 - .../understanding_wcag/keyboard/index.html | 87 - files/tr/web/api/beforeunloadevent/index.html | 90 - files/tr/web/api/canvas_api/index.html | 174 -- files/tr/web/api/comment/comment/index.html | 56 - files/tr/web/api/comment/index.html | 75 - files/tr/web/api/css_object_model/index.html | 204 -- .../managing_screen_orientation/index.html | 179 -- files/tr/web/api/document_object_model/index.html | 476 ---- .../document_object_model/introduction/index.html | 245 -- files/tr/web/api/event/index.html | 202 -- .../api/eventtarget/addeventlistener/index.html | 774 ------ files/tr/web/api/eventtarget/index.html | 169 -- .../api/eventtarget/removeeventlistener/index.html | 274 -- files/tr/web/api/filereader/index.html | 162 -- files/tr/web/api/filesystem/index.html | 116 - files/tr/web/api/htmlelement/click/index.html | 45 - files/tr/web/api/htmlelement/index.html | 183 -- files/tr/web/api/htmlimageelement/image/index.html | 119 - files/tr/web/api/htmlimageelement/index.html | 417 --- files/tr/web/api/idbindex/getall/index.html | 164 -- files/tr/web/api/idbindex/index.html | 337 --- files/tr/web/api/index.html | 15 - files/tr/web/api/mutationobserver/index.html | 250 -- files/tr/web/api/node/index.html | 383 --- files/tr/web/api/storage/index.html | 164 -- files/tr/web/api/webgl_api/index.html | 294 -- files/tr/web/api/websocket/binarytype/index.html | 55 - files/tr/web/api/websocket/close/index.html | 66 - files/tr/web/api/websocket/extensions/index.html | 46 - files/tr/web/api/websocket/index.html | 138 - files/tr/web/api/websocket/onclose/index.html | 42 - files/tr/web/api/websocket/onerror/index.html | 48 - files/tr/web/api/websocket/onmessage/index.html | 48 - files/tr/web/api/websocket/onopen/index.html | 48 - files/tr/web/api/websocket/protocol/index.html | 46 - files/tr/web/api/websocket/readystate/index.html | 76 - files/tr/web/api/websocket/url/index.html | 48 - files/tr/web/api/websocket/websocket/index.html | 56 - files/tr/web/api/window/index.html | 462 ---- files/tr/web/api/window/opener/index.html | 40 - files/tr/web/css/@import/index.html | 125 - files/tr/web/css/_colon_active/index.html | 96 - files/tr/web/css/_colon_first-of-type/index.html | 156 -- files/tr/web/css/_colon_focus/index.html | 117 - files/tr/web/css/_colon_last-child/index.html | 147 - files/tr/web/css/_colon_link/index.html | 106 - files/tr/web/css/_colon_not/index.html | 145 - files/tr/web/css/_colon_root/index.html | 60 - .../web/css/_doublecolon_first-letter/index.html | 160 -- files/tr/web/css/background-color/index.html | 154 -- files/tr/web/css/background/index.html | 153 -- files/tr/web/css/class_selectors/index.html | 125 - .../box-shadow_generator/index.html | 2882 -------------------- .../introduction_to_the_css_box_model/index.html | 68 - .../using_css_counters/index.html | 103 - files/tr/web/css/css_selectors/index.html | 233 -- files/tr/web/css/display/index.html | 446 --- files/tr/web/css/font-size/index.html | 239 -- files/tr/web/css/index.html | 123 - files/tr/web/css/margin/index.html | 225 -- files/tr/web/css/reference/index.html | 73 - files/tr/web/css/right/index.html | 157 -- files/tr/web/css/shape-outside/index.html | 208 -- files/tr/web/css/type_selectors/index.html | 126 - .../web/demos_of_open_web_technologies/index.html | 147 - files/tr/web/guide/ajax/index.html | 121 - files/tr/web/guide/graphics/index.html | 54 - files/tr/web/guide/html/html5/index.html | 255 -- files/tr/web/guide/index.html | 29 - files/tr/web/html/element/aside/index.html | 155 -- files/tr/web/html/element/head/index.html | 139 - files/tr/web/html/element/hgroup/index.html | 136 - files/tr/web/html/element/index.html | 242 -- files/tr/web/html/element/li/index.html | 206 -- files/tr/web/html/element/link/index.html | 403 --- files/tr/web/html/index.html | 109 - files/tr/web/http/content_negotiation/index.html | 141 - files/tr/web/http/cookies/index.html | 251 -- .../http/cors/errors/corsrequestnothttp/index.html | 31 - files/tr/web/http/cors/errors/index.html | 76 - files/tr/web/http/cors/index.html | 556 ---- .../tr/web/http/headers/accept-language/index.html | 97 - files/tr/web/http/headers/accept/index.html | 99 - files/tr/web/http/headers/cookie/index.html | 71 - files/tr/web/http/headers/index.html | 370 --- .../web/http/headers/x-xss-protection/index.html | 77 - files/tr/web/http/index.html | 85 - files/tr/web/http/methods/index.html | 73 - files/tr/web/http/session/index.html | 174 -- files/tr/web/http/status/200/index.html | 53 - files/tr/web/http/status/205/index.html | 39 - files/tr/web/http/status/301/index.html | 55 - files/tr/web/http/status/302/index.html | 47 - files/tr/web/http/status/400/index.html | 37 - files/tr/web/http/status/401/index.html | 54 - files/tr/web/http/status/402/index.html | 49 - files/tr/web/http/status/403/index.html | 52 - files/tr/web/http/status/404/index.html | 61 - files/tr/web/http/status/405/index.html | 42 - files/tr/web/http/status/418/index.html | 45 - files/tr/web/http/status/500/index.html | 39 - files/tr/web/http/status/index.html | 193 -- files/tr/web/index.html | 94 - .../a_re-introduction_to_javascript/index.html | 931 ------- files/tr/web/javascript/data_structures/index.html | 299 -- .../control_flow_and_error_handling/index.html | 420 --- .../guide/details_of_the_object_model/index.html | 758 ----- files/tr/web/javascript/guide/functions/index.html | 663 ----- .../javascript/guide/grammar_and_types/index.html | 640 ----- files/tr/web/javascript/guide/index.html | 122 - .../web/javascript/guide/introduction/index.html | 134 - .../guide/loops_and_iteration/index.html | 331 --- .../guide/working_with_objects/index.html | 505 ---- files/tr/web/javascript/index.html | 106 - .../inheritance_and_the_prototype_chain/index.html | 561 ---- .../web/javascript/language_resources/index.html | 157 -- .../tr/web/javascript/memory_management/index.html | 199 -- .../tr/web/javascript/reference/classes/index.html | 276 -- .../javascript/reference/classes/static/index.html | 127 - .../tr/web/javascript/reference/errors/index.html | 31 - .../missing_semicolon_before_statement/index.html | 71 - .../reference/functions/arrow_functions/index.html | 359 --- .../web/javascript/reference/functions/index.html | 596 ---- .../global_objects/array/concat/index.html | 167 -- .../global_objects/array/entries/index.html | 129 - .../global_objects/array/every/index.html | 189 -- .../global_objects/array/filter/index.html | 243 -- .../reference/global_objects/array/find/index.html | 205 -- .../global_objects/array/findindex/index.html | 177 -- .../global_objects/array/foreach/index.html | 308 --- .../reference/global_objects/array/from/index.html | 258 -- .../global_objects/array/includes/index.html | 176 -- .../reference/global_objects/array/index.html | 371 --- .../global_objects/array/indexof/index.html | 246 -- .../global_objects/array/isarray/index.html | 154 -- .../reference/global_objects/array/join/index.html | 107 - .../global_objects/array/length/index.html | 145 - .../reference/global_objects/array/map/index.html | 307 --- .../reference/global_objects/array/of/index.html | 98 - .../reference/global_objects/array/pop/index.html | 117 - .../reference/global_objects/array/push/index.html | 152 -- .../global_objects/array/reverse/index.html | 107 - .../global_objects/array/shift/index.html | 112 - .../reference/global_objects/array/sort/index.html | 251 -- .../global_objects/array/splice/index.html | 149 - .../global_objects/array/unshift/index.html | 114 - .../global_objects/array/values/index.html | 86 - .../global_objects/arraybuffer/index.html | 222 -- .../reference/global_objects/boolean/index.html | 159 -- .../global_objects/boolean/tosource/index.html | 51 - .../reference/global_objects/eval/index.html | 318 --- .../global_objects/function/apply/index.html | 262 -- .../reference/global_objects/function/index.html | 189 -- .../javascript/reference/global_objects/index.html | 178 -- .../reference/global_objects/isfinite/index.html | 138 - .../reference/global_objects/isnan/index.html | 170 -- .../reference/global_objects/json/index.html | 205 -- .../global_objects/json/stringify/index.html | 313 --- .../reference/global_objects/map/index.html | 207 -- .../reference/global_objects/math/index.html | 191 -- .../reference/global_objects/math/sign/index.html | 110 - .../global_objects/object/assign/index.html | 311 --- .../object/defineproperty/index.html | 391 --- .../global_objects/object/entries/index.html | 141 - .../global_objects/object/freeze/index.html | 234 -- .../object/getprototypeof/index.html | 134 - .../reference/global_objects/object/index.html | 213 -- .../global_objects/object/tostring/index.html | 161 -- .../global_objects/object/values/index.html | 96 - .../global_objects/promise/all/index.html | 234 -- .../global_objects/promise/catch/index.html | 201 -- .../reference/global_objects/promise/index.html | 317 --- .../reference/global_objects/regexp/index.html | 606 ---- .../reference/global_objects/string/index.html | 316 --- .../global_objects/string/substring/index.html | 149 - files/tr/web/javascript/reference/index.html | 48 - .../reference/lexical_grammar/index.html | 374 --- .../reference/operators/function_star_/index.html | 85 - .../web/javascript/reference/operators/index.html | 278 -- .../reference/operators/instanceof/index.html | 208 -- .../reference/operators/super/index.html | 166 -- .../javascript/reference/operators/this/index.html | 348 --- .../reference/operators/typeof/index.html | 260 -- .../reference/statements/block/index.html | 179 -- .../reference/statements/break/index.html | 117 - .../reference/statements/const/index.html | 149 - .../reference/statements/export/index.html | 186 -- .../web/javascript/reference/statements/index.html | 141 - .../reference/statements/return/index.html | 195 -- .../reference/statements/throw/index.html | 201 -- .../reference/statements/while/index.html | 79 - .../javascript/reference/strict_mode/index.html | 363 --- files/tr/web/manifest/index.html | 94 - files/tr/web/mathml/index.html | 71 - files/tr/web/progressive_web_apps/index.html | 80 - .../offline_service_workers/index.html | 201 -- files/tr/web/reference/index.html | 28 - files/tr/web/security/index.html | 17 - files/tr/web/security/mixed_content/index.html | 45 - .../security/transport_layer_security/index.html | 116 - .../security/weak_signature_algorithm/index.html | 19 - files/tr/web/tutorials/index.html | 155 -- files/tr/webassembly/concepts/index.html | 152 -- files/tr/webassembly/index.html | 117 - 345 files changed, 63805 deletions(-) delete mode 100644 files/tr/_redirects.txt delete mode 100644 files/tr/_wikihistory.json delete mode 100644 files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html delete mode 100644 files/tr/conflicting/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/tr/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html delete mode 100644 files/tr/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html delete mode 100644 files/tr/conflicting/learn/css/first_steps/index.html delete mode 100644 files/tr/conflicting/web/javascript/reference/global_objects/boolean/index.html delete mode 100644 files/tr/conflicting/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/tr/conflicting/web/javascript/reference/operators/index.html delete mode 100644 files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html delete mode 100644 files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html delete mode 100644 files/tr/games/index.html delete mode 100644 files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html delete mode 100644 files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html delete mode 100644 files/tr/games/tutorials/index.html delete mode 100644 files/tr/glossary/ajax/index.html delete mode 100644 files/tr/glossary/browser/index.html delete mode 100644 files/tr/glossary/callback_function/index.html delete mode 100644 files/tr/glossary/css/index.html delete mode 100644 files/tr/glossary/dom/index.html delete mode 100644 files/tr/glossary/html/index.html delete mode 100644 files/tr/glossary/http/index.html delete mode 100644 files/tr/glossary/index.html delete mode 100644 files/tr/glossary/javascript/index.html delete mode 100644 files/tr/glossary/mixin/index.html delete mode 100644 files/tr/glossary/mutable/index.html delete mode 100644 files/tr/glossary/mvc/index.html delete mode 100644 files/tr/glossary/object/index.html delete mode 100644 files/tr/glossary/oop/index.html delete mode 100644 files/tr/glossary/protocol/index.html delete mode 100644 files/tr/glossary/ruby/index.html delete mode 100644 files/tr/glossary/statement/index.html delete mode 100644 files/tr/glossary/vendor_prefix/index.html delete mode 100644 files/tr/learn/common_questions/how_does_the_internet_work/index.html delete mode 100644 files/tr/learn/common_questions/index.html delete mode 100644 files/tr/learn/common_questions/what_are_browser_developer_tools/index.html delete mode 100644 files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html delete mode 100644 files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html delete mode 100644 files/tr/learn/css/building_blocks/debugging_css/index.html delete mode 100644 files/tr/learn/css/building_blocks/handling_different_text_directions/index.html delete mode 100644 files/tr/learn/css/building_blocks/images_media_form_elements/index.html delete mode 100644 files/tr/learn/css/building_blocks/index.html delete mode 100644 files/tr/learn/css/building_blocks/organizing/index.html delete mode 100644 files/tr/learn/css/building_blocks/overflow_tasks/index.html delete mode 100644 files/tr/learn/css/building_blocks/overflowing_content/index.html delete mode 100644 files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html delete mode 100644 files/tr/learn/css/building_blocks/selectors/combinators/index.html delete mode 100644 files/tr/learn/css/building_blocks/selectors/index.html delete mode 100644 files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html delete mode 100644 files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html delete mode 100644 files/tr/learn/css/building_blocks/sizing_items_in_css/index.html delete mode 100644 files/tr/learn/css/building_blocks/sizing_tasks/index.html delete mode 100644 files/tr/learn/css/building_blocks/styling_tables/index.html delete mode 100644 files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html delete mode 100644 files/tr/learn/css/building_blocks/the_box_model/index.html delete mode 100644 files/tr/learn/css/building_blocks/values_and_units/index.html delete mode 100644 files/tr/learn/css/building_blocks/values_tasks/index.html delete mode 100644 files/tr/learn/css/building_blocks/writing_modes_tasks/index.html delete mode 100644 files/tr/learn/css/css_layout/index.html delete mode 100644 files/tr/learn/css/css_layout/introduction/index.html delete mode 100644 files/tr/learn/css/first_steps/getting_started/index.html delete mode 100644 files/tr/learn/css/first_steps/how_css_is_structured/index.html delete mode 100644 files/tr/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/tr/learn/css/first_steps/index.html delete mode 100644 files/tr/learn/css/first_steps/using_your_new_knowledge/index.html delete mode 100644 files/tr/learn/css/first_steps/what_is_css/index.html delete mode 100644 files/tr/learn/css/index.html delete mode 100644 files/tr/learn/css/styling_text/fundamentals/index.html delete mode 100644 files/tr/learn/css/styling_text/index.html delete mode 100644 files/tr/learn/css/styling_text/styling_links/index.html delete mode 100644 files/tr/learn/css/styling_text/styling_lists/index.html delete mode 100644 files/tr/learn/css/styling_text/typesetting_a_homepage/index.html delete mode 100644 files/tr/learn/css/styling_text/web_fonts/index.html delete mode 100644 files/tr/learn/front-end_web_developer/index.html delete mode 100644 files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html delete mode 100644 files/tr/learn/getting_started_with_the_web/index.html delete mode 100644 files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html delete mode 100644 files/tr/learn/getting_started_with_the_web/javascript_basics/index.html delete mode 100644 files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 files/tr/learn/html/index.html delete mode 100644 files/tr/learn/html/introduction_to_html/getting_started/index.html delete mode 100644 files/tr/learn/html/introduction_to_html/index.html delete mode 100644 files/tr/learn/index.html delete mode 100644 files/tr/learn/javascript/first_steps/a_first_splash/index.html delete mode 100644 files/tr/learn/javascript/first_steps/index.html delete mode 100644 files/tr/learn/javascript/index.html delete mode 100644 files/tr/learn/javascript/objects/basics/index.html delete mode 100644 files/tr/learn/javascript/objects/index.html delete mode 100644 files/tr/learn/server-side/django/authentication/index.html delete mode 100644 files/tr/learn/server-side/django/index.html delete mode 100644 files/tr/learn/server-side/django/sessions/index.html delete mode 100644 files/tr/learn/server-side/django/skeleton_website/index.html delete mode 100644 files/tr/learn/server-side/index.html delete mode 100644 files/tr/mdn/about/index.html delete mode 100644 files/tr/mdn/at_ten/index.html delete mode 100644 files/tr/mdn/contribute/feedback/index.html delete mode 100644 files/tr/mdn/contribute/getting_started/index.html delete mode 100644 files/tr/mdn/contribute/howto/create_and_edit_pages/index.html delete mode 100644 files/tr/mdn/contribute/howto/index.html delete mode 100644 files/tr/mdn/contribute/index.html delete mode 100644 files/tr/mdn/index.html delete mode 100644 files/tr/mdn/tools/index.html delete mode 100644 files/tr/mdn/tools/kumascript/troubleshooting/index.html delete mode 100644 files/tr/mdn/yari/index.html delete mode 100644 files/tr/mozilla/add-ons/index.html delete mode 100644 files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html delete mode 100644 files/tr/mozilla/add-ons/webextensions/index.html delete mode 100644 files/tr/mozilla/add-ons/webextensions/user_interface/index.html delete mode 100644 files/tr/mozilla/add-ons/webextensions/what_are_webextensions/index.html delete mode 100644 files/tr/mozilla/add-ons/webextensions/your_first_webextension/index.html delete mode 100644 files/tr/mozilla/firefox/index.html delete mode 100644 files/tr/mozilla/firefox/releases/63/index.html delete mode 100644 files/tr/mozilla/firefox/releases/81/index.html delete mode 100644 files/tr/mozilla/firefox/releases/index.html delete mode 100644 files/tr/mozilla/index.html delete mode 100644 files/tr/orphaned/fennec_(firefox_mobile)/index.html delete mode 100644 files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html delete mode 100644 files/tr/orphaned/mdn/community/index.html delete mode 100644 files/tr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/tr/orphaned/mdn/editor/basics/index.html delete mode 100644 files/tr/orphaned/mdn/editor/index.html delete mode 100644 files/tr/orphaned/mdn/kuma/server_charts/index.html delete mode 100644 files/tr/orphaned/mdn/tools/page_watching/index.html delete mode 100644 files/tr/orphaned/mozilla/add-ons/webextensions/getting_started_with_web-ext/index.html delete mode 100644 files/tr/orphaned/tr/index.html delete mode 100644 files/tr/orphaned/web/html-alani/index.html delete mode 100644 files/tr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/tr/tools/browser_console/index.html delete mode 100644 files/tr/tools/debugger/index.html delete mode 100644 files/tr/tools/index.html delete mode 100644 files/tr/tools/page_inspector/index.html delete mode 100644 files/tr/tools/performance/index.html delete mode 100644 files/tr/tools/remote_debugging/index.html delete mode 100644 files/tr/tools/web_console/index.html delete mode 100644 files/tr/tools/web_console/rich_output/index.html delete mode 100644 files/tr/tools/web_console/split_console/index.html delete mode 100644 files/tr/tools/web_console/the_command_line_interpreter/index.html delete mode 100644 files/tr/tools/web_console/ui_tour/index.html delete mode 100644 files/tr/web/accessibility/index.html delete mode 100644 files/tr/web/accessibility/understanding_wcag/index.html delete mode 100644 files/tr/web/accessibility/understanding_wcag/keyboard/index.html delete mode 100644 files/tr/web/api/beforeunloadevent/index.html delete mode 100644 files/tr/web/api/canvas_api/index.html delete mode 100644 files/tr/web/api/comment/comment/index.html delete mode 100644 files/tr/web/api/comment/index.html delete mode 100644 files/tr/web/api/css_object_model/index.html delete mode 100644 files/tr/web/api/css_object_model/managing_screen_orientation/index.html delete mode 100644 files/tr/web/api/document_object_model/index.html delete mode 100644 files/tr/web/api/document_object_model/introduction/index.html delete mode 100644 files/tr/web/api/event/index.html delete mode 100644 files/tr/web/api/eventtarget/addeventlistener/index.html delete mode 100644 files/tr/web/api/eventtarget/index.html delete mode 100644 files/tr/web/api/eventtarget/removeeventlistener/index.html delete mode 100644 files/tr/web/api/filereader/index.html delete mode 100644 files/tr/web/api/filesystem/index.html delete mode 100644 files/tr/web/api/htmlelement/click/index.html delete mode 100644 files/tr/web/api/htmlelement/index.html delete mode 100644 files/tr/web/api/htmlimageelement/image/index.html delete mode 100644 files/tr/web/api/htmlimageelement/index.html delete mode 100644 files/tr/web/api/idbindex/getall/index.html delete mode 100644 files/tr/web/api/idbindex/index.html delete mode 100644 files/tr/web/api/index.html delete mode 100644 files/tr/web/api/mutationobserver/index.html delete mode 100644 files/tr/web/api/node/index.html delete mode 100644 files/tr/web/api/storage/index.html delete mode 100644 files/tr/web/api/webgl_api/index.html delete mode 100644 files/tr/web/api/websocket/binarytype/index.html delete mode 100644 files/tr/web/api/websocket/close/index.html delete mode 100644 files/tr/web/api/websocket/extensions/index.html delete mode 100644 files/tr/web/api/websocket/index.html delete mode 100644 files/tr/web/api/websocket/onclose/index.html delete mode 100644 files/tr/web/api/websocket/onerror/index.html delete mode 100644 files/tr/web/api/websocket/onmessage/index.html delete mode 100644 files/tr/web/api/websocket/onopen/index.html delete mode 100644 files/tr/web/api/websocket/protocol/index.html delete mode 100644 files/tr/web/api/websocket/readystate/index.html delete mode 100644 files/tr/web/api/websocket/url/index.html delete mode 100644 files/tr/web/api/websocket/websocket/index.html delete mode 100644 files/tr/web/api/window/index.html delete mode 100644 files/tr/web/api/window/opener/index.html delete mode 100644 files/tr/web/css/@import/index.html delete mode 100644 files/tr/web/css/_colon_active/index.html delete mode 100644 files/tr/web/css/_colon_first-of-type/index.html delete mode 100644 files/tr/web/css/_colon_focus/index.html delete mode 100644 files/tr/web/css/_colon_last-child/index.html delete mode 100644 files/tr/web/css/_colon_link/index.html delete mode 100644 files/tr/web/css/_colon_not/index.html delete mode 100644 files/tr/web/css/_colon_root/index.html delete mode 100644 files/tr/web/css/_doublecolon_first-letter/index.html delete mode 100644 files/tr/web/css/background-color/index.html delete mode 100644 files/tr/web/css/background/index.html delete mode 100644 files/tr/web/css/class_selectors/index.html delete mode 100644 files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html delete mode 100644 files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html delete mode 100644 files/tr/web/css/css_lists_and_counters/using_css_counters/index.html delete mode 100644 files/tr/web/css/css_selectors/index.html delete mode 100644 files/tr/web/css/display/index.html delete mode 100644 files/tr/web/css/font-size/index.html delete mode 100644 files/tr/web/css/index.html delete mode 100644 files/tr/web/css/margin/index.html delete mode 100644 files/tr/web/css/reference/index.html delete mode 100644 files/tr/web/css/right/index.html delete mode 100644 files/tr/web/css/shape-outside/index.html delete mode 100644 files/tr/web/css/type_selectors/index.html delete mode 100644 files/tr/web/demos_of_open_web_technologies/index.html delete mode 100644 files/tr/web/guide/ajax/index.html delete mode 100644 files/tr/web/guide/graphics/index.html delete mode 100644 files/tr/web/guide/html/html5/index.html delete mode 100644 files/tr/web/guide/index.html delete mode 100644 files/tr/web/html/element/aside/index.html delete mode 100644 files/tr/web/html/element/head/index.html delete mode 100644 files/tr/web/html/element/hgroup/index.html delete mode 100644 files/tr/web/html/element/index.html delete mode 100644 files/tr/web/html/element/li/index.html delete mode 100644 files/tr/web/html/element/link/index.html delete mode 100644 files/tr/web/html/index.html delete mode 100644 files/tr/web/http/content_negotiation/index.html delete mode 100644 files/tr/web/http/cookies/index.html delete mode 100644 files/tr/web/http/cors/errors/corsrequestnothttp/index.html delete mode 100644 files/tr/web/http/cors/errors/index.html delete mode 100644 files/tr/web/http/cors/index.html delete mode 100644 files/tr/web/http/headers/accept-language/index.html delete mode 100644 files/tr/web/http/headers/accept/index.html delete mode 100644 files/tr/web/http/headers/cookie/index.html delete mode 100644 files/tr/web/http/headers/index.html delete mode 100644 files/tr/web/http/headers/x-xss-protection/index.html delete mode 100644 files/tr/web/http/index.html delete mode 100644 files/tr/web/http/methods/index.html delete mode 100644 files/tr/web/http/session/index.html delete mode 100644 files/tr/web/http/status/200/index.html delete mode 100644 files/tr/web/http/status/205/index.html delete mode 100644 files/tr/web/http/status/301/index.html delete mode 100644 files/tr/web/http/status/302/index.html delete mode 100644 files/tr/web/http/status/400/index.html delete mode 100644 files/tr/web/http/status/401/index.html delete mode 100644 files/tr/web/http/status/402/index.html delete mode 100644 files/tr/web/http/status/403/index.html delete mode 100644 files/tr/web/http/status/404/index.html delete mode 100644 files/tr/web/http/status/405/index.html delete mode 100644 files/tr/web/http/status/418/index.html delete mode 100644 files/tr/web/http/status/500/index.html delete mode 100644 files/tr/web/http/status/index.html delete mode 100644 files/tr/web/index.html delete mode 100644 files/tr/web/javascript/a_re-introduction_to_javascript/index.html delete mode 100644 files/tr/web/javascript/data_structures/index.html delete mode 100644 files/tr/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 files/tr/web/javascript/guide/details_of_the_object_model/index.html delete mode 100644 files/tr/web/javascript/guide/functions/index.html delete mode 100644 files/tr/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/tr/web/javascript/guide/index.html delete mode 100644 files/tr/web/javascript/guide/introduction/index.html delete mode 100644 files/tr/web/javascript/guide/loops_and_iteration/index.html delete mode 100644 files/tr/web/javascript/guide/working_with_objects/index.html delete mode 100644 files/tr/web/javascript/index.html delete mode 100644 files/tr/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/tr/web/javascript/language_resources/index.html delete mode 100644 files/tr/web/javascript/memory_management/index.html delete mode 100644 files/tr/web/javascript/reference/classes/index.html delete mode 100644 files/tr/web/javascript/reference/classes/static/index.html delete mode 100644 files/tr/web/javascript/reference/errors/index.html delete mode 100644 files/tr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html delete mode 100644 files/tr/web/javascript/reference/functions/arrow_functions/index.html delete mode 100644 files/tr/web/javascript/reference/functions/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/concat/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/entries/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/every/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/filter/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/find/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/findindex/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/foreach/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/from/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/includes/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/indexof/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/isarray/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/join/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/length/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/map/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/of/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/pop/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/push/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/reverse/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/shift/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/sort/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/splice/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/unshift/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/values/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/arraybuffer/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/boolean/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/boolean/tosource/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/eval/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/function/apply/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/function/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/isfinite/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/isnan/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/json/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/json/stringify/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/math/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/math/sign/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/assign/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/entries/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/freeze/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/getprototypeof/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/tostring/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/values/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/promise/all/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/promise/catch/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/promise/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/regexp/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/string/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/string/substring/index.html delete mode 100644 files/tr/web/javascript/reference/index.html delete mode 100644 files/tr/web/javascript/reference/lexical_grammar/index.html delete mode 100644 files/tr/web/javascript/reference/operators/function_star_/index.html delete mode 100644 files/tr/web/javascript/reference/operators/index.html delete mode 100644 files/tr/web/javascript/reference/operators/instanceof/index.html delete mode 100644 files/tr/web/javascript/reference/operators/super/index.html delete mode 100644 files/tr/web/javascript/reference/operators/this/index.html delete mode 100644 files/tr/web/javascript/reference/operators/typeof/index.html delete mode 100644 files/tr/web/javascript/reference/statements/block/index.html delete mode 100644 files/tr/web/javascript/reference/statements/break/index.html delete mode 100644 files/tr/web/javascript/reference/statements/const/index.html delete mode 100644 files/tr/web/javascript/reference/statements/export/index.html delete mode 100644 files/tr/web/javascript/reference/statements/index.html delete mode 100644 files/tr/web/javascript/reference/statements/return/index.html delete mode 100644 files/tr/web/javascript/reference/statements/throw/index.html delete mode 100644 files/tr/web/javascript/reference/statements/while/index.html delete mode 100644 files/tr/web/javascript/reference/strict_mode/index.html delete mode 100644 files/tr/web/manifest/index.html delete mode 100644 files/tr/web/mathml/index.html delete mode 100644 files/tr/web/progressive_web_apps/index.html delete mode 100644 files/tr/web/progressive_web_apps/offline_service_workers/index.html delete mode 100644 files/tr/web/reference/index.html delete mode 100644 files/tr/web/security/index.html delete mode 100644 files/tr/web/security/mixed_content/index.html delete mode 100644 files/tr/web/security/transport_layer_security/index.html delete mode 100644 files/tr/web/security/weak_signature_algorithm/index.html delete mode 100644 files/tr/web/tutorials/index.html delete mode 100644 files/tr/webassembly/concepts/index.html delete mode 100644 files/tr/webassembly/index.html (limited to 'files/tr') diff --git a/files/tr/_redirects.txt b/files/tr/_redirects.txt deleted file mode 100644 index ee25b05ce7..0000000000 --- a/files/tr/_redirects.txt +++ /dev/null @@ -1,164 +0,0 @@ -# DO NOT EDIT THIS FILE MANUALLY. -# Use the CLI instead: -# -# yarn content add-redirect -# -# FROM-URL TO-URL -/tr/docs/AJAX /tr/docs/Web/Guide/AJAX -/tr/docs/Araclar /tr/docs/Tools -/tr/docs/Araclar/Browser_Console /tr/docs/Tools/Browser_Console -/tr/docs/Araclar/HataAyıklayıcı /tr/docs/Tools/Debugger -/tr/docs/Araclar/Page_Inspector /tr/docs/Tools/Page_Inspector -/tr/docs/Araclar/Performance /tr/docs/Tools/Performance -/tr/docs/Araclar/Remote_Debugging /tr/docs/Tools/Remote_Debugging -/tr/docs/Araclar/Web_Konsolu /tr/docs/Tools/Web_Console -/tr/docs/Araclar/Web_Konsolu/Bolunmus_Konsol /tr/docs/Tools/Web_Console/Split_console -/tr/docs/Araclar/Web_Konsolu/Komut_Satiri_Tercumani /tr/docs/Tools/Web_Console/The_command_line_interpreter -/tr/docs/Araclar/Web_Konsolu/Web_Konsolunu_Acmak /tr/docs/Tools/Web_Console/UI_Tour -/tr/docs/Araclar/Web_Konsolu/Zengin_Cikti /tr/docs/Tools/Web_Console/Rich_output -/tr/docs/Fennec_(Firefox_Mobile) /tr/docs/orphaned/Fennec_(Firefox_Mobile) -/tr/docs/Glossary/NYP /tr/docs/Glossary/OOP -/tr/docs/Glossary/Nesne /tr/docs/Glossary/Object -/tr/docs/Glossary/Protokol /tr/docs/Glossary/Protocol -/tr/docs/Glossary/Web_Tarayıcısı /tr/docs/Glossary/Browser -/tr/docs/HTML /tr/docs/Web/HTML -/tr/docs/HTML/Element /tr/docs/Web/HTML/Element -/tr/docs/HTML/Element/aside /tr/docs/Web/HTML/Element/aside -/tr/docs/HTML/Element/head /tr/docs/Web/HTML/Element/head -/tr/docs/HTML/Element/hgroup /tr/docs/Web/HTML/Element/hgroup -/tr/docs/HTML/Element/li /tr/docs/Web/HTML/Element/li -/tr/docs/HTML/Element/link /tr/docs/Web/HTML/Element/link -/tr/docs/HTML/Giriş /tr/docs/Learn/HTML/Introduction_to_HTML -/tr/docs/HTML/HTML5 /tr/docs/Web/Guide/HTML/HTML5 -/tr/docs/JavaScript /tr/docs/Web/JavaScript -/tr/docs/JavaScript/A_re-introduction_to_JavaScript /tr/docs/Web/JavaScript/A_re-introduction_to_JavaScript -/tr/docs/JavaScript/Guide /tr/docs/Web/JavaScript/Guide -/tr/docs/JavaScript/Guide/Ifadeler /tr/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/tr/docs/JavaScript/Reference /tr/docs/Web/JavaScript/Reference -/tr/docs/JavaScript/Reference/Global_Objects /tr/docs/Web/JavaScript/Reference/Global_Objects -/tr/docs/JavaScript/Reference/Global_Objects/Array /tr/docs/Web/JavaScript/Reference/Global_Objects/Array -/tr/docs/JavaScript/Reference/Global_Objects/Array/concat /tr/docs/Web/JavaScript/Reference/Global_Objects/Array/concat -/tr/docs/JavaScript/Reference/Global_Objects/Array/prototype /tr/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -/tr/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks /tr/docs/orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks -/tr/docs/Learn/Common_questions/Tarayıcı_geliştirici_araçları_araçları_nelerdir /tr/docs/Learn/Common_questions/What_are_browser_developer_tools -/tr/docs/MDN/Community /tr/docs/orphaned/MDN/Community -/tr/docs/MDN/Contribute/Editor /tr/docs/orphaned/MDN/Editor -/tr/docs/MDN/Contribute/Editor/Basics /tr/docs/orphaned/MDN/Editor/Basics -/tr/docs/MDN/Contribute/Howto/Editor_incelemesi_nasil_yapilir /tr/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review -/tr/docs/MDN/Contribute/Howto/Sayfalar_nasil_olusturulur_duzenlenir /tr/docs/MDN/Contribute/Howto/Create_and_edit_pages -/tr/docs/MDN/Contribute/Tools /tr/docs/MDN/Tools -/tr/docs/MDN/Contribute/Tools/Page_watching /tr/docs/orphaned/MDN/Tools/Page_watching -/tr/docs/MDN/Editor /tr/docs/orphaned/MDN/Editor -/tr/docs/MDN/Editor/Basics /tr/docs/orphaned/MDN/Editor/Basics -/tr/docs/MDN/Feedback /tr/docs/MDN/Contribute/Feedback -/tr/docs/MDN/Getting_started /tr/docs/MDN/Contribute/Getting_started -/tr/docs/MDN/Hakkinda /tr/docs/MDN/About -/tr/docs/MDN/Kuma /tr/docs/MDN/Yari -/tr/docs/MDN/Kuma/Server_charts /tr/docs/orphaned/MDN/Kuma/Server_charts -/tr/docs/MDN/Kuma/Troubleshooting_KumaScript_errors /tr/docs/MDN/Tools/KumaScript/Troubleshooting -/tr/docs/MDN/Tools/Page_watching /tr/docs/orphaned/MDN/Tools/Page_watching -/tr/docs/MDN_onunda /tr/docs/MDN/At_ten -/tr/docs/Mozilla/Eklentiler /tr/docs/Mozilla/Add-ons -/tr/docs/Mozilla/Eklentiler/WebExtensions /tr/docs/Mozilla/Add-ons/WebExtensions -/tr/docs/Mozilla/Eklentiler/WebExtensions/Deneyiminize_web-ext_ile_başlayın /tr/docs/orphaned/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext -/tr/docs/Mozilla/Eklentiler/WebExtensions/Eklenti_nedir /tr/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -/tr/docs/Mozilla/Eklentiler/WebExtensions/Extending_the_developer_tools /tr/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools -/tr/docs/Mozilla/Eklentiler/WebExtensions/user_interface /tr/docs/Mozilla/Add-ons/WebExtensions/user_interface -/tr/docs/Mozilla/Eklentiler/WebExtensions/İlk_Eklentin /tr/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -/tr/docs/Oyunlar /tr/docs/Games -/tr/docs/Security /en-US/docs/Web/Security -/tr/docs/Security/MixedContent /tr/docs/Web/Security/Mixed_content -/tr/docs/Security/Zatıf_İmza_Algoritması /tr/docs/Web/Security/Weak_Signature_Algorithm -/tr/docs/Tr /tr/docs/orphaned/Tr -/tr/docs/Web/API/Tuval_Arabirimi /tr/docs/Web/API/Canvas_API -/tr/docs/Web/Bildiri /tr/docs/Web/Manifest -/tr/docs/Web/CSS/CSS_Background_and_Borders /en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders -/tr/docs/Web/CSS/Sınıf_seçicileri /tr/docs/Web/CSS/Class_selectors -/tr/docs/Web/CSS/Tip_secicileri /tr/docs/Web/CSS/Type_selectors -/tr/docs/Web/CSS/box_model /tr/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/tr/docs/Web/CSS/marjin /tr/docs/Web/CSS/margin -/tr/docs/Web/Guide/CSS/Getting_started /tr/docs/conflicting/Learn/CSS/First_steps -/tr/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance /tr/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/tr/docs/Web/Guide/CSS/Getting_started/How_CSS_works /tr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_bb137d8ec11d5e9680f32049e9a3cb26 -/tr/docs/Web/Guide/CSS/Getting_started/Why_use_CSS /tr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 -/tr/docs/Web/Guide/CSS/Getting_started/css_nedir /tr/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/tr/docs/Web/Guide/CSS/Sayaçlar /tr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -/tr/docs/Web/Guide/HTML /tr/docs/Learn/HTML -/tr/docs/Web/Guide/Çizgeler /tr/docs/Web/Guide/Graphics -/tr/docs/Web/Güvenlik /tr/docs/Web/Security -/tr/docs/Web/Güvenlik/Transport_Layer_Security /tr/docs/Web/Security/Transport_Layer_Security -/tr/docs/Web/HTML-Alani /tr/docs/orphaned/Web/HTML-Alani -/tr/docs/Web/HTML/Giriş /tr/docs/Learn/HTML/Introduction_to_HTML -/tr/docs/Web/HTML/HTML5 /tr/docs/Web/Guide/HTML/HTML5 -/tr/docs/Web/HTTP/Oturum /tr/docs/Web/HTTP/Session -/tr/docs/Web/HTTP/metotlar /tr/docs/Web/HTTP/Methods -/tr/docs/Web/JavaScript/Guide/Fonksiyonlar /tr/docs/Web/JavaScript/Guide/Functions -/tr/docs/Web/JavaScript/Guide/Ifadeler /tr/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/tr/docs/Web/JavaScript/Guide/Nesneler_ile_çalışmak /tr/docs/Web/JavaScript/Guide/Working_with_Objects -/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /tr/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -/tr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /tr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -/tr/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /tr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map -/tr/docs/Web/JavaScript/Reference/Operatörler /tr/docs/Web/JavaScript/Reference/Operators -/tr/docs/Web/JavaScript/Reference/Operatörler/Arithmetic_Operators /tr/docs/conflicting/Web/JavaScript/Reference/Operators -/tr/docs/Web/JavaScript/Reference/Operatörler/Bitwise_Operators /tr/docs/conflicting/Web/JavaScript/Reference/Operators_3b90ea9617c66e4283e266b64ea7ae4a -/tr/docs/Web/JavaScript/Reference/Operatörler/Mantiksal_Operatorler /tr/docs/conflicting/Web/JavaScript/Reference/Operators_603c79383d36dadbe5083df806de5999 -/tr/docs/Web/JavaScript/Reference/Operatörler/function* /tr/docs/Web/JavaScript/Reference/Operators/function* -/tr/docs/Web/JavaScript/Reference/Operatörler/instanceof /tr/docs/Web/JavaScript/Reference/Operators/instanceof -/tr/docs/Web/JavaScript/Reference/Operatörler/super /tr/docs/Web/JavaScript/Reference/Operators/super -/tr/docs/Web/JavaScript/Reference/Operatörler/this /tr/docs/Web/JavaScript/Reference/Operators/this -/tr/docs/Web/JavaScript/Reference/Operatörler/typeof /tr/docs/Web/JavaScript/Reference/Operators/typeof -/tr/docs/Web/JavaScript/Veri_Yapısı /tr/docs/Web/JavaScript/Data_structures -/tr/docs/en /en-US/ -/tr/docs/Öğren /tr/docs/Learn -/tr/docs/Öğren/CSS /tr/docs/Learn/CSS -/tr/docs/Öğren/CSS/CSS_layout /tr/docs/Learn/CSS/CSS_layout -/tr/docs/Öğren/CSS/CSS_layout/Introduction /tr/docs/Learn/CSS/CSS_layout/Introduction -/tr/docs/Öğren/CSS/CSS_yapi_taslari /tr/docs/Learn/CSS/Building_blocks -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Backgrounds_and_borders /tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Cascade_and_inheritance /tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Debugging_CSS /tr/docs/Learn/CSS/Building_blocks/Debugging_CSS -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Handling_different_text_directions /tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Images_media_form_elements /tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Organizing /tr/docs/Learn/CSS/Building_blocks/Organizing -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Overflow_Tasks /tr/docs/Learn/CSS/Building_blocks/Overflow_Tasks -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Overflowing_content /tr/docs/Learn/CSS/Building_blocks/Overflowing_content -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Selectors /tr/docs/Web/CSS/CSS_Selectors -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS /tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Sizing_tasks /tr/docs/Learn/CSS/Building_blocks/Sizing_tasks -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Styling_tables /tr/docs/Learn/CSS/Building_blocks/Styling_tables -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Test_your_skills_backgrounds_and_borders /tr/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders -/tr/docs/Öğren/CSS/CSS_yapi_taslari/The_box_model /tr/docs/Learn/CSS/Building_blocks/The_box_model -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Values_and_units /tr/docs/Learn/CSS/Building_blocks/Values_and_units -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Values_tasks /tr/docs/Learn/CSS/Building_blocks/Values_tasks -/tr/docs/Öğren/CSS/CSS_yapi_taslari/Writing_Modes_Tasks /tr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks -/tr/docs/Öğren/CSS/Ilk_adimlar /tr/docs/Learn/CSS/First_steps -/tr/docs/Öğren/CSS/Ilk_adimlar/CSS_Nedir /tr/docs/Learn/CSS/First_steps/What_is_CSS -/tr/docs/Öğren/CSS/Ilk_adimlar/CSS_nasil_calisir /tr/docs/Learn/CSS/First_steps/How_CSS_works -/tr/docs/Öğren/CSS/Ilk_adimlar/Getting_started /tr/docs/Learn/CSS/First_steps/Getting_started -/tr/docs/Öğren/CSS/Ilk_adimlar/How_CSS_is_structured /tr/docs/Learn/CSS/First_steps/How_CSS_is_structured -/tr/docs/Öğren/CSS/Ilk_adimlar/Ogrendiklerinizi_Uygulayın /tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge -/tr/docs/Öğren/CSS/Styling_text /tr/docs/Learn/CSS/Styling_text -/tr/docs/Öğren/CSS/Styling_text/Fundamentals /tr/docs/Learn/CSS/Styling_text/Fundamentals -/tr/docs/Öğren/CSS/Styling_text/Styling_links /tr/docs/Learn/CSS/Styling_text/Styling_links -/tr/docs/Öğren/CSS/Styling_text/Styling_lists /tr/docs/Learn/CSS/Styling_text/Styling_lists -/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage /tr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage -/tr/docs/Öğren/CSS/Styling_text/Web_fonts /tr/docs/Learn/CSS/Styling_text/Web_fonts -/tr/docs/Öğren/Front-end_web_developer /tr/docs/Learn/Front-end_web_developer -/tr/docs/Öğren/Getting_started_with_the_web /tr/docs/Learn/Getting_started_with_the_web -/tr/docs/Öğren/Getting_started_with_the_web/How_the_Web_works /tr/docs/Learn/Getting_started_with_the_web/How_the_Web_works -/tr/docs/Öğren/Getting_started_with_the_web/Installing_basic_software /tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software -/tr/docs/Öğren/Getting_started_with_the_web/JavaScript_basics /tr/docs/Learn/Getting_started_with_the_web/JavaScript_basics -/tr/docs/Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek /tr/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like -/tr/docs/Öğren/HTML /tr/docs/Learn/HTML -/tr/docs/Öğren/HTML/Introduction_to_HTML /tr/docs/Learn/HTML/Introduction_to_HTML -/tr/docs/Öğren/HTML/Introduction_to_HTML/Başlangıç /tr/docs/Learn/HTML/Introduction_to_HTML/Getting_started -/tr/docs/Öğren/JavaScript /tr/docs/Learn/JavaScript -/tr/docs/Öğren/JavaScript/First_steps /tr/docs/Learn/JavaScript/First_steps -/tr/docs/Öğren/JavaScript/First_steps/Javascripte_giris /tr/docs/Learn/JavaScript/First_steps/A_first_splash -/tr/docs/Öğren/JavaScript/Objeler /tr/docs/Learn/JavaScript/Objects -/tr/docs/Öğren/JavaScript/Objeler/Basics /tr/docs/Learn/JavaScript/Objects/Basics -/tr/docs/Öğren/Server-side /tr/docs/Learn/Server-side -/tr/docs/Öğren/Server-side/Django /tr/docs/Learn/Server-side/Django -/tr/docs/Öğren/Server-side/Django/Authentication /tr/docs/Learn/Server-side/Django/Authentication -/tr/docs/Öğren/Server-side/Django/Sessions /tr/docs/Learn/Server-side/Django/Sessions -/tr/docs/Öğren/Server-side/Django/website_iskeleti /tr/docs/Learn/Server-side/Django/skeleton_website diff --git a/files/tr/_wikihistory.json b/files/tr/_wikihistory.json deleted file mode 100644 index 0209611e67..0000000000 --- a/files/tr/_wikihistory.json +++ /dev/null @@ -1,2387 +0,0 @@ -{ - "Games": { - "modified": "2020-09-14T16:54:45.005Z", - "contributors": [ - "serdarates", - "Berkay-Cubuk", - "SphinxKnight", - "KayraG" - ] - }, - "Games/Tutorials": { - "modified": "2020-04-21T07:39:09.746Z" - }, - "Games/Tutorials/2D_Breakout_game_pure_JavaScript": { - "modified": "2020-04-21T07:39:10.609Z", - "contributors": [ - "Charizard17" - ] - }, - "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it": { - "modified": "2020-09-01T03:07:45.110Z", - "contributors": [ - "SphinxKnight", - "gmomar992" - ] - }, - "Glossary": { - "modified": "2020-10-07T11:14:38.923Z", - "contributors": [ - "peterbe", - "SphinxKnight", - "wbamberg", - "sebastien-bartoli" - ] - }, - "Glossary/AJAX": { - "modified": "2019-03-23T22:14:02.259Z", - "contributors": [ - "scriptype" - ] - }, - "Glossary/Browser": { - "modified": "2019-03-23T22:03:49.780Z", - "contributors": [ - "ahmetkaba" - ] - }, - "Glossary/CSS": { - "modified": "2020-10-22T17:16:32.534Z", - "contributors": [ - "hakantr" - ] - }, - "Glossary/Callback_function": { - "modified": "2019-03-18T21:21:19.292Z", - "contributors": [ - "onurozkir" - ] - }, - "Glossary/DOM": { - "modified": "2019-03-23T22:05:30.234Z", - "contributors": [ - "alper.pekdemir" - ] - }, - "Glossary/HTML": { - "modified": "2019-03-23T22:05:33.584Z", - "contributors": [ - "alper.pekdemir" - ] - }, - "Glossary/HTTP": { - "modified": "2019-07-09T17:10:21.063Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Glossary/JavaScript": { - "modified": "2019-03-23T22:05:32.635Z", - "contributors": [ - "alper.pekdemir" - ] - }, - "Glossary/MVC": { - "modified": "2020-11-15T07:04:03.843Z", - "contributors": [ - "smskmrym" - ] - }, - "Glossary/Mixin": { - "modified": "2020-11-16T14:23:50.938Z", - "contributors": [ - "Ali-20" - ] - }, - "Glossary/Mutable": { - "modified": "2019-08-29T03:52:51.702Z", - "contributors": [ - "HuseyinTurkmenoglu" - ] - }, - "Glossary/OOP": { - "modified": "2019-03-23T22:03:49.060Z", - "contributors": [ - "ahmetkaba" - ] - }, - "Glossary/Object": { - "modified": "2019-03-23T22:03:39.438Z", - "contributors": [ - "ahmetkaba" - ] - }, - "Glossary/Protocol": { - "modified": "2019-03-23T22:16:10.981Z", - "contributors": [ - "erolkeskin" - ] - }, - "Glossary/Ruby": { - "modified": "2019-03-23T22:13:08.594Z", - "contributors": [ - "ndrx42" - ] - }, - "Glossary/Statement": { - "modified": "2020-12-04T01:02:15.326Z", - "contributors": [ - "denizkaya1910" - ] - }, - "Glossary/Vendor_Prefix": { - "modified": "2019-03-18T21:18:21.865Z", - "contributors": [ - "cortix" - ] - }, - "Learn": { - "modified": "2020-12-12T02:35:21.255Z", - "contributors": [ - "YasinCelebi", - "samrain", - "hakantr", - "zktosu", - "SphinxKnight", - "erhan35", - "kaan35", - "svarlamov", - "engineermetin", - "nahitheper", - "askn" - ] - }, - "Learn/CSS": { - "modified": "2020-10-26T19:42:09.137Z", - "contributors": [ - "hakantr", - "nihalokur", - "Berkay-Cubuk", - "raufsamestone", - "pasalog" - ] - }, - "Learn/CSS/Building_blocks": { - "modified": "2020-10-26T20:12:35.187Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Backgrounds_and_borders": { - "modified": "2020-10-27T11:49:58.173Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Cascade_and_inheritance": { - "modified": "2020-10-26T19:35:27.880Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Debugging_CSS": { - "modified": "2020-11-03T17:03:37.975Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Handling_different_text_directions": { - "modified": "2020-10-28T17:43:47.416Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Images_media_form_elements": { - "modified": "2020-10-31T13:09:45.996Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Organizing": { - "modified": "2020-11-09T10:35:55.540Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Overflow_Tasks": { - "modified": "2020-10-19T10:29:26.404Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Overflowing_content": { - "modified": "2020-10-31T10:11:56.872Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Selectors": { - "modified": "2020-10-26T18:19:03.862Z", - "contributors": [ - "hakantr", - "chrisdavidmills" - ] - }, - "Learn/CSS/Building_blocks/Selectors/Attribute_selectors": { - "modified": "2020-10-26T19:31:19.164Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Selectors/Combinators": { - "modified": "2020-10-26T18:41:35.670Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements": { - "modified": "2020-10-26T19:28:28.981Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors": { - "modified": "2020-10-26T19:34:06.989Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Sizing_items_in_CSS": { - "modified": "2020-10-31T10:34:38.784Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Sizing_tasks": { - "modified": "2020-10-22T09:21:20.303Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Styling_tables": { - "modified": "2020-10-31T20:13:56.766Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders": { - "modified": "2020-10-17T21:28:55.599Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/The_box_model": { - "modified": "2020-10-26T19:26:58.833Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Values_and_units": { - "modified": "2020-10-28T18:44:28.360Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Values_tasks": { - "modified": "2020-10-20T12:06:48.608Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Building_blocks/Writing_Modes_Tasks": { - "modified": "2020-10-19T06:58:07.202Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/CSS_layout": { - "modified": "2020-12-09T18:21:04.587Z", - "contributors": [ - "hakantr", - "asimcanuz", - "jwhitlock", - "chrisdavidmills" - ] - }, - "Learn/CSS/CSS_layout/Introduction": { - "modified": "2020-12-09T18:22:37.810Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps": { - "modified": "2020-10-26T19:46:11.774Z", - "contributors": [ - "hakantr", - "eraticoye", - "nihalokur", - "Berkay-Cubuk" - ] - }, - "Learn/CSS/First_steps/Getting_started": { - "modified": "2020-10-26T19:58:54.757Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps/How_CSS_is_structured": { - "modified": "2020-10-26T20:05:43.727Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps/How_CSS_works": { - "modified": "2020-10-26T20:08:14.999Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { - "modified": "2020-10-26T20:11:11.186Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/First_steps/What_is_CSS": { - "modified": "2020-10-26T19:52:10.775Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text": { - "modified": "2020-11-09T11:28:43.066Z", - "contributors": [ - "hakantr", - "burakbolek", - "nihalokur" - ] - }, - "Learn/CSS/Styling_text/Fundamentals": { - "modified": "2020-11-13T11:56:27.954Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text/Styling_links": { - "modified": "2020-12-06T15:35:17.350Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text/Styling_lists": { - "modified": "2020-12-04T11:14:25.666Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text/Typesetting_a_homepage": { - "modified": "2020-12-06T22:45:30.011Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/CSS/Styling_text/Web_fonts": { - "modified": "2020-12-06T22:12:35.170Z", - "contributors": [ - "hakantr" - ] - }, - "Learn/Common_questions": { - "modified": "2020-07-16T22:35:27.247Z" - }, - "Learn/Common_questions/How_does_the_Internet_work": { - "modified": "2020-07-16T22:35:38.613Z", - "contributors": [ - "alikcan" - ] - }, - "Learn/Common_questions/What_are_browser_developer_tools": { - "modified": "2020-07-16T22:35:48.238Z", - "contributors": [ - "hasanunl" - ] - }, - "Learn/Front-end_web_developer": { - "modified": "2020-10-06T04:07:52.094Z", - "contributors": [ - "Ebu", - "selinwin7" - ] - }, - "Learn/Getting_started_with_the_web": { - "modified": "2020-11-02T12:10:16.997Z", - "contributors": [ - "GreXLin85", - "selinwin7", - "SphinxKnight", - "ozcanuner14", - "2.HALLAÇ", - "dotRaikkonen", - "kaan35", - "halimtekin", - "yilmazozisik", - "askn" - ] - }, - "Learn/Getting_started_with_the_web/How_the_Web_works": { - "modified": "2020-10-24T10:59:07.347Z", - "contributors": [ - "NightCode-luna" - ] - }, - "Learn/Getting_started_with_the_web/Installing_basic_software": { - "modified": "2020-07-16T22:34:11.586Z", - "contributors": [ - "erhan35", - "HuseyinTurkmenoglu", - "aykutkugu" - ] - }, - "Learn/Getting_started_with_the_web/JavaScript_basics": { - "modified": "2020-12-03T08:49:49.563Z", - "contributors": [ - "murerkinn", - "miracyb", - "SphinxKnight", - "umutbozdag", - "alper.pekdemir", - "omrtrk", - "gkhno", - "maydemirx", - "yigitozdemir" - ] - }, - "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { - "modified": "2020-10-14T06:26:48.114Z", - "contributors": [ - "AinTisar", - "receponalan" - ] - }, - "Learn/HTML": { - "modified": "2020-08-07T19:15:04.875Z", - "contributors": [ - "bambinam", - "msyx", - "tufan2005", - "jwhitlock", - "chrisdavidmills" - ] - }, - "Learn/HTML/Introduction_to_HTML": { - "modified": "2020-11-19T16:35:06.616Z", - "contributors": [ - "burakizmirli252", - "eraticoye", - "erhan35", - "kaan35", - "ebubekirtrkr", - "jwhitlock", - "irfanevrens" - ] - }, - "Learn/HTML/Introduction_to_HTML/Getting_started": { - "modified": "2020-07-16T22:23:08.179Z", - "contributors": [ - "peterbe", - "tudecem" - ] - }, - "Learn/JavaScript": { - "modified": "2020-12-13T14:50:04.266Z", - "contributors": [ - "gullusadik", - "pasalog", - "enesanbar" - ] - }, - "Learn/JavaScript/First_steps": { - "modified": "2020-07-16T22:29:55.523Z", - "contributors": [ - "busines.plan.16" - ] - }, - "Learn/JavaScript/First_steps/A_first_splash": { - "modified": "2020-08-31T10:02:41.505Z", - "contributors": [ - "aydgn" - ] - }, - "Learn/JavaScript/Objects": { - "modified": "2020-07-16T22:31:53.513Z", - "contributors": [ - "berabulut", - "dotRaikkonen", - "truefalseman", - "volkansag", - "enginkartal" - ] - }, - "Learn/JavaScript/Objects/Basics": { - "modified": "2020-07-16T22:32:02.139Z", - "contributors": [ - "ArinSoftware", - "AtlasCan" - ] - }, - "Learn/Server-side": { - "modified": "2020-07-16T22:36:02.262Z", - "contributors": [ - "jwhitlock", - "chrisdavidmills" - ] - }, - "Learn/Server-side/Django": { - "modified": "2020-07-16T22:36:35.695Z", - "contributors": [ - "jwhitlock", - "chrisdavidmills" - ] - }, - "Learn/Server-side/Django/Authentication": { - "modified": "2020-07-16T22:37:24.649Z", - "contributors": [ - "safaariman", - "icanates" - ] - }, - "Learn/Server-side/Django/Sessions": { - "modified": "2020-07-16T22:37:28.248Z", - "contributors": [ - "ozgurturkiye", - "icanates" - ] - }, - "Learn/Server-side/Django/skeleton_website": { - "modified": "2020-07-16T22:36:54.756Z", - "contributors": [ - "hakanergul" - ] - }, - "MDN": { - "modified": "2020-02-19T17:59:32.812Z", - "contributors": [ - "jswisher", - "SphinxKnight", - "wbamberg", - "ahmetkilinc", - "umutozdemir97", - "jwhitlock", - "ozkanoron", - "Jeremie", - "DavidWalsh" - ] - }, - "MDN/About": { - "modified": "2020-05-30T08:22:38.074Z", - "contributors": [ - "Berkay-Cubuk" - ] - }, - "MDN/At_ten": { - "modified": "2019-03-23T22:48:44.324Z", - "contributors": [ - "hunkarticaret", - "futuredayv" - ] - }, - "MDN/Contribute": { - "modified": "2019-03-23T23:12:59.753Z", - "contributors": [ - "wbamberg", - "physicalgorithm", - "Sheppy" - ] - }, - "MDN/Contribute/Feedback": { - "modified": "2020-09-30T17:52:43.938Z", - "contributors": [ - "chrisdavidmills", - "jswisher", - "erhan35", - "SphinxKnight", - "ozgurturkiye", - "aceylan", - "wbamberg", - "nadiraltinbas", - "pasalog" - ] - }, - "MDN/Contribute/Getting_started": { - "modified": "2020-09-30T17:16:29.228Z", - "contributors": [ - "chrisdavidmills", - "ebubekirtrkr", - "wbamberg", - "buraksakalli", - "eih", - "sanzak", - "zkanoca", - "engineermetin" - ] - }, - "MDN/Contribute/Howto": { - "modified": "2019-01-17T00:25:24.785Z", - "contributors": [ - "wbamberg", - "fanatikhamsi", - "jswisher" - ] - }, - "MDN/Contribute/Howto/Create_and_edit_pages": { - "modified": "2020-10-12T07:44:14.475Z", - "contributors": [ - "SphinxKnight", - "eminboynukara", - "alpegrup", - "pazzers.info", - "wbamberg", - "erhankilic" - ] - }, - "MDN/Tools": { - "modified": "2020-09-30T16:54:34.254Z", - "contributors": [ - "chrisdavidmills", - "wbamberg" - ] - }, - "MDN/Tools/KumaScript/Troubleshooting": { - "modified": "2020-04-14T08:39:36.193Z", - "contributors": [ - "SphinxKnight", - "orhanfide1965", - "2.HALLAÇ", - "wbamberg", - "hrctelekom" - ] - }, - "MDN/Yari": { - "modified": "2019-09-11T08:38:17.228Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "Sheppy" - ] - }, - "Mozilla": { - "modified": "2019-03-23T23:29:09.914Z", - "contributors": [ - "Sheppy" - ] - }, - "Mozilla/Add-ons": { - "modified": "2019-09-09T12:16:58.836Z", - "contributors": [ - "SphinxKnight", - "EfoliTR", - "akyakaapart", - "pasalog", - "Fatih." - ] - }, - "Mozilla/Add-ons/WebExtensions": { - "modified": "2020-01-23T19:11:12.389Z", - "contributors": [ - "2.HALLAÇ", - "CakirSualp", - "mesutgolcuk", - "tufan2005", - "mutouk" - ] - }, - "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": { - "modified": "2020-04-18T10:07:00.995Z", - "contributors": [ - "OnKoydenKovuldum", - "2.HALLAÇ" - ] - }, - "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { - "modified": "2019-03-30T13:49:03.756Z", - "contributors": [ - "aceylan" - ] - }, - "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { - "modified": "2019-08-06T17:02:11.469Z", - "contributors": [ - "mesutgolcuk" - ] - }, - "Mozilla/Add-ons/WebExtensions/user_interface": { - "modified": "2020-01-23T18:36:25.194Z", - "contributors": [ - "2.HALLAÇ" - ] - }, - "Mozilla/Firefox": { - "modified": "2019-09-10T15:02:32.288Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "tufan2005", - "Relax07" - ] - }, - "Mozilla/Firefox/Releases": { - "modified": "2019-01-16T21:55:24.648Z", - "contributors": [ - "wbamberg", - "jswisher" - ] - }, - "Mozilla/Firefox/Releases/63": { - "modified": "2019-03-18T21:29:50.145Z", - "contributors": [ - "tufan2005" - ] - }, - "Mozilla/Firefox/Releases/81": { - "modified": "2020-09-23T12:11:08.193Z", - "contributors": [ - "solmusgul17" - ] - }, - "Tools": { - "modified": "2020-07-16T22:44:18.586Z", - "contributors": [ - "OnKoydenKovuldum", - "2.HALLAÇ", - "SphinxKnight", - "trabjeb", - "fanatikhamsi", - "kizinteki", - "saidkocdemir", - "pasalog", - "eytanfb", - "teoli", - "ibrahimpatir", - "techexpert" - ] - }, - "Tools/Browser_Console": { - "modified": "2020-07-16T22:35:43.041Z", - "contributors": [ - "muhammet7661" - ] - }, - "Tools/Debugger": { - "modified": "2020-07-16T22:35:06.533Z", - "contributors": [ - "aslihana", - "olgakaragedik" - ] - }, - "Tools/Page_Inspector": { - "modified": "2020-10-01T11:04:52.366Z", - "contributors": [ - "SphinxKnight", - "saimairjet", - "ersengultepe" - ] - }, - "Tools/Performance": { - "modified": "2020-07-16T22:36:13.964Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "Tools/Remote_Debugging": { - "modified": "2020-07-16T22:35:38.272Z", - "contributors": [ - "volkan" - ] - }, - "Tools/Web_Console": { - "modified": "2020-07-16T22:34:09.874Z", - "contributors": [ - "OnKoydenKovuldum", - "aslihana" - ] - }, - "Tools/Web_Console/Rich_output": { - "modified": "2020-07-16T22:34:20.562Z", - "contributors": [ - "aslihana" - ] - }, - "Tools/Web_Console/Split_console": { - "modified": "2020-07-16T22:34:21.412Z", - "contributors": [ - "aslihana" - ] - }, - "Tools/Web_Console/The_command_line_interpreter": { - "modified": "2020-07-16T22:34:19.826Z", - "contributors": [ - "aslihana" - ] - }, - "Tools/Web_Console/UI_Tour": { - "modified": "2020-07-16T22:34:17.660Z", - "contributors": [ - "aslihana" - ] - }, - "Web": { - "modified": "2019-03-25T10:14:11.494Z", - "contributors": [ - "hsynozkara", - "alpr", - "barankurtulusozan", - "ozhankurkcu", - "umutozdemir97", - "trabjeb", - "bysalih", - "ercanersoy", - "Criexe", - "askn", - "techexpert", - "ramesaliyev", - "Jan.Ruzicka" - ] - }, - "Web/API": { - "modified": "2020-05-24T01:51:32.509Z", - "contributors": [ - "akarsumelisa17", - "OnKoydenKovuldum", - "2.HALLAÇ", - "Aqmhkf", - "teoli", - "ozgrozer" - ] - }, - "Web/API/BeforeUnloadEvent": { - "modified": "2020-10-15T22:34:36.602Z", - "contributors": [ - "yildirimzia" - ] - }, - "Web/API/CSS_Object_Model": { - "modified": "2019-03-18T21:09:36.757Z", - "contributors": [ - "mesutgolcuk", - "aligoren" - ] - }, - "Web/API/CSS_Object_Model/Managing_screen_orientation": { - "modified": "2019-03-18T21:09:36.484Z", - "contributors": [ - "mesutgolcuk" - ] - }, - "Web/API/Canvas_API": { - "modified": "2019-03-18T21:29:21.484Z", - "contributors": [ - "alpr" - ] - }, - "Web/API/Comment": { - "modified": "2020-10-15T22:34:30.534Z", - "contributors": [ - "sideshowbarker" - ] - }, - "Web/API/Comment/Comment": { - "modified": "2020-10-15T22:34:30.407Z", - "contributors": [ - "govher.hesretli" - ] - }, - "Web/API/Document_Object_Model": { - "modified": "2019-04-02T11:24:00.407Z", - "contributors": [ - "9999472" - ] - }, - "Web/API/Document_Object_Model/Introduction": { - "modified": "2020-06-21T09:35:43.453Z", - "contributors": [ - "bizimsiti" - ] - }, - "Web/API/Event": { - "modified": "2020-10-15T22:11:43.505Z", - "contributors": [ - "pcat" - ] - }, - "Web/API/EventTarget": { - "modified": "2019-03-23T22:24:43.260Z", - "contributors": [ - "Marsf" - ] - }, - "Web/API/EventTarget/addEventListener": { - "modified": "2020-10-15T22:31:10.154Z", - "contributors": [ - "cmlttnts" - ] - }, - "Web/API/EventTarget/removeEventListener": { - "modified": "2019-04-04T18:11:11.703Z", - "contributors": [ - "aykutkardas", - "emrehayirci" - ] - }, - "Web/API/FileReader": { - "modified": "2019-03-23T22:49:27.335Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/API/FileSystem": { - "modified": "2019-03-23T22:09:06.480Z", - "contributors": [ - "aligoren" - ] - }, - "Web/API/HTMLElement": { - "modified": "2020-10-15T22:14:28.662Z", - "contributors": [ - "mfluehr" - ] - }, - "Web/API/HTMLElement/click": { - "modified": "2020-10-15T22:14:20.700Z", - "contributors": [ - "ouzkagan" - ] - }, - "Web/API/HTMLImageElement": { - "modified": "2019-03-18T21:42:51.922Z", - "contributors": [ - "trusktr" - ] - }, - "Web/API/HTMLImageElement/Image": { - "modified": "2019-03-18T21:42:46.488Z", - "contributors": [ - "aligoren" - ] - }, - "Web/API/IDBIndex": { - "modified": "2019-03-23T22:07:35.558Z", - "contributors": [ - "jpmedley" - ] - }, - "Web/API/IDBIndex/getAll": { - "modified": "2019-03-23T22:07:45.829Z", - "contributors": [ - "diloabininyeri" - ] - }, - "Web/API/MutationObserver": { - "modified": "2019-03-23T22:08:54.225Z", - "contributors": [ - "myteril" - ] - }, - "Web/API/Node": { - "modified": "2020-10-15T22:29:42.646Z", - "contributors": [ - "Zearin_Galaurum" - ] - }, - "Web/API/Storage": { - "modified": "2019-03-23T22:41:12.354Z", - "contributors": [ - "ercanersoy" - ] - }, - "Web/API/WebGL_API": { - "modified": "2019-03-18T21:39:56.129Z", - "contributors": [ - "ahmetkilinc" - ] - }, - "Web/API/WebSocket": { - "modified": "2020-10-15T22:16:05.335Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/WebSocket": { - "modified": "2020-10-15T22:16:04.997Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/binaryType": { - "modified": "2020-10-15T22:16:01.969Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/close": { - "modified": "2020-10-15T22:16:09.143Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/extensions": { - "modified": "2020-10-15T22:16:04.846Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/onclose": { - "modified": "2019-03-18T20:31:59.866Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/onerror": { - "modified": "2020-10-15T22:16:04.926Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/onmessage": { - "modified": "2020-10-15T22:16:07.469Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/onopen": { - "modified": "2020-10-15T22:16:07.494Z", - "contributors": [ - "Mr.Chenzm", - "Yukani" - ] - }, - "Web/API/WebSocket/protocol": { - "modified": "2020-10-15T22:16:07.532Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/readyState": { - "modified": "2020-10-15T22:16:07.490Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/WebSocket/url": { - "modified": "2020-10-15T22:16:07.508Z", - "contributors": [ - "Yukani" - ] - }, - "Web/API/Window": { - "modified": "2019-03-23T22:12:02.013Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/API/Window/opener": { - "modified": "2020-10-15T22:20:36.891Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/Accessibility": { - "modified": "2020-05-04T18:06:45.783Z", - "contributors": [ - "kuleliajans", - "emre2324" - ] - }, - "Web/Accessibility/Understanding_WCAG": { - "modified": "2020-01-31T15:46:37.931Z" - }, - "Web/Accessibility/Understanding_WCAG/Keyboard": { - "modified": "2020-01-31T15:46:38.770Z", - "contributors": [ - "muhammet7661" - ] - }, - "Web/CSS": { - "modified": "2020-09-30T05:40:46.604Z", - "contributors": [ - "hakantr", - "eyuzgul", - "MukerremAkkoyun", - "saidkocdemir", - "pasalog", - "aydinkuloglu", - "onurtemizkan", - "emredemircan" - ] - }, - "Web/CSS/::first-letter": { - "modified": "2020-10-15T22:33:17.182Z", - "contributors": [ - "gartun" - ] - }, - "Web/CSS/:active": { - "modified": "2020-10-15T22:03:59.852Z", - "contributors": [ - "cengizhan.peker" - ] - }, - "Web/CSS/:first-of-type": { - "modified": "2019-03-23T22:11:00.891Z", - "contributors": [ - "ceylanabdullah" - ] - }, - "Web/CSS/:focus": { - "modified": "2020-12-06T15:29:23.997Z", - "contributors": [ - "hakantr" - ] - }, - "Web/CSS/:last-child": { - "modified": "2019-03-23T22:11:15.450Z", - "contributors": [ - "ferhat" - ] - }, - "Web/CSS/:link": { - "modified": "2020-12-06T15:27:57.965Z", - "contributors": [ - "hakantr" - ] - }, - "Web/CSS/:not": { - "modified": "2019-05-06T08:48:57.024Z", - "contributors": [ - "mahmutduva", - "enesfnd" - ] - }, - "Web/CSS/:root": { - "modified": "2020-10-15T22:00:42.688Z", - "contributors": [ - "ahmetkaba" - ] - }, - "Web/CSS/@import": { - "modified": "2019-03-23T22:05:30.123Z", - "contributors": [ - "altug" - ] - }, - "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { - "modified": "2019-05-06T08:15:45.844Z", - "contributors": [ - "raufsamestone" - ] - }, - "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { - "modified": "2019-03-23T22:52:01.740Z", - "contributors": [ - "cenkingunlugu" - ] - }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2019-03-23T23:10:52.329Z", - "contributors": [ - "Criexe" - ] - }, - "Web/CSS/CSS_Selectors": { - "modified": "2020-10-08T05:31:05.552Z", - "contributors": [ - "hakantr" - ] - }, - "Web/CSS/Class_selectors": { - "modified": "2019-03-23T22:27:43.298Z", - "contributors": [ - "pasalog" - ] - }, - "Web/CSS/Reference": { - "modified": "2019-03-23T23:16:58.752Z", - "contributors": [ - "cengizhan.peker", - "IamEmreCelik", - "pasalog", - "MOSD", - "emredemircan" - ] - }, - "Web/CSS/Type_selectors": { - "modified": "2019-03-23T22:27:57.140Z", - "contributors": [ - "pasalog" - ] - }, - "Web/CSS/background": { - "modified": "2020-10-15T22:13:04.157Z", - "contributors": [ - "adenrulz" - ] - }, - "Web/CSS/background-color": { - "modified": "2020-10-15T22:15:03.007Z", - "contributors": [ - "esbabaes" - ] - }, - "Web/CSS/display": { - "modified": "2019-03-23T22:34:43.185Z", - "contributors": [ - "wbamberg", - "cengizhan.peker", - "fscholz", - "pasalog" - ] - }, - "Web/CSS/font-size": { - "modified": "2020-10-15T22:30:14.940Z", - "contributors": [ - "caglaromer", - "Berkay-Cubuk" - ] - }, - "Web/CSS/margin": { - "modified": "2019-03-23T22:21:17.959Z", - "contributors": [ - "asanhix" - ] - }, - "Web/CSS/right": { - "modified": "2019-03-23T23:01:45.151Z", - "contributors": [ - "Sebastianz", - "fscholz", - "mehmetavsar" - ] - }, - "Web/CSS/shape-outside": { - "modified": "2020-11-03T16:13:12.230Z", - "contributors": [ - "hakantr" - ] - }, - "Web/Demos_of_open_web_technologies": { - "modified": "2019-03-23T22:38:02.289Z", - "contributors": [ - "NoOneIsUsingThis", - "nadiraltinbas" - ] - }, - "Web/Guide": { - "modified": "2020-01-23T19:00:24.014Z", - "contributors": [ - "2.HALLAÇ", - "uleming" - ] - }, - "Web/Guide/AJAX": { - "modified": "2020-04-18T10:59:30.654Z", - "contributors": [ - "OnKoydenKovuldum", - "chrisdavidmills", - "Antivir" - ] - }, - "Web/Guide/Graphics": { - "modified": "2019-03-18T21:29:11.131Z", - "contributors": [ - "alpr" - ] - }, - "Web/Guide/HTML/HTML5": { - "modified": "2020-02-13T03:31:34.810Z", - "contributors": [ - "SphinxKnight", - "alvidaverona", - "beehappycorp", - "teoli", - "saidkocdemir", - "asliturk" - ] - }, - "Web/HTML": { - "modified": "2020-11-19T16:28:37.122Z", - "contributors": [ - "burakizmirli252", - "karagozber", - "kuleliajans", - "SphinxKnight" - ] - }, - "Web/HTML/Element": { - "modified": "2019-09-11T09:05:26.771Z", - "contributors": [ - "SphinxKnight", - "SukruKaya", - "teoli" - ] - }, - "Web/HTML/Element/aside": { - "modified": "2019-09-11T09:05:24.353Z", - "contributors": [ - "SphinxKnight", - "Darkefel" - ] - }, - "Web/HTML/Element/head": { - "modified": "2020-10-15T22:33:45.296Z", - "contributors": [ - "Amidfl" - ] - }, - "Web/HTML/Element/hgroup": { - "modified": "2020-10-15T22:24:41.950Z", - "contributors": [ - "cansuari" - ] - }, - "Web/HTML/Element/li": { - "modified": "2019-09-11T09:05:27.766Z", - "contributors": [ - "SphinxKnight", - "pasalog" - ] - }, - "Web/HTML/Element/link": { - "modified": "2020-10-15T22:25:51.442Z", - "contributors": [ - "BaRaN6161_TURK" - ] - }, - "Web/HTTP": { - "modified": "2020-06-18T23:31:39.971Z", - "contributors": [ - "yagicandegirmenci", - "berkansasmaz", - "gulan_gurman", - "minel", - "DevTahsin", - "erolkeskin" - ] - }, - "Web/HTTP/CORS": { - "modified": "2020-10-15T22:13:56.598Z", - "contributors": [ - "AhmetGurbuzz", - "hsntngr2" - ] - }, - "Web/HTTP/CORS/Errors": { - "modified": "2019-06-29T01:28:26.978Z" - }, - "Web/HTTP/CORS/Errors/CORSRequestNotHttp": { - "modified": "2019-07-01T04:02:13.353Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Content_negotiation": { - "modified": "2019-07-09T17:01:03.750Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Cookies": { - "modified": "2019-07-09T17:25:58.223Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Headers": { - "modified": "2020-03-01T16:31:58.724Z", - "contributors": [ - "t3k3", - "kyilmaz80", - "gulan_gurman", - "chrisdavidmills" - ] - }, - "Web/HTTP/Headers/Accept": { - "modified": "2020-10-15T22:26:11.516Z", - "contributors": [ - "ahmetelgun", - "2.HALLAÇ" - ] - }, - "Web/HTTP/Headers/Accept-Language": { - "modified": "2020-10-15T22:20:41.505Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Headers/Cookie": { - "modified": "2020-10-15T22:20:51.369Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Headers/X-XSS-Protection": { - "modified": "2020-10-15T21:57:15.477Z", - "contributors": [ - "ccsplit" - ] - }, - "Web/HTTP/Methods": { - "modified": "2020-10-15T22:20:53.566Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Session": { - "modified": "2019-07-09T17:13:29.470Z", - "contributors": [ - "gulan_gurman" - ] - }, - "Web/HTTP/Status": { - "modified": "2020-08-24T18:10:50.113Z", - "contributors": [ - "elawhitestone", - "tugsanunlu", - "gulan_gurman", - "mgold" - ] - }, - "Web/HTTP/Status/200": { - "modified": "2020-10-15T22:07:42.849Z", - "contributors": [ - "ahmeterenyildirim.com.tr", - "haruntuncay" - ] - }, - "Web/HTTP/Status/205": { - "modified": "2020-02-27T22:54:58.046Z", - "contributors": [ - "Fokyar" - ] - }, - "Web/HTTP/Status/301": { - "modified": "2020-10-15T22:30:52.732Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/302": { - "modified": "2020-10-15T22:30:59.848Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/400": { - "modified": "2020-06-21T18:45:02.972Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/401": { - "modified": "2020-10-15T22:30:53.376Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/402": { - "modified": "2020-10-15T22:30:54.594Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/403": { - "modified": "2020-10-15T22:30:53.667Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/404": { - "modified": "2020-10-15T22:30:52.246Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/405": { - "modified": "2020-06-21T18:50:09.348Z", - "contributors": [ - "tugsanunlu", - "gulan_gurman" - ] - }, - "Web/HTTP/Status/418": { - "modified": "2020-10-15T22:30:55.657Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/HTTP/Status/500": { - "modified": "2020-10-15T21:56:58.227Z", - "contributors": [ - "ahmetcanaydemir" - ] - }, - "Web/JavaScript": { - "modified": "2020-03-12T19:38:02.900Z", - "contributors": [ - "SphinxKnight", - "kdex", - "pasalog", - "ozcanzaferayan", - "saidkocdemir", - "ercanersoy", - "halil", - "teoli", - "askn", - "asliturk", - "Emir", - "techexpert", - "ramesaliyev", - "halilkoca" - ] - }, - "Web/JavaScript/A_re-introduction_to_JavaScript": { - "modified": "2020-03-12T19:37:53.865Z", - "contributors": [ - "FarukKaradeniz", - "Erenoz", - "ozankaraali", - "modularica", - "teoli", - "askn", - "berkerpeksag" - ] - }, - "Web/JavaScript/Data_structures": { - "modified": "2020-03-12T19:48:25.304Z", - "contributors": [ - "ondrhn", - "BarisAyaz" - ] - }, - "Web/JavaScript/Guide": { - "modified": "2020-03-12T19:39:15.666Z", - "contributors": [ - "nuraix", - "HeyDouglas", - "kirpii", - "umutozdemir97", - "ozcanzaferayan", - "pasalog", - "teoli", - "SphinxKnight" - ] - }, - "Web/JavaScript/Guide/Control_flow_and_error_handling": { - "modified": "2020-04-23T07:57:40.916Z", - "contributors": [ - "ahmetcadirci25", - "kahilkubilay", - "ozcanzaferayan", - "pasalog", - "teoli", - "onderomega" - ] - }, - "Web/JavaScript/Guide/Details_of_the_Object_Model": { - "modified": "2020-03-12T19:49:05.589Z", - "contributors": [ - "volkansag" - ] - }, - "Web/JavaScript/Guide/Functions": { - "modified": "2020-03-12T19:45:10.072Z", - "contributors": [ - "rizikolik", - "meryem", - "mrtymy", - "HuseyinTurkmenoglu", - "abdullahoguk", - "ozcanzaferayan" - ] - }, - "Web/JavaScript/Guide/Grammar_and_types": { - "modified": "2020-03-12T19:42:41.805Z", - "contributors": [ - "kahilkubilay", - "pasalog", - "fanatikhamsi", - "ozcanzaferayan" - ] - }, - "Web/JavaScript/Guide/Introduction": { - "modified": "2020-03-12T19:42:33.808Z", - "contributors": [ - "turquoisemelon", - "ozcanzaferayan", - "umutozdemir97", - "cihantuncer", - "pasalog" - ] - }, - "Web/JavaScript/Guide/Loops_and_iteration": { - "modified": "2020-08-24T10:57:50.779Z", - "contributors": [ - "erhanersoz", - "kahilkubilay", - "ozcanzaferayan", - "ozgrozer" - ] - }, - "Web/JavaScript/Guide/Working_with_Objects": { - "modified": "2020-03-12T19:49:40.091Z", - "contributors": [ - "burak-selvi" - ] - }, - "Web/JavaScript/Inheritance_and_the_prototype_chain": { - "modified": "2020-05-23T12:12:22.330Z", - "contributors": [ - "utscoldchain" - ] - }, - "Web/JavaScript/Language_Resources": { - "modified": "2020-04-18T08:47:04.601Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "Web/JavaScript/Memory_Management": { - "modified": "2020-03-12T19:49:51.593Z", - "contributors": [ - "kadirincedev" - ] - }, - "Web/JavaScript/Reference": { - "modified": "2020-03-12T19:38:37.113Z", - "contributors": [ - "teoli", - "SukruKaya", - "ramesaliyev", - "raztus" - ] - }, - "Web/JavaScript/Reference/Classes": { - "modified": "2020-03-12T19:43:09.866Z", - "contributors": [ - "albatigris", - "eyaylagul", - "SelimAbidin", - "canbax", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Classes/static": { - "modified": "2020-03-12T19:43:12.944Z", - "contributors": [ - "hwclass" - ] - }, - "Web/JavaScript/Reference/Errors": { - "modified": "2020-03-12T19:46:42.742Z", - "contributors": [ - "Sheppy" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { - "modified": "2020-03-12T19:46:41.022Z", - "contributors": [ - "barankurtulusozan" - ] - }, - "Web/JavaScript/Reference/Functions": { - "modified": "2020-10-15T21:59:53.913Z", - "contributors": [ - "stephaniehobson" - ] - }, - "Web/JavaScript/Reference/Functions/Arrow_functions": { - "modified": "2020-10-15T21:59:53.816Z", - "contributors": [ - "ArinSoftware", - "eyuzgul", - "ozanduman" - ] - }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-03-12T19:38:42.154Z", - "contributors": [ - "erhan35", - "teoli", - "ramesaliyev", - "Sheppy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array": { - "modified": "2020-10-15T21:25:15.356Z", - "contributors": [ - "advancel", - "SphinxKnight", - "ulassenol", - "wbamberg", - "cevherkarakoc", - "ozanduman", - "maydemirx", - "pasalog", - "teoli", - "ramesaliyev" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/concat": { - "modified": "2019-03-23T23:24:49.511Z", - "contributors": [ - "hcoz", - "teoli", - "ramesaliyev" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/entries": { - "modified": "2019-03-23T22:19:30.442Z", - "contributors": [ - "maydemirx" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/every": { - "modified": "2020-10-15T22:21:26.669Z", - "contributors": [ - "gmertt" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/filter": { - "modified": "2020-10-15T22:13:55.765Z", - "contributors": [ - "hsynozkara" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/find": { - "modified": "2020-10-15T21:56:43.487Z", - "contributors": [ - "EsraAkyurt", - "ahalkaya" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { - "modified": "2020-10-15T22:07:02.626Z", - "contributors": [ - "serkaneken" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/forEach": { - "modified": "2020-10-15T22:08:31.986Z", - "contributors": [ - "hdereli", - "umitemre" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/from": { - "modified": "2019-08-10T20:03:37.484Z", - "contributors": [ - "ozkozturk", - "maydemirx" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/includes": { - "modified": "2020-10-15T21:58:52.132Z", - "contributors": [ - "koca" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { - "modified": "2019-07-18T07:38:14.466Z", - "contributors": [ - "Umut", - "Gaslan", - "maydemirx", - "jwhitlock", - "olorinmello" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/isArray": { - "modified": "2019-03-23T22:30:56.504Z", - "contributors": [ - "maydemirx", - "h4yfans" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/join": { - "modified": "2020-10-15T22:13:40.159Z", - "contributors": [ - "hsntngr" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/length": { - "modified": "2019-03-23T22:19:57.928Z", - "contributors": [ - "maydemirx" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/map": { - "modified": "2020-10-15T22:05:22.754Z", - "contributors": [ - "oyilmaztekin", - "Gaslan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/of": { - "modified": "2020-10-15T22:09:55.252Z", - "contributors": [ - "emiralpseniz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/pop": { - "modified": "2020-10-15T22:25:44.686Z", - "contributors": [ - "4hmetuyar" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/push": { - "modified": "2019-03-23T22:51:14.006Z", - "contributors": [ - "molgun" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/reverse": { - "modified": "2020-10-15T22:22:48.541Z", - "contributors": [ - "sadikkaplan", - "CankatSoysal" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/shift": { - "modified": "2020-10-15T22:01:57.557Z", - "contributors": [ - "caglaror" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/sort": { - "modified": "2020-10-15T22:29:15.377Z", - "contributors": [ - "Berkay-Cubuk", - "ArinSoftware" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/splice": { - "modified": "2020-10-15T22:02:37.278Z", - "contributors": [ - "ArinSoftware", - "ahmetomer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/unshift": { - "modified": "2020-10-15T22:23:34.934Z", - "contributors": [ - "YusufemreK" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/values": { - "modified": "2020-10-15T22:04:26.767Z", - "contributors": [ - "NizamettinTemel" - ] - }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { - "modified": "2019-03-23T22:15:49.591Z", - "contributors": [ - "gokseld7" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T22:01:56.584Z", - "contributors": [ - "tugcebaskan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": { - "modified": "2020-10-15T22:01:54.145Z", - "contributors": [ - "tugcebaskan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2019-03-23T22:23:15.040Z", - "contributors": [ - "maydemirx" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/apply": { - "modified": "2019-03-23T22:21:25.218Z", - "contributors": [ - "fyalavuz", - "MAXMASTER001", - "egulhan", - "fanatikhamsi", - "human241188" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON": { - "modified": "2020-10-15T22:01:10.638Z", - "contributors": [ - "ahmetkilinc" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { - "modified": "2020-10-15T22:07:18.040Z", - "contributors": [ - "yusufunlu" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T22:04:31.537Z", - "contributors": [ - "Hixhi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math": { - "modified": "2020-10-15T22:30:17.573Z", - "contributors": [ - "jecamilosevic899" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sign": { - "modified": "2020-10-15T22:30:10.316Z", - "contributors": [ - "tugsanunlu" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2019-03-18T20:59:02.466Z", - "contributors": [ - "wbamberg", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/assign": { - "modified": "2020-02-29T19:45:55.862Z", - "contributors": [ - "saitergun", - "tcetin" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { - "modified": "2019-03-23T22:40:04.064Z", - "contributors": [ - "Aziz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/entries": { - "modified": "2020-10-15T22:08:07.778Z", - "contributors": [ - "emretapci" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/freeze": { - "modified": "2020-10-15T22:31:48.889Z", - "contributors": [ - "hsntngr2" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { - "modified": "2019-03-23T22:33:27.162Z", - "contributors": [ - "hkan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/toString": { - "modified": "2019-03-23T22:49:29.241Z", - "contributors": [ - "jrsakizci" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/values": { - "modified": "2020-10-15T22:00:19.881Z", - "contributors": [ - "zuzu5132" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise": { - "modified": "2020-10-15T21:42:28.348Z", - "contributors": [ - "yildirimzia", - "eyuzgul", - "fscholz", - "seyhan", - "eih", - "muratoner", - "mrtduzgun" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/all": { - "modified": "2020-10-15T22:15:45.474Z", - "contributors": [ - "eyuzgul" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/catch": { - "modified": "2020-10-15T22:15:46.708Z", - "contributors": [ - "eyuzgul" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp": { - "modified": "2020-10-15T21:59:39.369Z", - "contributors": [ - "halitcelik", - "SphinxKnight" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:56:10.987Z", - "contributors": [ - "Naeus", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/substring": { - "modified": "2020-10-15T21:56:05.745Z", - "contributors": [ - "ozgrozer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/eval": { - "modified": "2020-10-15T22:20:33.147Z", - "contributors": [ - "HuseyinTurkmenoglu" - ] - }, - "Web/JavaScript/Reference/Global_Objects/isFinite": { - "modified": "2020-03-12T19:43:07.628Z", - "contributors": [ - "cihantuncer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/isNaN": { - "modified": "2020-10-15T22:27:10.587Z", - "contributors": [ - "ErsinCabuk" - ] - }, - "Web/JavaScript/Reference/Lexical_grammar": { - "modified": "2020-10-15T22:32:02.667Z", - "contributors": [ - "fexri.babasov97" - ] - }, - "Web/JavaScript/Reference/Operators": { - "modified": "2020-03-12T19:41:24.526Z", - "contributors": [ - "pasalog" - ] - }, - "Web/JavaScript/Reference/Operators/function*": { - "modified": "2020-10-15T22:03:10.564Z", - "contributors": [ - "mustafakucuk" - ] - }, - "Web/JavaScript/Reference/Operators/instanceof": { - "modified": "2020-03-12T19:46:20.732Z", - "contributors": [ - "cenkce" - ] - }, - "Web/JavaScript/Reference/Operators/super": { - "modified": "2020-12-04T05:30:41.838Z", - "contributors": [ - "murerkinn" - ] - }, - "Web/JavaScript/Reference/Operators/this": { - "modified": "2020-03-12T19:42:15.605Z", - "contributors": [ - "co3moz" - ] - }, - "Web/JavaScript/Reference/Operators/typeof": { - "modified": "2020-10-15T22:03:10.125Z", - "contributors": [ - "obzc", - "mustafakucuk" - ] - }, - "Web/JavaScript/Reference/Statements": { - "modified": "2020-03-12T19:43:07.364Z", - "contributors": [ - "fscholz" - ] - }, - "Web/JavaScript/Reference/Statements/block": { - "modified": "2020-03-12T19:46:22.257Z", - "contributors": [ - "kamuransonecek" - ] - }, - "Web/JavaScript/Reference/Statements/break": { - "modified": "2020-10-15T22:00:51.151Z", - "contributors": [ - "kirpii" - ] - }, - "Web/JavaScript/Reference/Statements/const": { - "modified": "2020-12-08T03:38:29.724Z", - "contributors": [ - "SphinxKnight", - "YasinCelebi" - ] - }, - "Web/JavaScript/Reference/Statements/export": { - "modified": "2020-03-12T19:46:48.073Z", - "contributors": [ - "ahalkaya" - ] - }, - "Web/JavaScript/Reference/Statements/return": { - "modified": "2020-03-12T19:43:09.061Z", - "contributors": [ - "ntdvl", - "cihantuncer" - ] - }, - "Web/JavaScript/Reference/Statements/throw": { - "modified": "2020-11-23T05:35:53.155Z", - "contributors": [ - "ysn47", - "onurozkir" - ] - }, - "Web/JavaScript/Reference/Statements/while": { - "modified": "2020-12-03T15:49:18.076Z", - "contributors": [ - "murerkinn" - ] - }, - "Web/JavaScript/Reference/Strict_mode": { - "modified": "2020-05-18T16:27:24.217Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "Web/Manifest": { - "modified": "2019-03-18T21:28:25.980Z", - "contributors": [ - "alpr" - ] - }, - "Web/MathML": { - "modified": "2020-10-15T22:07:35.147Z", - "contributors": [ - "tufan2005" - ] - }, - "Web/Progressive_web_apps": { - "modified": "2020-02-24T21:47:47.992Z", - "contributors": [ - "2.HALLAÇ" - ] - }, - "Web/Progressive_web_apps/Offline_Service_workers": { - "modified": "2020-05-31T18:38:35.106Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "Web/Reference": { - "modified": "2019-03-23T22:37:12.170Z", - "contributors": [ - "MR-AMIR" - ] - }, - "Web/Security": { - "modified": "2019-09-10T16:49:32.135Z", - "contributors": [ - "SphinxKnight", - "umutozdemir97" - ] - }, - "Web/Security/Mixed_content": { - "modified": "2019-03-23T23:08:55.937Z", - "contributors": [ - "bulutefe" - ] - }, - "Web/Security/Transport_Layer_Security": { - "modified": "2020-02-24T22:08:14.293Z", - "contributors": [ - "2.HALLAÇ" - ] - }, - "Web/Security/Weak_Signature_Algorithm": { - "modified": "2019-03-23T22:55:15.192Z", - "contributors": [ - "efeevren" - ] - }, - "Web/Tutorials": { - "modified": "2019-03-23T23:09:03.763Z", - "contributors": [ - "ladriryah", - "saidkocdemir", - "askn" - ] - }, - "WebAssembly": { - "modified": "2020-12-07T20:55:10.919Z", - "contributors": [ - "hakantr" - ] - }, - "WebAssembly/Concepts": { - "modified": "2020-12-07T20:56:17.393Z", - "contributors": [ - "hakantr" - ] - }, - "conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance": { - "modified": "2019-03-23T22:37:30.876Z", - "contributors": [ - "pasalog" - ] - }, - "conflicting/Learn/CSS/First_steps": { - "modified": "2019-03-23T22:51:41.513Z", - "contributors": [ - "alpr", - "pasalog", - "wjinca" - ] - }, - "conflicting/Learn/CSS/First_steps/How_CSS_works": { - "modified": "2019-03-23T22:51:37.807Z", - "contributors": [ - "alpr", - "koca", - "pasalog" - ] - }, - "conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521": { - "modified": "2019-03-23T22:50:18.048Z", - "contributors": [ - "alpr", - "pasalog" - ] - }, - "conflicting/Learn/CSS/First_steps/How_CSS_works_bb137d8ec11d5e9680f32049e9a3cb26": { - "modified": "2019-03-23T22:50:19.247Z", - "contributors": [ - "pasalog" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T22:01:56.391Z", - "contributors": [ - "tugcebaskan" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T22:14:16.067Z", - "contributors": [ - "meryem" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators": { - "modified": "2020-10-15T22:26:57.237Z", - "contributors": [ - "RawShed" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_3b90ea9617c66e4283e266b64ea7ae4a": { - "modified": "2020-10-15T21:59:09.441Z", - "contributors": [ - "cemtopkaya" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_603c79383d36dadbe5083df806de5999": { - "modified": "2020-03-12T19:44:53.162Z", - "contributors": [ - "cicekonur", - "umutozdemir97" - ] - }, - "orphaned/Fennec_(Firefox_Mobile)": { - "modified": "2019-01-16T14:21:08.717Z", - "contributors": [ - "techexpert" - ] - }, - "orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks": { - "modified": "2020-10-15T21:52:54.629Z", - "contributors": [ - "hakantr" - ] - }, - "orphaned/MDN/Community": { - "modified": "2019-09-11T08:00:49.740Z", - "contributors": [ - "SphinxKnight", - "BarisAyaz", - "wbamberg", - "anilkay" - ] - }, - "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2019-03-23T22:21:04.194Z", - "contributors": [ - "wbamberg", - "fanatikhamsi" - ] - }, - "orphaned/MDN/Editor": { - "modified": "2020-09-30T15:43:52.765Z", - "contributors": [ - "chrisdavidmills", - "zktosu", - "sahinb", - "wbamberg", - "Setiawati940@gmail.com" - ] - }, - "orphaned/MDN/Editor/Basics": { - "modified": "2020-09-30T15:43:53.305Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "balimcann" - ] - }, - "orphaned/MDN/Kuma/Server_charts": { - "modified": "2020-04-18T08:41:52.888Z", - "contributors": [ - "OnKoydenKovuldum" - ] - }, - "orphaned/MDN/Tools/Page_watching": { - "modified": "2020-09-30T16:54:34.403Z", - "contributors": [ - "chrisdavidmills", - "2.HALLAÇ" - ] - }, - "orphaned/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext": { - "modified": "2019-04-24T22:00:33.650Z", - "contributors": [ - "Anatolianlion" - ] - }, - "orphaned/Tr": { - "modified": "2019-03-24T00:18:40.718Z", - "contributors": [ - "Criexe", - "teoli", - "techexpert", - "syssgx", - "flodby", - "ACS", - "mepistol", - "huseyin.ozkilic" - ] - }, - "orphaned/Web/HTML-Alani": { - "modified": "2019-09-11T09:11:52.447Z", - "contributors": [ - "msyx" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { - "modified": "2019-03-23T23:24:51.018Z", - "contributors": [ - "teoli", - "ramesaliyev" - ] - } -} diff --git a/files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index 112741627e..0000000000 --- a/files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Cascading and inheritance -slug: conflicting/Learn/CSS/Building_blocks/Cascade_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 -original_slug: 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 :

- -
    -
  • Tarayıcının markup dili için geçerli default stili.
    • -
  • Okuyucunun belirlediği stiller.
    • -
  • Belgenin yazarı tarafından belirtilen stiller. Bu stiller üç yerde bulunabilir; -
      -
    • Harici bir dosyada (örneğin: .../styles/style.css) ; bu kurs öncelikle bu yöntem üzerinde durmaktadır.
      • -
    • Belgenin başlangıcında (markup dilinde bu yöntem için en uygun yer <head> elementi içidir.) Bu yöntem sadece uygulanan belge için kullanılabilir.
      • -
    • Elementin içinde (markup dilinde elementlerin başlama tag'lerinin içine o elementin stili eklenebilir.); bu yöntem bakım ve test için kullanılabilir.
      • -
    -
    • -
- -

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/conflicting/learn/css/first_steps/how_css_works/index.html b/files/tr/conflicting/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 3cc3c2d098..0000000000 --- a/files/tr/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: CSS nedir? -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -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 -original_slug: Web/Guide/CSS/Getting_started/css_nedir ---- -
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

- -
    -
  • Bir web sayfası okuduğunuz bir belge gibidir. Web sayfasında gördüğünüz bilgiler, genellikle bir imleme dili olan HTML(Hyper Text Markup Language) ile yapılandırılmıştır.
    • -
  • Bir uygulamadaki etkileşimli pencereler de aslında bir tür belgelerdir. Bu tür pencereler bir imleme diliyle (ör: XUL gibi) yapılandırılmış olabilir. Bunu bazı Mozilla uygulamalarında bulabilirsiniz. 
    • -
-
- -

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/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/tr/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html deleted file mode 100644 index 9b1673fc1b..0000000000 --- a/files/tr/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Neden CSS Kullanılır -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 -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 -original_slug: 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:

- -
    -
  • Tekrarlanan kodların önlenmesine yardım eder.
    • -
  • Kolay onarım yapılmasını sağlar.
    • -
  • Tek bir yerden bütün biçimlerinizi denetlemenizi sağlar.
    • -
- -
-
Ö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/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html b/files/tr/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html deleted file mode 100644 index e865718c65..0000000000 --- a/files/tr/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: How CSS works -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_bb137d8ec11d5e9680f32049e9a3cb26 -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 -original_slug: 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/conflicting/learn/css/first_steps/index.html b/files/tr/conflicting/learn/css/first_steps/index.html deleted file mode 100644 index 3e7a954dcc..0000000000 --- a/files/tr/conflicting/learn/css/first_steps/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: CSS'e başlarken -slug: conflicting/Learn/CSS/First_steps -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 -original_slug: 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?

- -
    -
  • Bir yazı düzenleyici
    • -
  • Günümüz tarayıcılarından biri
    • -
  • Düzenleyici ve tarayıcının kullanımı için birazcık deneyim
    • -
- -

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/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/tr/conflicting/web/javascript/reference/global_objects/boolean/index.html deleted file mode 100644 index bcb491fe9c..0000000000 --- a/files/tr/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Boolean.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -
{{JSRef}}
- -

Boolean.prototype özelliği {{jsxref ("Boolean")}} yapıcı methodunun prototipini temsil eder.

- -
{{js_property_attributes(0, 0, 0)}}
- -
{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}
- - - -

 

- -

{{jsxref("Boolean")}} instances inherit from Boolean.prototype. You can use the constructor's prototype object to add properties or methods to all {{jsxref("Boolean")}} instances.

- -

Properties

- -
-
Boolean.prototype.constructor
-
Bir örneğin prototipini oluşturan fonksiyonu döndürür. Bu varsayılan olarak {{jsxref ("Boolean")}} işlevidir.
-
- -

Methods

- -
-
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
-
{{Jsxref ("Boolean")}} nesnesinin kaynağını içeren bir dize döndürür; eşdeğer bir nesne oluşturmak için bu dizeyi kullanabilirsiniz. {{Jsxref ("Object.prototype.toSource ()")}} methodunu geçersiz kılar.
-
{{jsxref("Boolean.prototype.toString()")}}
-
Nesnenin değerine bağlı olarak "true" ya da "false" dizesini döndürür. {{Jsxref ("Object.prototype.toString ()")}} methodunu geçersiz kılar.
-
{{jsxref("Boolean.prototype.valueOf()")}}
-
{{Jsxref ("Boolean")}} nesnesinin temel değerini döndürür. {{Jsxref ("Object.prototype.valueOf ()")}} methodunu geçersiz kılar.
-
- -

Özellikler

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzelliklerDurumAçıklama
{{SpecName('ES1')}}{{Spec2('ES1')}}İlk tanım. JavaScript 1.0'da uygulanmaktadır.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ESDraft')}} 
- -

Tarayıcı Uyumluluğu

- -
- - -

{{Compat("javascript.builtins.Boolean.prototype")}}

-
diff --git a/files/tr/conflicting/web/javascript/reference/global_objects/map/index.html b/files/tr/conflicting/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index db9db60531..0000000000 --- a/files/tr/conflicting/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Map.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -
{{JSRef}}
- -

Map.prototype özelliği {{jsxref("Map")}} kurucusunun prototipini temsil eder.

- -
{{js_property_attributes(0,0,0)}}
- -

Tanım

- -

{{jsxref("Map")}} örnekleri {{jsxref("Map.prototype")}}'den miras alınır. Tüm Map örneklerine özellikler veya yöntemler eklemek için yapıcının prototip nesnesini kullanabilirsiniz.

- -

Özellikleri

- -
-
Map.prototype.constructor
-
Bir örneğin prototipini oluşturan işlevi döndürür. Bu, varsayılan olarak {{jsxref("Map")}} işlevidir.
-
{{jsxref("Map.prototype.size")}}
-
Map nesnesindeki anahtar / değer çiftlerinin sayısını döndürür.
-
- -

Yöntemler

- -
-
{{jsxref("Map.prototype.clear()")}}
-
Tüm anahtar / değer çiftlerini Map objesinden siler.
-
{{jsxref("Map.delete", "Map.prototype.delete(key)")}}
-
Map nesnesindeki bir öge varsa ve kaldırılmışsa true öge yoksa false döndürür. Map.prototype.has(key) daha sonra false döndürür.
-
{{jsxref("Map.prototype.entries()")}}
-
Ekleme sırasındaki Map nesnesindeki her öge için [anahtar, değer] dizisini içeren yeni bir Iterator nesnesini döndürür.
-
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
-
Map nesnesindeki her anahtar - değer çifti için ekleme sırasına göre callbackFn ögesini bir kez çağırır.  thisArg parametresi forEach için sağlanmışsa, her geri çağırma için bu değer olarak kullanılacaktır.
-
{{jsxref("Map.get", "Map.prototype.get(key)")}}
-
key ile ilişkilendirilmiş değeri veya hiçbir şey yoksa undefined değerini döndürür.
-
{{jsxref("Map.has", "Map.prototype.has(key)")}}
-
Map nesnesindeki bir değerin key ile ilişkili olup olmadığını belirten bir boolean döndürür.
-
{{jsxref("Map.prototype.keys()")}}
-
Map nesnesindeki her bir ögenin anahtarlarını ekleme sırasına göre içeren yeni bir Iterator nesnesi döndürür.
-
{{jsxref("Map.set", "Map.prototype.set(key, value)")}}
-
Mapnesnesindeki key değerini ayarlar. Map nesnesini döndürür.
-
{{jsxref("Map.prototype.values()")}}
-
Map nesnesindeki her bir ögenin değerlerini ekleme sırasına göre içeren yeni bir  Iterator nesnesi döndürür.
-
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
-
Ekleme sırasındaki Map nesnesindeki her bir öge için[anahtar, değer] dizisini içeren yeni bir Iterator nesnesini döndürür.
-
- -

Şartlar

- - - - - - - - - - - - - - - - - - - -
ŞartDurumAçıklama
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}} -

İlk tanım

-
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}} 
- -

Tarayıcı Uyumluluğu

- - - -

{{Compat("javascript.builtins.Map.prototype")}}

- -

Ayrıca Bakınız

- -
    -
  • {{jsxref("Set.prototype")}}
    • -
diff --git a/files/tr/conflicting/web/javascript/reference/operators/index.html b/files/tr/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index 08ec51807a..0000000000 --- a/files/tr/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: Arithmetic operators -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - Aritmetik Operatörler - - JavaScript -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators -original_slug: Web/JavaScript/Reference/Operatörler/Arithmetic_Operators ---- -
{{jsSidebar("Operators")}}
- -

Aritmetik operatörler sayısal değerleri (değişmez değerler veya değişkenler) kendi değişkeni olarak alır ve tek bir sayısal değer döndürür. Standart aritmetik operatörler toplama (+), çıkarma (-), çıkarma (*), ve bölme (/).

- -
{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}
- - - -

Toplama (+)

- -

Toplama işleci, sayısal değişkenlerin veya dize birleşiminin toplamını üretir.

- -

Syntax

- -
Operator: x + y
-
- -

Examples

- -
// Number + Number -> Toplama
-1 + 2 // 3
-
-// Boolean + Number -> Toplama
-true + 1 // 2
-
-// Boolean + Boolean -> Toplama
-false + false // 0
-
-// Number + String -> Birleşim
-5 + 'foo' // "5foo"
-
-// String + Boolean -> Birleşim
-'foo' + false // "foofalse"
-
-// String + String -> Birleşim
-'foo' + 'bar' // "foobar"
-
- -

Çıkarma (-)

- -

Çıkarma işleci (operator), iki değişkeni çıkarır ve farklarını üretir.

- -

Söz Dizimi

- -
Operator: x - y
-
- -

Örnekler

- -
5 - 3 // 2
-3 - 5 // -2
-'foo' - 3 // NaN(Sayı Değil)
- -

Bölme (/)

- -

Bölme operatörü, sol değişkenin bölüm olduğu ve sağ değişkenin bölen olduğu işlenenlerin bölümünü üretir.

- -

Söz Dizimi

- -
Operator: x / y
-
- -

Örnekler

- -
1 / 2      // 0.5 döndürür
-1 / 2      // Java''da 0 döndürür
-// (her iki sayı da açıkça kayan nokta sayısıdır)
-
-1.0 / 2.0  // JavaScript ve Java 0.5 döndürür
-
-2.0 / 0    // JavaScript sonsuz döndürür
-2.0 / 0.0  // Sonsuzu da döndürür
-2.0 / -0.0 // JavaScript eksi sonsuz da döndürür
- -

Çarpma (*)

- -

Çarpma operatörü değişkenlerin ürününü üretir.

- -

Söz Dizimi

- -
Operator: x * y
-
- -

Örnekler

- -
2 * 2 // 4
--2 * 2 // -4
-Infinity * 0 // NaN(Sayı Değil1)
-Infinity * Infinity // Sonsuz
-'foo' * 2 // NaN
-
- -

Kalan (%)

- -

Kalan operatörü, bir değişken ikinci bir değişken tarafından bölündüğünde kalan döndürür. Her zaman bölüm işareti alır.

- -

Söz Dizimi

- -
Operator: var1 % var2
-
- -

Örnekler

- -
12 % 5 // 2
--1 % 2 // -1
-1 % -2 // 1
-NaN % 2 // NaN
-1 % 2 // 1
-2 % 3 // 2
--4 % 2 // -0
-5.5 % 2 // 1.5
-
- -

Üs (**)

- -

The exponentiation operator returns the result of raising first operand to the power second operand. That is, var1var2, in the preceding statement, where var1 and var2 are variables. Exponentiation operator is right associative. a ** b ** c is equal to a ** (b ** c).

- -

Syntax

- -
Operator: var1 ** var2
-
- -

Notes

- -

In most languages like PHP and Python and others that have an exponentiation operator (**), the exponentiation operator is defined to have a higher precedence than unary operators such as unary + and unary -, but there are a few exceptions. For example, in Bash the ** operator is defined to have a lower precedence than unary operators. In JavaScript, it is impossible to write an ambiguous exponentiation expression, i.e. you cannot put a unary operator (+/-/~/!/delete/void/typeof) immediately before the base number.

- -
-2 ** 2;
-// 4 in Bash, -4 in other languages.
-// This is invalid in JavaScript, as the operation is ambiguous.
-
-
--(2 ** 2);
-// -4 in JavaScript and the author's intention is unambiguous.
-
- -

Examples

- -
2 ** 3 // 8
-3 ** 2 // 9
-3 ** 2.5 // 15.588457268119896
-10 ** -1 // 0.1
-NaN ** 2 // NaN
-
-2 ** 3 ** 2 // 512
-2 ** (3 ** 2) // 512
-(2 ** 3) ** 2 // 64
-
- -

To invert the sign of the result of an exponentiation expression:

- -
-(2 ** 2) // -4
-
- -

To force the base of an exponentiation expression to be a negative number:

- -
(-2) ** 2 // 4
-
- -
-

Note: JavaScript also has a bitwise operator ^ (logical XOR). ** and ^ are different (for example : 2 ** 3 === 8 when 2 ^ 3 === 1.)

-
- -

Artırma (++)

- -

Artış operatörü işlenenini artırır (bir ekler) ve bir değer döndürür.

- -
    -
  • İlk önce değişken adı kullanılırsa, değişkenden sonra operatörle (örneğin, x++) kullanılırsa artmadan önce değeri artırır ve döndürür.
    • -
  • Ön ek kullanılırsa, değişkenden önce operatörle (örneğin, ++x), daha sonra artırıldıktan sonra değeri artıtrır ve döndürür.
    • -
- -

Söz Dizimi

- -
Operator: x++ yada ++x
-
- -

Örnekler

- -
// Postfix
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// Prefix
-var a = 2;
-b = ++a; // a = 3, b = 3
-
- -

Azaltma (--)

- -

The decrement operator decrements (subtracts one from) its operand and returns a value.

- -
    -
  • If used postfix, with operator after operand (for example, x--), then it decrements and returns the value before decrementing.
    • -
  • If used prefix, with operator before operand (for example, --x), then it decrements and returns the value after decrementing.
    • -
- -

Syntax

- -
Operator: x-- or --x
-
- -

Examples

- -
// Postfix
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// Prefix
-var a = 2;
-b = --a; // a = 1, b = 1
-
- -

Unary negation (-)

- -

The unary negation operator precedes its operand and negates it.

- -

Syntax

- -
Operator: -x
-
- -

Examples

- -
var x = 3;
-y = -x; // y = -3, x = 3
-
-// Unary negation operator can convert non-numbers into a number
-var x = "4";
-y = -x; // y = -4
-
- -

Unary plus (+)

- -

The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values true, false, and null. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to {{jsxref("NaN")}}.

- -

Syntax

- -
Operator: +x
-
- -

Examples

- -
+3     // 3
-+'3'   // 3
-+true  // 1
-+false // 0
-+null  // 0
-+function(val){ return val } // NaN
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}
{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}
{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}
{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.operators.arithmetic")}}

- -

See also

- - diff --git a/files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html b/files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html deleted file mode 100644 index aae13a1ced..0000000000 --- a/files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html +++ /dev/null @@ -1,567 +0,0 @@ ---- -title: Bitwise operators -slug: >- - conflicting/Web/JavaScript/Reference/Operators_3b90ea9617c66e4283e266b64ea7ae4a -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators -original_slug: Web/JavaScript/Reference/Operatörler/Bitwise_Operators ---- -
{{jsSidebar("Operators")}}
- -

Bitsel işleçler işlediği elemanlara ondalık, onaltılık veya sayılar yerine 32 bit diziler(sıfır ve birler) olarak davranır. Örneğin, onluk bir sayı olan 9, ikilik sistemde 1001 ile gösterilir. Bitsel işleçler, işlemin iki tarafınada ikili değerleriyle işlem yapar ancak JavaScript standartı olan sayısal değerleri döner.

- -

Aşağıdaki tablo JavaScript'in bitsel işleçlerini özetler:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorUsageDescription
Bitwise ANDa & bBitsel işleçin iki tarafının karşılık gelen bitleri 1 ise, en az bir tanesi 0 ise 0 döndürür.
Bitwise ORa | bBitsel işleçin iki tarafının karşılık gelen bitlerinden en az biri 1 ise 1 döndürür.
Bitwise XORa ^ bBitsel işleçin iki tarafının karşılık gelen bitlerinden ancak bir tanesi 1 ise, 1 döndürür.
Bitwise NOT~ aİşlenenin bitlerini ters çevirir.
Left shifta << ba sayısının ikili haline, sağına b (< 32) adet bit 0 ekleyerek sola doğru kaydırır.
Sign-propagating right shifta >> ba sayısının ikili halini b (< 32) adet bit sağa kaydırır. Pozitif sayılar için b adet 0, negatif sayılar için 1 ekleyerek kaydırır.
Zero-fill right shifta >>> ba sayısının ikili gösterimine b (< 32) bit sağa kaydırır, a sayısının pozitif negatif olmasına bakmadan sayının soluna b adet 0 ekler.
- -

İşaretli 32-bit integer sayılar

- -

The operands of all bitwise operators are converted to signed 32-bit integers in two's complement format. Two's complement format means that a number's negative counterpart (e.g. 5 vs. -5) is all the number's bits inverted (bitwise NOT of the number, a.k.a. ones' complement of the number) plus one. For example, the following encodes the integer 314:

- -
00000000000000000000000100111010
-
- -

The following encodes ~314, i.e. the ones' complement of -314:

- -
11111111111111111111111011000101
-
- -

Finally, the following encodes -314, i.e. the two's complement of -314:

- -
11111111111111111111111011000110
-
- -

The two's complement guarantees that the left-most bit is 0 when the number is positive and 1 when the number is negative. Thus, it is called the sign bit.

- -

The number 0 is the integer that is composed completely of 0 bits.

- -
0 (base 10) = 00000000000000000000000000000000 (base 2)
-
- -

The number -1 is the integer that is composed completely of 1 bits.

- -
-1 (base 10) = 11111111111111111111111111111111 (base 2)
-
- -

The number -2147483648 (hexadecimal representation: -0x80000000) is the integer that is composed completely of 0 bits except the first (left-most) one.

- -
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
-
- -

The number 2147483647 (hexadecimal representation: 0x7fffffff) is the integer that is composed completely of 1 bits except the first (left-most) one.

- -
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
-
- -

The numbers -2147483648 and 2147483647 are the minimum and the maximum integers representable through a 32bit signed number.

- -

Bitwise logical operators

- -

Conceptually, the bitwise logical operators work as follows:

- -
    -
  • The operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). Numbers with more than 32 bits get their most significant bits discarded. For example, the following integer with more than 32 bits will be converted to a 32 bit integer: - 
    Before: 11100110111110100000000000000110000000000001
-After:              10100000000000000110000000000001
    -
    • -
  • Each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
    • -
  • The operator is applied to each pair of bits, and the result is constructed bitwise.
    • -
- -

& (Bitwise AND)

- -

Performs the AND operation on each pair of bits. a AND b yields 1 only if both a and b are 1. The truth table for the AND operation is:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba AND b
000
010
100
111
- -
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
-
- -

Bitwise ANDing any number x with 0 yields 0. Bitwise ANDing any number x with -1 yields x.

- -

| (Bitwise OR)

- -

Performs the OR operation on each pair of bits. a OR b yields 1 if either a or b is 1. The truth table for the OR operation is:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba OR b
000
011
101
111
- -
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
-
- -

Bitwise ORing any number x with 0 yields x. Bitwise ORing any number x with -1 yields -1.

- -

^ (Bitwise XOR)

- -

Performs the XOR operation on each pair of bits. a XOR b yields 1 if a and b are different. The truth table for the XOR operation is:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba XOR b
000
011
101
110
- -
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
-
- -

Bitwise XORing any number x with 0 yields x. Bitwise XORing any number x with -1 yields ~x.

- -

~ (Bitwise NOT)

- -

Performs the NOT operator on each bit. NOT a yields the inverted value (a.k.a. one's complement) of a. The truth table for the NOT operation is:

- - - - - - - - - - - - - - - - -
aNOT a
01
10
- -
 9 (base 10) = 00000000000000000000000000001001 (base 2)
-               --------------------------------
-~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
-
- -

Bitwise NOTing any number x yields -(x + 1). For example, ~-5 yields 4.

- -

Example with indexOf:

- -
var str = 'rawr';
-var searchFor = 'a';
-
-// this is alternative way of typing if (-1*str.indexOf('a') <= 0)
-if (~str.indexOf(searchFor)) {
-  // searchFor is in the string
-} else {
-  // searchFor is not in the string
-}
-
-// here are the values returned by (~str.indexOf(searchFor))
-// r == -1
-// a == -2
-// w == -3
-
- -

Bitwise shift operators

- -

The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.

- -

Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.

- -

<< (Left shift)

- -

This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.

- -

For example, 9 << 2 yields 36:

- -
.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
-
- -

Bitwise shifting any number x to the left by y bits yields x * 2^y.

- -

>> (Sign-propagating right shift)

- -

This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".

- -

For example, 9 >> 2 yields 2:

- -
.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

Likewise, -9 >> 2 yields -3, because the sign is preserved:

- -
.    -9 (base 10): 11111111111111111111111111110111 (base 2)
-                   --------------------------------
--9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
-
- -

>>> (Zero-fill right shift)

- -

This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.

- -

For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, 9 >>> 2 yields 2, the same as 9 >> 2:

- -
.     9 (base 10): 00000000000000000000000000001001 (base 2)
-                   --------------------------------
-9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

However, this is not the case for negative numbers. For example, -9 >>> 2 yields 1073741821, which is different than -9 >> 2 (which yields -3):

- -
.     -9 (base 10): 11111111111111111111111111110111 (base 2)
-                    --------------------------------
--9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
-
- -

Examples

- -

Flags and bitmasks

- -

The bitwise logical operators are often used to create, manipulate, and read sequences of flags, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).

- -

Suppose there are 4 flags:

- -
    -
  • flag A: we have an ant problem
    • -
  • flag B: we own a bat
    • -
  • flag C: we own a cat
    • -
  • flag D: we own a duck
    • -
- -

These flags are represented by a sequence of bits: DCBA. When a flag is set, it has a value of 1. When a flag is cleared, it has a value of 0. Suppose a variable flags has the binary value 0101:

- -
var flags = 5;   // binary 0101
-
- -

This value indicates:

- -
    -
  • flag A is true (we have an ant problem);
    • -
  • flag B is false (we don't own a bat);
    • -
  • flag C is true (we own a cat);
    • -
  • flag D is false (we don't own a duck);
    • -
- -

Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.

- -

A bitmask is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:

- -
var FLAG_A = 1; // 0001
-var FLAG_B = 2; // 0010
-var FLAG_C = 4; // 0100
-var FLAG_D = 8; // 1000
-
- -

New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:

- -
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
-
- -

Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask masks out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:

- -
// if we own a cat
-if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
-   // do stuff
-}
-
- -

A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:

- -
// if we own a bat or we own a cat
-// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
-if ((flags & FLAG_B) || (flags & FLAG_C)) {
-   // do stuff
-}
-
- -
// if we own a bat or cat
-var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
-if (flags & mask) { // 0101 & 0110 => 0100 => true
-   // do stuff
-}
-
- -

Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:

- -
// yes, we own a cat and a duck
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
-flags |= mask;   // 0101 | 1100 => 1101
-
- -

Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:

- -
// no, we don't have an ant problem or own a cat
-var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

The mask could also have been created with ~FLAG_A & ~FLAG_C (De Morgan's law):

- -
// no, we don't have an ant problem, and we don't own a cat
-var mask = ~FLAG_A & ~FLAG_C;
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:

- -
// if we didn't have a bat, we have one now,
-// and if we did have one, bye-bye bat
-// same thing for cats
-var mask = FLAG_B | FLAG_C;
-flags = flags ^ mask;   // 1100 ^ 0110 => 1010
-
- -

Finally, the flags can all be flipped with the NOT operator:

- -
// entering parallel universe...
-flags = ~flags;    // ~1010 => 0101
-
- -

Conversion snippets

- -

Convert a binary String to a decimal Number:

- -
var sBinString = '1011';
-var nMyNumber = parseInt(sBinString, 2);
-alert(nMyNumber); // prints 11, i.e. 1011
-
- -

Convert a decimal Number to a binary String:

- -
var nMyNumber = 11;
-var sBinString = nMyNumber.toString(2);
-alert(sBinString); // prints 1011, i.e. 11
-
- -

Automate Mask Creation

- -

You can create multiple masks from a set of Boolean values, like this:

- -
function createMask() {
-  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
-  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
-  return nMask;
-}
-var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
-var mask2 = createMask(false, false, true); // 4, i.e.: 0100
-var mask3 = createMask(true); // 1, i.e.: 0001
-// etc.
-
-alert(mask1); // prints 11, i.e.: 1011
-
- -

Reverse algorithm: an array of booleans from a mask

- -

If you want to create an Array of Booleans from a mask you can use this code:

- -
function arrayFromMask(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  if (nMask > 0x7fffffff || nMask < -0x80000000) {
-    throw new TypeError('arrayFromMask - out of range');
-  }
-  for (var nShifted = nMask, aFromMask = []; nShifted;
-       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
-  return aFromMask;
-}
-
-var array1 = arrayFromMask(11);
-var array2 = arrayFromMask(4);
-var array3 = arrayFromMask(1);
-
-alert('[' + array1.join(', ') + ']');
-// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
-
- -

You can test both algorithms at the same time…

- -
var nTest = 19; // our custom mask
-var nResult = createMask.apply(this, arrayFromMask(nTest));
-
-alert(nResult); // 19
-
- -

For didactic purpose only (since there is the Number.toString(2) method), we show how it is possible to modify the arrayFromMask algorithm in order to create a String containing the binary representation of a Number, rather than an Array of Booleans:

- -
function createBinaryString(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32;
-       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
-  return sMask;
-}
-
-var string1 = createBinaryString(11);
-var string2 = createBinaryString(4);
-var string3 = createBinaryString(1);
-
-alert(string1);
-// prints 00000000000000000000000000001011, i.e. 11
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
- -

Browser compatibility

- - - -

{{Compat("javascript.operators.bitwise")}}

- -

See also

- - diff --git a/files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html b/files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html deleted file mode 100644 index 8bebaa5873..0000000000 --- a/files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: Mantıksal Operatörler -slug: >- - conflicting/Web/JavaScript/Reference/Operators_603c79383d36dadbe5083df806de5999 -tags: - - Değil - - JavaScript - - Mantıksal Operatörler - - Operator - - Referans - - ve - - ya da -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators -original_slug: Web/JavaScript/Reference/Operatörler/Mantiksal_Operatorler ---- -
{{jsSidebar("Operators")}}
- -

Mantıksal operatörler genellikle {{jsxref("Boolean")}} (mantıksal) değerleri ile kullanılır. Kullanıldıklarında, bir boolean değer döndürürler. Ancak, && ve || operatörleri aslında belirtilmiş olan operandlardan birinin değerini döndürür, bu sebeple eğer bu operatörler Boolean olmayan değerler ile kullanılırsa, Boolean olmayan değerler üretebilirler.

- -

Açıklama

- -

Mantıksal operatörler aşağıdaki tabloda açıklanıyor:

- - - - - - - - - - - - - - - - - - - - - - - - -
OperatörKullanımAçıklama
Mantıksal VE (&&)expr1 && expr2Eğer expr1 false değerine dönüştürülebilirse, expr1  döndürülür. Aksi halde, expr2 döndürülür. Böylece, Boolean değerleri ile kullanıldıklarında, && her iki operand true ise true ; aksi halde, false döndürür.
Mantıksal YA DA (||)expr1 || expr2Eğer expr1 true değerine dönüştürülebilirse, expr1 döndürülür, aksi halde, expr2 döndürülür. Böylece, Boolean değerleri ile kullanıldıklarında, || her iki operanddan herhangi biri true ise true döndürür.
Mantıksal DEĞİL (!)!exprEğer operandın değeri true is false döndürür, aksi alde true döndürür.
- -

Eğer bir değer true değerine dönüştürülebiliyorsa, ona {{Glossary("truthy")}} ismi verilir. Eğer bir değer false değerine dönüştürülebiliyorsa, ona {{Glossary("falsy")}} denir.

- -

False değerine dönüştürülebilen ifadelere örnekler:

- -
    -
  • null;
    • -
  • NaN;
    • -
  • 0;
    • -
  • boş string (""); 
    • -
  • undefined.
    • -
- -

&& ve || operatörleri Boolean olmayan değerler ile kullanılabiliyor olmasına rağmen, döndürdükleri değerler her zaman Boolean değerlerine çevirilebildiğinden, halen Boolean operatörleri olarak düşünülebilirler.

- -

Kısa-devre değerlendirmeleri

- -

Mantıksal operatörler soldan sağa çalıştırıldıkları gibi, mümkünse aşağıdaki kurallar kullanılarak "kısa devre" testine tabi tutulurlar:

- -
    -
  • false && (herhangi) bir kısa devre, false değerine çevrilir.
    • -
  • true || (herhangi) bir kısa devre, true değerine çevrilir.
    • -
- -

Mantık kuralları bu değerlendirmelerin doğruluğunu garantiler. Yukarıdaki ifadelerin tümünün çalıştırılmayacağına, bu sebeple hepsinin yan etkisinin olmayacağına dikkat edin. Ayrıca yukarıdaki ifadenin (herhangi) kısmının tamamıyla bir mantıksal ifadeye eşit olduğuna dikkat edin. (parantezler ile gösterildiği gibi).

- -

Örneğin, aşağıdaki iki fonksiyon birbirinin aynısıdır.

- -
function shortCircuitEvaluation() {
-  doSomething() || doSomethingElse()
-}
-
-function equivalentEvaluation() {
-  var flag = doSomething();
-  if (!flag) {
-    doSomethingElse();
-  }
-}
-
- -

Ancak, aşağıdaki ifadeler operatör önceliğine göre eşit değildir ve sağ el operatörünün tek bir ifade olmasının önemini vurgular (gerekirse parantezler ile gruplanır).

- -
false && true  || true      // returns true
-false && (true || true)     // returns false
- -

Mantıksal VE (&&)

- -

Aşağıdaki kod && (mantıksal VE) operatörüyle ilgili örnekleri gösterir.

- -
a1 = true  && true      // t && t returns true
-a2 = true  && false     // t && f returns false
-a3 = false && true      // f && t returns false
-a4 = false && (3 == 4)  // f && f returns false
-a5 = "Cat" && "Dog"     // t && t returns "Dog"
-a6 = false && "Cat"     // f && t returns false
-a7 = "Cat" && false     // t && f returns false
-a8 = "" && false        // returns ""
-a9 = false && ||        // returns false
-
- -

Mantıksal YA DA (||)

- -

Aşağıdaki kod || (mantıksal YA DA) operatörüyle ilgili örnekleri gösterir.

- -
o1 = true  || true       // t || t returns true
-o2 = false || true       // f || t returns true
-o3 = true  || false      // t || f returns true
-o4 = false || (3 == 4)   // f || f returns false
-o5 = "Cat" || "Dog"      // t || t returns "Cat"
-o6 = false || "Cat"      // f || t returns "Cat"
-o7 = "Cat" || false      // t || f returns "Cat"
-o8 = ""    || false      // returns false
-o9 = false || ""         // returns ""
-
- -

Mantıksal DEĞİL (!)

- -

Aşağıdaki kod ! (mantıksal DEĞİL) operatörüyle ilgili örnekleri gösterir.

- -
n1 = !true              // !t returns false
-n2 = !false             // !f returns true
-n3 = !"Cat"             // !t returns false
-
- -

Dönüşüm kuralları

- -

VE operatörünü YA DA operatörüne dönüştürmek

- -

Booleanları içeren aşağıdaki ifade:

- -
bCondition1 && bCondition2
- -

her zaman şuna eşittir:

- -
!(!bCondition1 || !bCondition2)
- -

YA DA operatörünü VE operatörüne çevirmek

- -

Booleanları içeren aşağıdaki ifade:

- -
bCondition1 || bCondition2
- -

her zaman şuna eşittir:

- -
!(!bCondition1 && !bCondition2)
- -

DEĞİL operatörleri arasında dönüşüm yapmak

- -

Booleanları içeren aşağıdaki ifade:

- -
!!bCondition
- -

her zaman şuna eşittir: 

- -
bCondition
- -

İç içe geçmiş parantezleri kaldırmak

- -

Mantıksal operatörlerin soldan sağa değerlendirilmesi durumunda, kompleks bir ifadeden parantezleri bazı kuralları takip ederek kaldırmak mümkündür.

- -

İç içe geçmiş VE operatörünü kaldırmak

- -

Aşağıda, Boolean içeren bu bileşik işlem:

- -
bCondition1 || (bCondition2 && bCondition3)
- -

her zaman şuna eşittir:

- -
bCondition1 || bCondition2 && bCondition3
- -

İç içe geçmiş YA DA operatörünü kaldırmak

- -

Aşağıda, Boolean içeren bu bileşik ifade:

- -
bCondition1 && (bCondition2 || bCondition3)
- -

her zaman şuna eşittir:

- -
!(!bCondition1 || !bCondition2 && !bCondition3)
- -

Özellikler

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikDurumAçıklama
{{SpecName('ES1')}}{{Spec2('ES1')}}İlk tanım.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Tarifnamenin birkaç bölümünde tanımlandı: Logical NOT Operator, Binary Logical Operators
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Tarifnamenin birkaç bölümünde tanımlandı: Logical NOT Operator, Binary Logical Operators
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Tarifnamenin birkaç bölümünde tanımlandı: Logical NOT Operator, Binary Logical Operators
- -

Tarayıcı Uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Mantıksal VE (&&){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-

Mantıksal YA DA (||)

- 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Mantıksal DEĞİL (!){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidAndroid üzerinde ChromeFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Logical AND (&&){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Logical OR (||){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Logical NOT (!){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Ayrıca bakın

- - diff --git a/files/tr/games/index.html b/files/tr/games/index.html deleted file mode 100644 index a782c9e90f..0000000000 --- a/files/tr/games/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Oyun geliştirme -slug: Games -translation_of: Games -original_slug: Oyunlar ---- -
{{GamesSidebar}}
- -
-

Oyun oynamak bilgisayarda yapılan en popüler aktivitelerden biridir.Yeni teknolojiler, standartlara uygun tarayıcılarda çalışabilen, daha güçlü ve daha kolay geliştirilebilir oyunlar yapmayı mümkün kılıyor.

-
- -
{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}
- -
-
-

Web Tabanlı Oyun Geliştirme

- -

MDN oyun geliştirme merkezine hoşgeldin! Burada oyun geliştirmek isteyen geliştiriciler için kaynaklar sunuyoruz. Soldaki ana menüde birçok yararlı öğretici ve teknik makale bulacaksın. Yani özgürce keşfet. 

- -

Ayrıca, oyun geliştirmede kullanılan en yaygın API'ler hakkında kolayca bilgi bulabilmeniz için bir referans bölümü de ekledik.

- -
Not: Web üzerinde oyun oluşturmak, HTML, CSS ve JavaScript gibi bir dizi temel web teknolojisini kullanır. Öğrenme Alanı, temel bilgilere başlamak için iyi bir yerdir.
-
- -
-

Yerel oyunları Web'e taşıyın

- -

Yerel bir geliştiriciyseniz (örneğin, C ++ dilinde oyunlar yazıyorsanız) ve oyunlarınızı Web'e nasıl taşıyabileceğinizle ilgileniyorsanız, Emscripten aracımız hakkında daha fazla bilgi edinmelisiniz - bu, bir LLVM'den JavaScript derleyicisine, LLVM bayt kodu (örneğin, Clang kullanılarak C / C ++ 'dan veya başka bir dilden oluşturulmuş) ve bunu Web üzerinde çalıştırılabilen asm.js'de derler.

- -

Başlamak için bkz:

- - -
-
- -
-
-

Örnekler

- -

Örnek oyunların listesi için burayı inceleyebilirsin örnek oyunlar sayfası. Ayrıca işinize yarayabilecek içerikler için games.mozilla.org adresini ziyaret edebilirsiniz!

-
-
- -

Bunlarada bak

- -
-
-
-
Build New Games
-
A collaborative site featuring a large number of open web game development tutorials. Has not been very active recently, but still holds some nice resources.
-
Creative JS
-
A collection of impressive JavaScript techniques and experiments, not specific to games, but helpful nonetheless. Has not been very active recently, but still holds some nice resources.
-
Game programming patterns
-
An online book, written by Bob Nystrom, which discusses programming patterns in the context of game development with the aim of helping game developers produce more effective and efficient code.
-
Gamedev.js Weekly
-
Weekly newsletter about HTML5 game development, sent every Friday. Contains the latest articles, tutorials, tools and resources.
-
HTML5 Game Devs Forum
-
Forums for developers, framework creators and publishers. Ask questions, get feedback and help others.
-
-
- -
-
-
HTML5 Game Engine
-
List of the most popular HTML5 game frameworks along with their rating, features and samples.
-
JSBreakouts
-
Compare JavaScript Breakout clones in different frameworks to help you choose the right one for you.
-
Tuts+ Game Development
-
Tutorials and articles about game development in general.
-
HTML5 Gamedev Starter
-
Starter for the new game developers, a curated list of links to various, useful resources around the web.
-
js13kGames
-
JavaScript coding competition for HTML5 game developers with the file size limit set to 13 kilobytes. All the submitted games are available in a readable form on GitHub.
-
Mozilla Hacks blog
-
Games category on the Mozilla Hacks blog containing interesting gamedev related articles.
-
Visual TypeScript game engine
-
TypeScript project based on matter.ts implementation.
-
-
-
diff --git a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html deleted file mode 100644 index ac5a0f560d..0000000000 --- a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Create the Canvas and draw on it -slug: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav ("/en-US/docs/Oyunlar")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

- -
-

Bu, Gamedev Canvas eğitiminde 10 üzerinden 1. adımdır . Bu dersi tamamladıktan sonra bakması gereken kaynak kodunu Gamedev-Canvas-workshop/lesson1.html adresinde bulabilirsiniz .

-
- -

Oyunun işlevselliğini yazmaya başlamadan önce, oyunu içine işlemek için temel bir yapı oluşturmamız gerekiyor. Bu, HTML ve {{htmlelement ("canvas")}} öğesi kullanılarak yapılabilir.

- -

Oyunun HTML'si

- -

Oyun tamamen {{htmlelement("canvas")}} öğesinde oluşturulacağı için HTML belge yapısı oldukça basittir. Favori metin düzenleyicinizi kullanarak yeni bir HTML belgesi oluşturun, index.htmlmantıklı bir konuma farklı kaydedin ve aşağıdaki kodu ona ekleyin:

- -
<! DOCTYPE html>
-<html>
-<head>
-    <meta charset = "utf-8" />
-    <title> Gamedev Canvas Workshop </title>
-    <style>
-    	* {dolgu: 0; kenar boşluğu: 0; }
-    	canvas {arka plan: #eee; Ekran bloğu; kenar boşluğu: 0 otomatik; }
-    </style>
-</head>
-<body>
-
-<canvas id = "myCanvas" width = "480" height = "320"> </canvas>
-
-<script>
-	//JavaScript kodu buraya gelir
-</script>
-
-</body>
-</html>
-
- -

Biz var charsettanımlanmış {{htmlelement( "title")}} ve başlığında bazı temel CSS. Gövde {{htmlelement("canvas")}} ve {{htmlelement("script")}} öğeleri içerir - oyunu ilkinin içinde oluşturacağız ve onu kontrol eden JavaScript kodunu ikinciye yazacağız. {{Htmlelement("canvas")}} öğesinin, referansını kolayca almamızı sağlayan bir iddeğeri vardır myCanvasve 480 piksel genişliğinde ve 320 piksel yüksekliğindedir. Bu eğiticide yazacağımız tüm JavaScript kodu, açılış <script>ve kapanış </script>etiketleri arasında yer alacaktır .

- -

Tuvalle ilgili temel bilgiler

- -

{{Htmlelement("canvas")}} öğesinde gerçekten grafik oluşturabilmek için, önce JavaScript'te ona bir referans almalıyız. Aşağıdakini açılış <script>etiketinizin altına ekleyin .

- -
var canvas = document.getElementById ("myCanvas");
-var ctx = canvas.getContext ("2d");
- -

Burada, canvasdeğişkene {{htmlelement("canvas")}} öğesine bir referans kaydediyoruz . Ardından ctx, 2B oluşturma bağlamını depolamak için değişkeni oluşturuyoruz - bu, Tuval üzerine boyamak için kullanabileceğimiz gerçek araç.

- -

Tuvale kırmızı bir kare yazdıran örnek bir kod parçası görelim. Bunu önceki JavaScript satırlarınızın altına ekleyin, ardından index.htmldenemek için bir tarayıcıya yükleyin .

- -
ctx.beginPath ();
-ctx.rect (20, 40, 50, 50);
-ctx.fillStyle = "# FF0000";
-ctx.fill ();
-ctx.closePath ();
- -

Tüm talimatlar {{domxref("CanvasRenderingContext2D.beginPath()", "beginPath ()")}} ve {{domxref("CanvasRenderingContext2D.closePath()", "closePath()")}} yöntemleri arasındadır. {{Domxref("CanvasRenderingContext2D.rect ()", "rect()")}} kullanarak bir dikdörtgen tanımlıyoruz: ilk iki değer, tuval üzerindeki dikdörtgenin sol üst köşesinin koordinatlarını belirtirken, ikincisi dikdörtgenin genişliğini ve yüksekliğini belirtin. Bizim durumumuzda dikdörtgen ekranın sol tarafından 20 piksel ve üst tarafından 40 piksel olarak boyanmıştır ve 50 piksel genişliğinde ve 50 piksel yüksekliğindedir, bu da onu mükemmel bir kare yapar. {{Domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} özelliği,

- -

Dikdörtgenlerle sınırlı değiliz - işte yeşil bir daire yazdırmak için bir kod parçası. Bunu JavaScript'inizin altına eklemeyi, kaydetmeyi ve yenilemeyi deneyin:

- -
ctx.beginPath ();
-ctx.arc (240, 160, 20, 0, Math.PI * 2, false);
-ctx.fillStyle = "yeşil";
-ctx.fill ();
-ctx.closePath ();
- -

Gördüğünüz gibi {{domxref("CanvasRenderingContext2D.beginPath ()", "beginPath()")}} ve {{domxref("CanvasRenderingContext2D.closePath ()", "closePath()")}} kullanıyoruz yine yöntemler. Bunların arasında, yukarıdaki kodun en önemli kısmı {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} yöntemidir. Altı parametre alır:

- -
    -
  • xve yyayın merkezinin koordinatları
    • -
  • yay yarıçapı
    • -
  • başlangıç ​​açısı ve bitiş açısı (daire çizmenin radyan cinsinden hangi açı ile başlayıp bitirileceği)
    • -
  • çizim yönü ( falsesaat yönünde, varsayılan veya truesaat yönünün tersi için.) Bu son parametre isteğe bağlıdır.
    • -
- -

{{Domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} özelliği öncekinden farklı görünüyor. Bunun nedeni, tıpkı CSS'de olduğu gibi, rengin onaltılık bir değer, renk anahtar sözcüğü, rgba()işlev veya diğer mevcut renk yöntemlerinden herhangi biri olarak belirtilebilmesidir.

- -

{{Domxref("CanvasRenderingContext2D.fill()", "fill()")}} kullanmak ve şekilleri renklerle doldurmak yerine {{domxref("CanvasRenderingContext2D.stroke()", "strok()")}} kullanabiliriz yalnızca dış konturu renklendirmek için. Bu kodu JavaScript'inize de eklemeyi deneyin:

- -
ctx.beginPath ();
-ctx.rect (160, 10, 100, 40);
-ctx.strokeStyle = "rgba (0, 0, 255, 0.5)";
-ctx.stroke ();
-ctx.closePath ();
- -

Yukarıdaki kod, mavi konturlu boş bir dikdörtgen yazdırır. rgba()Fonksiyondaki alfa kanalı sayesinde mavi renk yarı şeffaftır.

- -

Kodunuzu karşılaştırın

- -

İşte bir JSFiddle'da canlı olarak çalıştırılan ilk dersin tam kaynak kodu:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/", "", "395")}}

- -
-

Alıştırma : Verilen şekillerin boyutunu ve rengini değiştirmeyi deneyin.

-
- -

Sonraki adımlar

- -

Şimdi temel HTML'yi kurduk ve tuval hakkında biraz bilgi edindik, ikinci bölüme geçelim ve oyunumuzda topu nasıl hareket ettireceğimize bakalım .

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

diff --git a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html deleted file mode 100644 index 3a821095a6..0000000000 --- a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: 2D breakout game using pure JavaScript -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}

- -

In this step-by-step tutorial we create a simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML5 {{htmlelement("canvas")}}.

- -

Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.

- -

To get the most out of this series of articles you should already have basic to intermediate JavaScript knowledge. After working through this tutorial you should be able to build your own simple Web games.

- -

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

- -

Lesson details

- -

All the lessons — and the different versions of the MDN Breakout game we are building together — are available on GitHub:

- -
    -
  1. Create the Canvas and draw on it
    2. -
  2. Move the ball
    3. -
  3. Bounce off the walls
    4. -
  4. Paddle and keyboard controls
    5. -
  5. Game over
    6. -
  6. Build the brick field
    7. -
  7. Collision detection
    8. -
  8. Track the score and win
    9. -
  9. Mouse controls
    10. -
  10. Finishing up
    11. -
- -

Starting with pure JavaScript is the best way to get a solid knowledge of web game development. After that, you can pick any framework you like and use it for your projects. Frameworks are just tools built with the JavaScript language; so even if you plan on working with them, it's good to learn about the language itself first to know what exactly is going on under the hood. Frameworks speed up development time and help take care of boring parts of the game, but if something is not working as expected, you can always try to debug that or just write your own solutions in pure JavaScript.

- -
-

Note: If you are interested in learning about 2D web game development using a game library, consult this series' counterpart, 2D breakout game using Phaser.

-
- -
-

Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Canvas Content Kit based on this tutorial if you want to give a talk about game development in general.

-
- -

Next steps

- -

Ok, let's get started! Head to the first chapter— Create the Canvas and draw on it.

- -

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} 

diff --git a/files/tr/games/tutorials/index.html b/files/tr/games/tutorials/index.html deleted file mode 100644 index 90d1cb0790..0000000000 --- a/files/tr/games/tutorials/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Tutorials -slug: Games/Tutorials -tags: - - Canvas - - Games - - JavaScript - - NeedsTranslation - - TopicStub - - Web - - Workflows -translation_of: Games/Tutorials ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.

- -
-
2D breakout game using pure JavaScript
-
In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.
-
2D breakout game using Phaser
-
In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using thePhaser HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.
-
2D maze game with device orientation
-
This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the Device Orientation and Vibration APIs to enhance the gameplay and is built using the Phaser framework.
-
2D platform game with Phaser
-
This tutorial series shows how to create a simple platform game using Phaser, covering fundamentals such as sprites, collisions, physics, collectables, and more.
-
diff --git a/files/tr/glossary/ajax/index.html b/files/tr/glossary/ajax/index.html deleted file mode 100644 index b2b2fd109f..0000000000 --- a/files/tr/glossary/ajax/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: AJAX -slug: Glossary/AJAX -tags: - - AJAX - - Başlangıç - - XMLHttpRequest -translation_of: Glossary/AJAX ---- -

AJAX (Asenkron {{glossary("JavaScript")}} ve {{glossary("XML")}}) {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, ve {{glossary("DOM", "DOM'u")}} XMLHttpRequest {{glossary("object", "nesnesi")}} ile kombine ederek daha kompleks web sayfaları oluşturmaya yarayan bir programlama pratiğidir. AJAX sayesinde bir web sayfasının ilgilendiğimiz bölümlerini, bütün sayfayı yenilemek zorunda kalmaksızın, güncelleyebiliriz. AJAX ayrıca asenkron çalışabilmemizi sağlar; güncellemenin gerçekleştiği sırada diğer kodlar çalışmaya devam eder — aksi halde güncelleme bitene kadar kod akışı tıkanırdı (senkron).

- -

Daha fazla bilgi al

- -

Genel bilgi

- - - -

Teknik bilgi

- - diff --git a/files/tr/glossary/browser/index.html b/files/tr/glossary/browser/index.html deleted file mode 100644 index b5c3a91220..0000000000 --- a/files/tr/glossary/browser/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Web Tarayıcısı -slug: Glossary/Browser -translation_of: Glossary/Browser -original_slug: Glossary/Web_Tarayıcısı ---- -

Web tarayıcısı, Kullanıcıların {{Glossary("World Wide Web","Web")}} sunucuları üzerinde bulunan sayfaları görüntülemesi ve sayfadaki {{Glossary("hyperlink","linkler")}} üzerinden başka sayfalara ulaşmasını sağlayan bir programdır.

- -

Daha fazla bilgi edin

- -

Genel Bilgi

- - - -

Bir tarayıcı indir

- - diff --git a/files/tr/glossary/callback_function/index.html b/files/tr/glossary/callback_function/index.html deleted file mode 100644 index df61c52402..0000000000 --- a/files/tr/glossary/callback_function/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Geri Çağırma Fonksiyonları -slug: Glossary/Callback_function -tags: - - Callback - - Callback function - - Geri Çağırma -translation_of: Glossary/Callback_function ---- -

Bir `Geri Çağırma` fonskiyonu başka bir fonksiyona verilen bir parametre şeklindeki fonksiyondur. Geri çağırma fonksiyonu, ikinci fonksiyonun içinde çağrılır ya da çalıştırılır. 

- -

Bir örnek:

- -
function birinci() {
-    setTimeout(function () {
-        alert(1);
-    }, 500);
-}
-
-function ikinci() {
-    alert(2);
-}
-
-birinci();
-ikinci();
-
-// çıktı
-// 2
-// 1
-
- -

Yukarıda kod örneğinde birinci() fonksiyonu ilk çalışmasına rağmen çıktı olarak daha sonra sonuç vermiştir. Bu javascriptin asenkron özelliğindendir. Bu gibi durumların önüne geçmek için `callback` kullanılmalıdır.

- -
function birinci(callback) {
-  setTimeout(
-      function () {
-            alert(1);
-            callback()
-      }, 500);
-}
-
-function ikinci() {
-    alert(2);
-}
-
-birinci(ikinci);
-
-// çıktı
-// 1
-// 2
- -

Yukarıdaki örnekte çıktı olarak önce '1' çalışırken onun bitmesinin ardından parametre olarak verilen 'ikinci()' fonksiyonu çalışmıştır. 

- -

Bir başka örnek;

- -

Örneğin büyük bir dosyayı İnternet'ten indirirken, diğer işlemlerin de aksamamasını isteyelim. Bir başka deyişle, indirme işlemi diğer işlemleri durdurmasın ya da engellemesin. İndirme işleminin arka planda sürmesini, işlem bitince de bir fonksiyonu çağırmak istediğimizde, asenkron çalışma modu uygulanmalıdır. Arka planda bir işlem yürürken, diğer talepleri kabul etmeli ve sistemi bloke etmemelidir. 'Geri çağırma' işlemi tanımlayarak dosya okuma işleminin bittiği sinyalini ve ya diğer işlemlere geçiş işlemi sağlayabiliriz.

- -

Learn more

- -

General knowledge

- -
    -
  • {{interwiki("wikipedia", "Callback_(computer_programming)", "Callback")}} on Wikipedia
    • -
diff --git a/files/tr/glossary/css/index.html b/files/tr/glossary/css/index.html deleted file mode 100644 index 40f4c6ee7d..0000000000 --- a/files/tr/glossary/css/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: CSS -slug: Glossary/CSS -tags: - - CSS - - CodingScripting - - Glossary - - Komut Dosyası - - Sözlük - - Web - - 'l10n:priority' - - oncelik -translation_of: Glossary/CSS ---- -

CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the {{glossary("browser")}}. The browser applies CSS style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.

- -

CSS is one of the three core Web technologies, along with {{Glossary("HTML")}} and {{Glossary("JavaScript")}}. CSS usually styles {{Glossary("Element","HTML elements")}}, but can be also used with other markup languages like {{Glossary("SVG")}} or {{Glossary("XML")}}.

- -

A CSS rule is a set of {{Glossary("CSS Property","properties")}} associated with a {{Glossary("CSS selector", "selector")}}. Here is an example that makes every HTML paragraph yellow against a black background:

- -
/* The selector "p" indicates that all paragraphs in the document will be affected by that rule */
-p {
-  /* The "color" property defines the text color, in this case yellow. */
-  color: yellow;
-
-  /* The "background-color" property defines the background color, in this case black. */
-  background-color: black
-}
- -

"Cascading" refers to the rules that govern how selectors are prioritized to change a page's appearance. This is a very important feature, since a complex website can have thousands of CSS rules.

- -

Learn more

- -

General knowledge

- -
    -
  • Learn CSS
    • -
  • {{interwiki("wikipedia", "CSS")}} on Wikipedia
    • -
- -

Technical reference

- - diff --git a/files/tr/glossary/dom/index.html b/files/tr/glossary/dom/index.html deleted file mode 100644 index cef085d4c8..0000000000 --- a/files/tr/glossary/dom/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: DOM -slug: Glossary/DOM -tags: - - DOM - - DOM Standartı -translation_of: Glossary/DOM ---- -

Açılımı 'Document Object Model' olan DOM, herhangi bir {{glossary("HTML")}} yada {{glossary("XML")}} dökümanı ile etkileşebilen ve temsil edebilen bir {{glossary("API")}}'dir. DOM {{glossary("internet tarayıcısı","browser")}}'nda yüklenen bir döküman modelidir. Bu model, dökümanı bir düğüm ağacı şeklinde şemalandırır. Her düğüm bu dokümanın belli bir kısmını (Ör. {{Glossary("nesne","element")}}, metin dizeleri, yorumlar vb. ) temsil eder.

- -

DOM bir internet tarayıcısı üzerinde çalışan programların dökümandaki herhangi bir veriye ulaşmalarına ve etkileşimlerine izin verir. Bu nedenle de {{glossary("Web","Web")}} üzerinde en çok kullanılan {{Glossary("API")}}'lerden bir tanesidir. Kullanılan yazılım ile yeni düğümler yaratılabilir, düğümlerin yerleri , yada verileri değiştirilebilir.

- -

ilk tarayıcılarda DOM yoktu. Tarayıcıların {{Glossary("JavaScript")}}'i desteklemeye başlamaları ile hayata geldi. DOM'un erken dönemleri bazen 'DOM 0' olarak anılır. Bugün, WHATWG grubu bu standartı (İngilizce: DOM Living Standard) idame ettirmektedir. 'Canlı Standart' (The Living Standard) olarak nitelendirilir. Bunun nedeni ise, bu standartın devamlı yenileniyor ve her geçen gün gelişiyor olması nedeniyledir.

- -

Daha Fazla Bilgi

- -

Genel Bilgi

- -
    -
  • Vikipedi'de {{interwiki("wikipedia", "Document_Object_Model", "The Document Object Model")}}
    • -
- -

Teknik Bilgi

- - diff --git a/files/tr/glossary/html/index.html b/files/tr/glossary/html/index.html deleted file mode 100644 index b1035cfd90..0000000000 --- a/files/tr/glossary/html/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: HTML -slug: Glossary/HTML -tags: - - HTML - - Temel Bilgiler -translation_of: Glossary/HTML ---- -

HTML (İngilizce: HyperText Markup Language) bir web sayfasının yapısını açıklayan tanımlayıcı bir dildir.

- -

Kısa Tarihi

- -

Tim Berners-Lee, 1990 yılında, {{glossary("Web","Dünya Çapında Web")}} vizyonun bir parçası olarak, sonraki sene {{glossary("SGML")}}'den türeterek resmileştireceği {{glossary("hypertext")}} konseptini tanımladı. 1993 yılında {{glossary("IETF")}} resmi olarak HTML teknik tanımını yazmaya başladı ve bir kaç taslak yazıldıktan sonra 1995 yılında da 2.0 sürümü çıkardı. 1994 senesinde ise, Berners-Lee, bugün web dediğimiz bu ağı kurabilmek çabasıyla {{glossary("W3C")}}'yi kurdu. 1996 yılında, W3C HTML çalışmalarını devir aldı ve sonraki sene ise HTML 3.2 önerisini yayınladı. 1999 senesinde HTML 4.0 yayımlandı ve 2000 yılında {{glossary("ISO")}} standartı haline geldi.

- -

Yine o günlerde, W3C neredeyse  {{glossary("XHTML")}}'in lehine  HTML'den vaz geçiyordu ki, bu durum 2004 senesinde {{glossary("WHATWG")}} isimli bağımsız bir grubun oluşmasına neden oldu. WHATWG sayesinde {{glossary("HTML5")}} çalışmaları devam etti ve iki organizasyon 2008 senesinde ilk taslağı, 2014 senesinde ise bitirilmiş nihai standartı yayınladılar.

- -

Kavram ve Sözdizimi

- -

Bir HTML dökümanı {{glossary("elements","elemanlar")}} ile yapılandırılmış düz-metin bir dökümandır. Elemanlar birbirine eş açma ve kapama {{Glossary("tags","etiketler")}}'i tarafından çevrelenmiştirler. Her etiket köşeli parantez ile başlar ve sonlanır (<>). Az sayıda da araları boş ve hiç dize yazılamaz etiketler vardır, örnegin {{htmlelement("img")}}.

- -

HTML etiketlerini {{Glossary("attributes","nitelikler")}} ile yapılandırabilirsiniz. Nitelikler tarayıcıların verilen elemanın nasıl yorumlanması gerektiğini belirtirler.

- -

Detail of the structure of an HTML element

- -

Bir HTML dosyası genellikle  .htm yada .html uzantısı ile kayıt edilir, {{Glossary("web server","Sunucu")}} tarafından sunulur, ve herhangi bir {{Glossary("Web browser","Tarayıcı")}} tarafından da görüntülenebilir.

- -

Daha Fazla Bilgi

- -

Genel Bilgi

- -
    -
  • Vikipedi'de {{interwiki("wikipedia", "HTML", "HTML")}}
    • -
- -

HTML Öğrenmek

- - - -

Teknik Referans

- - diff --git a/files/tr/glossary/http/index.html b/files/tr/glossary/http/index.html deleted file mode 100644 index 4512b476c8..0000000000 --- a/files/tr/glossary/http/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: HTTP -slug: Glossary/HTTP -tags: - - HTTP -translation_of: Glossary/HTTP ---- -

Hiper Metin Aktarım Protokolü (HTTP), {{glossary("World Wide Web","Web")}} üzerinde, genellikle bir tarayıcı ile sunucu arasında insanların okuyabilmesi için hipermedya belgeleri aktarımını sağlayan temel ağ {{glossary("protocol")}} 'üdür. HTTP tanımının şu anki sürümüne HTTP/2 denilmektedir.

- -

Bir {{glossary("URI")}} 'nin parçası olan "http://"ye "schema" denir ve genellikle bir adresin başında bulunur, örneğin "https://developer.mozilla.org"da tarayıcıya bu dokümanı HTTP protokolü kullanarak istemesini bildirmektedir. Buradaki https, HTTP protokolünün güvenli sürümünü {{glossary ("SSL")}} belirtir (aynı zamanda TLS de denir).

- -

HTTP metinseldir (tüm iletişim düz metin olarak yapılır) ve durumsuzdur (hiçbir iletişim önceki iletişimden haberdar değildir). Bu özellik insanların internetteki belgeleri (web sitelerini) okuyabilmesi için idealdir. Bunun yanında HTTP, sunucudan sunucuya {{glossary ("REST")}} web servisleri için veya web sitelerinin daha dinamik olması için yapılan {{glossary ("AJAX")}} istekleri için de kullanılabilir.

- -
-

Diğer Kaynaklar

- -
    -
  • MDN'de HTTP
    • -
  • Wikipedia'da {{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}}
    • -
-
diff --git a/files/tr/glossary/index.html b/files/tr/glossary/index.html deleted file mode 100644 index 8e1c81312d..0000000000 --- a/files/tr/glossary/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Glossary -slug: Glossary -tags: - - Beginner - - Glossary - - Index - - Landing - - NeedsTranslation - - TopicStub -translation_of: Glossary ---- -
{{LearnBox({"title":"Learn a new term:"})}}
- -

Web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.

- -

Glossary of Terms

- -

{{GlossaryList({"split": "h3", "css": "multiColumnList"})}}

- -

Contribute to the glossary

- -

This glossary is a never ending work in progress. You can help improving it by writing new entries or by making the existing ones better. The easiest way to start is to hit the following link or to pick one of the suggested terms below.

- -

Add a new entry to the glossary

- -

{{GlossaryList({"terms":["at-rule", "ALPN", "Attack", "Byte-Order Mark", "client", "Character set", "cryptosystem", "debug", "digital signature", "execution", "flex-direction", "GLSL", "Interface", "Library", "Memory management", "routers", "Self-Executing Anonymous Function", "Stylesheet", "Vector image"], "filter": "notdefined", "css": "multiColumnList"})}}

- -

If you want to know more on how to contribute to the glossary, check out the glossary documentation status page.

- -

See also

- - - - diff --git a/files/tr/glossary/javascript/index.html b/files/tr/glossary/javascript/index.html deleted file mode 100644 index 870b64cbbe..0000000000 --- a/files/tr/glossary/javascript/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: JavaScript -slug: Glossary/JavaScript -tags: - - JavaScript - - Programlama - - Temel Bilgiler -translation_of: Glossary/JavaScript ---- -

JavaScript (JS) çoğunlukla kullanıcı bilgisayarı üzerinde, web sayfalarına dinamik işlev kazandırmak amaçlı kullanılan, ama aynı zamanda Node.js gibi paketler aracılığı ile ağ sunucuları üzerinde de çalışabilen bir programlama dilidir.

- -

JavaScript dilini Java programlama dili ile karıştırmayın. Hem "Java", hem de "JavaScript" Oracle şirketinin gerek Amerika'da, gerekse diğer ülkelerde kayıtlı ticari markalarıdır. Fakat, bu iki programlama dilinin birbirinden farklı yazılım kuralları, anlamsal karşılıkları,  ve kullanım amaçları vardır.

- -

Brendan Eich tarafından (o zamanlar Netscape şirketinin bir çalışanıyken) sunucu bilgisayarları üzerinde çalışmak üzere tasarlanmış olan JavaScript, kısa bir süre sonra, Eylül 1995'de, Netscape Navigator internet tarayıcısının 2.0 sürümünde yerini aldı. Yayınlandıktan hemen sonra büyük bir ilgi gördü ve {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} JavaScript desteğini Ağustos 1996 yılında JScript adı altında tanıttı.

- -

1996 senesinin Kasım ayında, Netscape şirketi JavaScript'i sektör içinde bir standart haline getirmek için ECMA International isimli bilişim ve iletişim standartları organizasyonu ile çalışmaya başladı. O zamandan günümüze, ECMA-262 teknik şartnamesi altında tanımlanıp, ECMAScript adı altında bir standart haline gelmiştir. Haziran 2017 tarihi itibariylede en yenisi olan 8'nci sürümü kullanıma sunulmuştur.

- -

JavaScript çoğunlukla internet tarayıcıları üzerinde kullanılır ve yazılımcılara internet sayfalarının yapılarını {{Glossary("DOM")}} aracılığı ile, sayfa içeriklerini {{Glossary("AJAX")}} ve {{Glossary("IndexedDB")}} kullanarak değiştirebilme, {{Glossary("canvas")}} kullanarak sayfa üzerinde grafik çizebilme, kullanıcı cihazları ile çeşitli {{Glossary("API","APIs")}}'ler kullanarak iletişim kurabilmek gibi daha nice imkanlar sunar. İnternet tarayacılarının son zamanlarda {{Glossary("API","APIs")}} uygulamalarında gerçekleştirdikleri gelişim ve performansa borçlu kalarak; JavaScript dünyanın en çok kullanılan dillerinden bir tanesidir.

- -

Bugün JavaScript, çok popüler olan ve internet tarayıcıları dışında, bir çok sistemde çalışabilen Node.js platformu ile sunucu bilgisayarlarına geri dönmüştür. Node.js size JavaScript dili ile yazdığınız programları hem bilgisayar üzerinde çalıştırma imkanı sunar, hemde {{Glossary("HTTP")}} ve {{Glossary("Web Sockets")}} teknolojilerini kullanarak tam sürüm sunucular geliştirmenizi sağlar.

- -

Learn more

- -

Genel Bilgi

- -
    -
  • Vikipedi'de {{interwiki("wikipedia", "JavaScript", "JavaScript")}}
    • -
- -

JavaScript'i Öğrenmek

- - - -

Teknik Referans

- - diff --git a/files/tr/glossary/mixin/index.html b/files/tr/glossary/mixin/index.html deleted file mode 100644 index 721dee4332..0000000000 --- a/files/tr/glossary/mixin/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Mixin -slug: Glossary/Mixin -translation_of: Glossary/Mixin ---- -

Bir karışım, yöntemlerinin ve / veya özelliklerinin bir kısmının veya tümünün uygulanmadığı ve başka bir sınıfın veya arayüzün eksik uygulamaları sağlamasını gerektiren bir sınıf veya arayüzdür. Yeni sınıf veya arayüz daha sonra hem mixin'den hem de kendi kendini tanımladığı özellikleri ve yöntemleri içerir. Mixin veya mixini uygulayan arayüz veya sınıfta uygulanıp uygulanmadığına bakılmaksızın, tüm yöntemler ve özellikler tamamen aynı şekilde kullanılır.

- -

Karışımların avantajı, birden fazla arayüzün aynı yöntemleri ve özellikleri içermesi gereken API'lerin tasarımını basitleştirmek için kullanılabilmeleridir.

- -

Örneğin, WindowOrWorkerGlobalScope karışımı, hem Window hem de WorkerGlobalScope arayüzlerinde bulunması gereken yöntemleri ve özellikleri sağlamak için kullanılır. Karışım, bu arabirimlerin her ikisi tarafından uygulanır.

diff --git a/files/tr/glossary/mutable/index.html b/files/tr/glossary/mutable/index.html deleted file mode 100644 index f156962648..0000000000 --- a/files/tr/glossary/mutable/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Mutable -slug: Glossary/Mutable -translation_of: Glossary/Mutable ---- -

Mutable değiştirilebilen bir değişken türüdür. {{glossary("JavaScript")}}'te, sadece {{Glossary("Object","objects")}} ve {{Glossary("Array","arrays")}} 'ler mutable'dır,  {{Glossary("primitive", "primitive values")}} mutable değildir.

- -

(Bir değiken ad noktasına yeni bir değere dönüştürebilirsiniz, ancak önceki değer hala bellekte tutulur. Bu nedenle garbage collection ihtiyaç vardır.)

- -

Bir mutable object oluşturulduktan sonra durumu değiştirebilen nesnelerdir.

- -

Immutables ise oluşturulduktan sonra durumu değiştirilemeyen nesnelerdir.

- -

Strings ve Numbers 'lar değiştirilemeyen, immutables'lardır. Bunu bir örnekle anlayalım:

- -
var immutableString = "Hello";
-
-// Yukarıdaki kodda, string değer alan yeni bir nesne oluşturduk.
-
-immutableString = immutableString + "World";
-
-// Şimdi, mevcut değere "World" ekliyoruz.
-
- -

"immutableString" e bir string değer eklenmesiyle, aşağıdaki olaylar gerçekleşir:

- -
    -
  1. "immutableString" mevcut değeri alınır
    2. -
  2. "World", "immutableString" mevcut değerine eklenir.
    3. -
  3. Ortaya çıkan değer daha sonra yeni bir bellek bloğuna tahsis edilir.
    4. -
  4. "immutableString" nesnesi şimdi yeni oluşturulmuş bellek alanına işaret ediyor
    5. -
  5. Önceden oluşturulan bellek alanı artık çöp toplama için kullanılabilir.
    6. -
- - - -

Daha fazla bilgi edin

- -

Genel Bilgi

- -
    -
  • {{Interwiki("wikipedia", "Immutable object")}}  Wikipedia'da
    • -
diff --git a/files/tr/glossary/mvc/index.html b/files/tr/glossary/mvc/index.html deleted file mode 100644 index 230a66f88f..0000000000 --- a/files/tr/glossary/mvc/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: MVC -slug: Glossary/MVC -tags: - - .NetCore MVC - - MVC - - MVC Giriş - - MVC Kullanımı - - Model View Controller Nedir -translation_of: Glossary/MVC ---- -

MVC (Model-View-Controller) software design'de kullanıcı arayüzlerini, verileri ve kontrol mantığını uygulamak için yaygın olarak kullanılan bir modeldir. Yazılımın iş mantığı ve ekranı arasındaki ayrımı vurgular. Bu ayrım "separation of concerns", daha iyi bir işbölümü ve daha iyi bakım sağlar.MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter) ve MVW (Model-View-Whatever) gibi diğer tasarım desenleri MVC'ye dayanmaktadır.

- -

MVC yazılım tasarım deseninin üç bölümü aşağıdaki gibi tanımlanabilir:

- -
    -
  1. Model: Veri ve iş mantığını yönetir.
    2. -
  2. View: Düzeni ve ekranı işler.
    3. -
  3. Controller: Komutları modele yönlendirir ve parçaları görüntüler.
    4. -
- -
-

Model View Controller örnek

-
- -

Basit bir alışveriş listesi uygulaması düşünün. Tek istediğimiz, bu hafta satın almamız gereken her eşyanın adının, miktarının ve fiyatının bir listesi. Aşağıda, bu işlevlerin bir kısmını MVC kullanarak nasıl uygulayabileceğimizi açıklayacağız.

- -

Diagram to show the different parts of the mvc architecture.

- -

Model

- -

Model, uygulamanın hangi verileri içermesi gerektiğini tanımlar. Bu verilerin durumu değişirse, model; genellikle görünümü (böylece ekran gerektiği gibi değişebilir) ve bazen denetleyiciyi (güncellenmiş View ı kontrol etmek için farklı mantık gerekiyorsa) bildirir.

- -

Alışveriş listesi uygulamamıza geri dönersek, Model liste öğelerinin hangi verileri içermesi gerektiğini -eşya, fiyat, vb. -  ve listedeki hangi eşyaların zaten mevcut olduğunu belirleyecektir.

- -

View

- -

View, uygulama verilerinin nasıl görüntüleneceğini belirler.

- -

Alışveriş listesi uygulamamızda, görünüm, listenin kullanıcıya nasıl sunulduğunu belirleyecek ve Model den görüntülenecek verileri alacaktır.

- -

Controller

- -

Controller, uygulama kullanıcılarından gelen girdilere yanıt olarak modeli ve/veya görünümü güncelleyen mantık içerir.

- -

Örneğin, alışveriş listemizde ürün eklememize veya silmemize izin veren giriş formları ve butonları olabilir. Bu eylemler Model in güncellenmesini gerektirir, bu nedenle girdi Controller a gönderilir. Bu da Model i uygun şekilde yönetir ve daha sonra güncellenmiş verileri View a gönderir.

- -

Bununla birlikte, verileri farklı bir biçimde görüntülemek için View ı güncellemek isteyebilirsiniz, örneğin, eşya sırasını alfabetik olarak veya en düşük fiyattan en yüksek fiyata sıralayacak şekilde değiştirmek.Bu durumda Controller, Model i güncellemeye gerek kalmadan bunu doğrudan halledebilir.

- -
-

Web'de MVC 

-
- -

Bir web geliştiricisi olarak, daha önce hiç bilinçli olarak kullanmasanız bile, bu model muhtemelen oldukça tanıdık olacaktır. Veri modeliniz muhtemelen bir çeşit veritabanında bulunur (MySQL gibi geleneksel bir sunucu tarafı veritabanı veya IndexedDB [en-US] gibi bir istemci tarafı çözümü olsun.) Uygulamanızın kontrol kodu muhtemelen HTML / JavaScript ile yazılmıştır ve kullanıcı arayüzünüz muhtemelen HTML/CSS/istediğinizherhangibirşey kullanılarak yazılmıştır. Bu MVC'ye çok benziyor, ancak MVC bu bileşenlerin daha katı bir desen izlemesini sağlıyor.

- -

Web'in ilk günlerinde, MVC mimarisi çoğunlukla formlar veya bağlantılar aracılığıyla  güncellemeler isteyen istemci ile  güncellenmiş görünümleri geri almak ve tarayıcıda görüntülemek için server-side(sunucu tarafı) da uygulanırdı.Ancak bu günlerde, client-side(istemci tarafı) veri depolarının ortaya çıkmasıyla daha fazla mantık istemciye itilir ve XMLHttpRequest  gerektiğinde kısmi sayfa güncellemelerine izin verir.

- -

AngularJS ve Ember.js gibi Web çerçeveleri, biraz farklı şekillerde de olsa, bir MVC mimarisini uygular.

- -
-

Daha fazla bilgi edinin

-
- -

Genel bilgi

- -
    -
  • {{interwiki("wikipedia", "Model–view–controller")}} Wikipedia'da.
    • -
diff --git a/files/tr/glossary/object/index.html b/files/tr/glossary/object/index.html deleted file mode 100644 index 8f1d820655..0000000000 --- a/files/tr/glossary/object/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Nesne -slug: Glossary/Object -tags: - - nesne -translation_of: Glossary/Object -original_slug: Glossary/Nesne ---- -

Nesne, veri ve bu veriyle çalışmak için gerekli bilgileri içeren bir yapıya karşılık gelir. Nesneler bazen gerçek dünyadaki şeyler, örneğin yarış oyunundaki bir araba veya harita bile olabilir. {{glossary("JavaScript")}}, Java, C++, Python, ve Ruby {{glossary("NYP","nesne yönelimli programlama")}} dillerine örnektir.

- -

Daha fazla bilgi edin

- -

Genel Bilgi

- - diff --git a/files/tr/glossary/oop/index.html b/files/tr/glossary/oop/index.html deleted file mode 100644 index 64754744bf..0000000000 --- a/files/tr/glossary/oop/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: NYP -slug: Glossary/OOP -translation_of: Glossary/OOP -original_slug: Glossary/NYP ---- -

NYP (Nesne Yönelimli Programlama) verilerin nesneler içine kapsüllendiği ve içinde bulunan bileşenlerin nesneyi yönettiği programlama yaklaşımıdır.

- -

{{glossary("JavaScript")}} ağırlıklı olarak nesne yönelimlidir. Prototip temelli modeli örnek alır (sınıf temelli değildir).

- -

Daha fazla bilgi edin

- -

Genel Bilgi

- - diff --git a/files/tr/glossary/protocol/index.html b/files/tr/glossary/protocol/index.html deleted file mode 100644 index 7532fb38cf..0000000000 --- a/files/tr/glossary/protocol/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Protokol -slug: Glossary/Protocol -tags: - - Altyapı - - Protokol nedir - - Protokoller - - Sözlük -translation_of: Glossary/Protocol -original_slug: Glossary/Protokol ---- -

Protokol, verilerin bilgisayar içinde veya bilgisayarlar arasında nasıl alınıp verildiğini tanımlayan kurallar bütünüdür.

- -

Daha fazla bilgi edinin

- -

Genel Bilgi

- - - -

 

diff --git a/files/tr/glossary/ruby/index.html b/files/tr/glossary/ruby/index.html deleted file mode 100644 index a261a1d8ea..0000000000 --- a/files/tr/glossary/ruby/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Ruby -slug: Glossary/Ruby -translation_of: Glossary/Ruby ---- -

Ruby açık kaynak bir programlama dilidir. {{glossary("world wide web","Web")}} ortamında Ruby,  genellikle sunucu tarafında Ruby on Rails web çatısı ile web siteleri ve uygulamaları üretmek için kullanılır.

- -

Daha Fazla Öğren

- -

Genel bilgiler

- -
    -
  • Wikipedia'da Ruby
    • -
- -

Teknik referanslar

- - diff --git a/files/tr/glossary/statement/index.html b/files/tr/glossary/statement/index.html deleted file mode 100644 index 0067e42681..0000000000 --- a/files/tr/glossary/statement/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Statement -slug: Glossary/Statement -translation_of: Glossary/Statement ---- -

Var deyimi, isteğe bağlı olarak onu bir değerle başlatarak işlev kapsamlı veya genel kapsamlı bir değişken bildirir.

- -

Learn more

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "Statement (computer science)")}} on Wikipedia
    • -
- -

Technical reference

- - - -
    -
diff --git a/files/tr/glossary/vendor_prefix/index.html b/files/tr/glossary/vendor_prefix/index.html deleted file mode 100644 index 175e02806c..0000000000 --- a/files/tr/glossary/vendor_prefix/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Vendor Prefix -slug: Glossary/Vendor_Prefix -tags: - - CodingScripting - - Glossary - - Sözlük -translation_of: Glossary/Vendor_Prefix ---- -

Tarayıcı satıcıları bazen deneysel veya standart dışı CSS özelliklerine ve JavaScript API'lerine önek ekler, bu nedenle geliştiriciler, denemelerine —teoride— güvenmelerini önlerken ve daha sonrasında web geliştiricilerin standardizasyon sürecinde kodunu bozarken yeni fikirler deneyebilirler. Geliştiriciler, tarayıcı davranışı standart hale getirilinceye kadar unprefixed özelliğini eklemeyi beklemelidir.

- -
-

Tarayıcı satıcıları, deneysel özellikler için satıcı öneklerini kullanmayı bırakmaya çalışıyor. Web geliştiricileri bunları deneysel yapılışlarına rağmen üretim Web sitelerinde kullanıyor. Bu, tarayıcı üreticilerinin uyumluluk sağlamasını ve yeni özellikler üzerinde çalışmasını zorlaştırdı; popüler web sitelerini yüklemek için başka tarayıcıların öneklerini eklemek zorunda kalan küçük tarayıcılar için de zararlıdır.

- -

Son zamanlarda, trend, kullanıcı tarafından kontrol edilen bayrakların veya tercihlerin arkasına deneysel özellikler eklemek ve çok daha hızlı bir şekilde kararlı bir duruma ulaşabilecek küçük özellikler oluşturmaktır.

-
- -

CSS önekler

- -

Büyük tarayıcılar aşağıdaki önekleri kullanır:

- -
    -
  • -webkit- (Chrome, Safari, Opera'nın yeni sürümleri, hemen hemen tüm iOS tarayıcıları (iOS için Firefox dahil); Temel olarak, herhangi bir WebKit tabanlı tarayıcı)
    • -
  • -moz- (Firefox)
    • -
  • -o- (Eski, WebKit öncesi, Opera sürümleri)
    • -
  • -ms- (Internet Explorer ve Microsoft Edge)
    • -
- -

API önekler

- -

Tarihsel olarak, satıcılar da deneysel API'ler için ön ekler kullandılar. Eğer bir arayüzün tamamı deneysel ise, o zaman arayüzün adı ön eklenir (ancak içindeki özellikler veya yöntemler değil). Standart bir arayüze deneysel bir özellik veya yöntem eklenirse, o zaman bireysel yöntem veya özellik eklenir.

- -

Arayüz önekleri

- -

Arayüz isimleri için önekler büyük harflidir:

- -
    -
  • WebKit (Chrome, Safari, Opera'nın yeni sürümleri, hemen hemen tüm iOS tarayıcıları (iOS için Firefox dahil); Temel olarak, herhangi bir WebKit tabanlı tarayıcı)
    • -
  • Moz (Firefox)
    • -
  • O (Eski, WebKit öncesi, Opera sürümleri)
    • -
  • MS (Internet Explorer ve Microsoft Edge)
    • -
- -

Özellik ve yöntem önekleri

- -

Özellikler ve yöntemler için önekler küçük harflidir:

- -
    -
  • webkit (Chrome, Safari, Opera'nın yeni sürümleri, hemen hemen tüm iOS tarayıcıları (iOS için Firefox dahil); Temel olarak, herhangi bir WebKit tabanlı tarayıcı)
    • -
  • moz (Firefox)
    • -
  • o (Eski, WebKit öncesi, Opera sürümleri))
    • -
  • ms (Internet Explorer ve Microsoft Edge)
    • -
- -

Daha fazla bilgi edin

- -

Genel Bilgi

- -
    -
  • {{Interwiki("wikipedia", "CSS_hack#Browser_prefixes", "Satıcı öneki")}} - -

    Wikipedia'da

    -
    • -
- -
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/tr/learn/common_questions/how_does_the_internet_work/index.html b/files/tr/learn/common_questions/how_does_the_internet_work/index.html deleted file mode 100644 index 199ba351ea..0000000000 --- a/files/tr/learn/common_questions/how_does_the_internet_work/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: How does the Internet work? -slug: Learn/Common_questions/How_does_the_Internet_work -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
{{LearnSidebar}}
- -
-

This article discusses what the Internet is and how it works.

-
- - - - - - - - - - - - -
Prerequisites:None, but we encourage you to read the Article on setting project goals first
Objective:You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.
- -

Summary

- -

İnternet, web'in belkemiği, web'i mümkün kılan teknik altyapıdır. İnternet, en temel haliyle, hepsi birbirleriyle iletişim kuran geniş bir bilgisayar ağıdır.

- -

İnternetin tarihi biraz belirsiz. 1960'larda ABD Ordusu tarafından finanse edilen bir araştırma projesi olarak başladı ve daha sonra birçok devlet üniversitesinin ve özel şirketin desteğiyle 1980'lerde kamu altyapısına dönüştü. İnterneti destekleyen çeşitli teknolojiler zamanla gelişti, ancak çalışma şekli o kadar değişmedi: İnternet bilgisayarları birbirine bağlamanın ve ne olursa olsun, bağlantıda kalmanın bir yolunu bulan bir yoldur.

- -

Active Learning

- - - -

Deeper dive

- -

A simple network

- -

When two computers need to communicate, you have to link them, either physically (usually with an Ethernet cable) or wirelessly (for example with WiFi or Bluetooth systems). All modern computers can sustain any of those connections.

- -
-

Note: For the rest of this article, we will only talk about physical cables, but wireless networks work the same.

-
- -

Two computers linked together

- -

Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!

- -

Ten computers all together

- -

To solve this problem, each computer on a network is connected to a special tiny computer called a router. This router has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.

- -

Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.

- -

Ten computers with a router

- -

A network of networks

- -

So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single router can't scale that far, but, if you read carefully, we said that a router is a computer like any other, so what keeps us from connecting two routers together? Nothing, so let's do that.

- -

Two routers linked together

- -

By connecting computers to routers, then routers to routers, we are able to scale infinitely.

- -

Routers linked to routers

- -

Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a modem. This modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

- -

A router linked to a modem

- -

So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special routers that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.

- -

Full Internet stack

- -

Finding computers

- -

If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for Internet Protocol). It's an address made of a series of four numbers separated by dots, for example: 192.168.2.10.

- -

That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a domain name. For example (at the time of writing; IP addresses can change) google.com is the domain name used on top of the IP address 173.194.121.32. So using the domain name is the easiest way for us to reach a computer over the Internet.

- -

Show how a domain name can alias an IP address

- -

Internet and the web

- -

As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called Web servers) can send messages intelligible to web browsers. The Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.

- -

Next steps

- - diff --git a/files/tr/learn/common_questions/index.html b/files/tr/learn/common_questions/index.html deleted file mode 100644 index 4aafae4a32..0000000000 --- a/files/tr/learn/common_questions/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Common questions -slug: Learn/Common_questions -tags: - - CodingScripting - - Infrastructure - - Learn - - NeedsTranslation - - TopicStub - - Web - - WebMechanics -translation_of: Learn/Common_questions ---- -
{{LearnSidebar}}
- -

This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own.

- -

How the Web works

- -

This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.

- -
-
-

How does the Internet work?

-
-
The Internet is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.
-
-

What is the difference between webpage, website, web server, and search engine?

-
-
In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!
-
-

What is a URL?

-
-
With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.
-
-

What is a domain name?

-
-
Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.
-
-

What is a web server?

-
-
The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.
-
- -
-
In this article, we'll go over what hyperlinks are and why they matter.
-
- -

Tools and setup

- -

Questions related to the tools/software you can use to build websites.

- -
-
-

How much does it cost to do something on the Web?

-
-
When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).
-
-

What software do I need to build a website?

-
-
In this article we explain which software components you need when you're editing, uploading, or viewing a website.
-
-

What text editors are available?

-
-
In this article we highlight some things to think about when choosing and installing a text editor for web development.
-
-

What are browser developer tools?

-
-
Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.
-
-

How do you make sure your website works properly?

-
-
So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.
-
-

How do you set up a local testing server?

-
-
-
-

This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.

-
-
-
-

How do you upload files to a web server?

-
-
This article shows how to publish your site online with FTP tools — one of the most common ways to get a website online so others can access it from their computers.
-
-

How do I use GitHub Pages?

-
-
This article provides a basic guide to publishing content using GitHub's gh-pages feature.
-
-

How do you host your website on Google App Engine?

-
-
Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
-
-

What tools are available to debug and improve website performance?

-
-
This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.
-
- -

Design and accessibility

- -

This section lists questions related to aesthetics, page structure, accessibility techniques, etc.

- -
-
-

How do I start to design my website?

-
-
This article covers the all-important first step of every project: define what you want to accomplish with it.
-
-

What do common web layouts contain?

-
-
When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.
-
-

What is accessibility?

-
-
This article introduces the basic concepts behind web accessibility.
-
-

How can we design for all types of users?

-
-
This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.
-
-

What HTML features promote accessibility?

-
-
This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.
-
- -

HTML, CSS and JavaScript questions

- -

For common solutions to HTML/CSS/JavaScript problems, try the following articles:

- - diff --git a/files/tr/learn/common_questions/what_are_browser_developer_tools/index.html b/files/tr/learn/common_questions/what_are_browser_developer_tools/index.html deleted file mode 100644 index 685317a3fa..0000000000 --- a/files/tr/learn/common_questions/what_are_browser_developer_tools/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Tarayıcı geliştirici araçları nelerdir? -slug: Learn/Common_questions/What_are_browser_developer_tools -translation_of: Learn/Common_questions/What_are_browser_developer_tools -original_slug: Learn/Common_questions/Tarayıcı_geliştirici_araçları_araçları_nelerdir ---- -
{{IncludeSubnav("/en-US/Learn")}}
- -
-

Günümüzde hemen hemen tüm modern tarayıcılar güçlü ve gelişmiş geliştirici araçlarına sahip. Bu araçlar yüklenmiş durumdaki sayfanın HTML, CSS ve JavaScript kodlarını incelemekten sayfanın istediği asset'lere ve bu asset'lerin yüklenme süresini görebilmeye kadar pek çok işleve sahip. Bu yazıda size kullandığınız tarayıcının geliştirici araçlarının temel işlevlerini öğreneceksiniz.

-
- -
-

Not: Aşağıdaki örnekleri çalıştırmadan önce  Getting started with the Web yazısında geliştirdiğimiz Beginner's example site adlı web sitesini açmalısınız. Bu siteyi aşağıdaki adımları takip ederken açık tutmalısınız.

-
- -

Tarayıcının geliştirici araçlarına ulaşmak

- -

Geliştirici araçları tarayıcınızda aşağıdaki görseldekine benzer bir pencerede bulunmakta:

- -

- -

Peki bu pencereyi nasıl açabiliriz? Bunun üç yolu bulunmakta:

- -
    -
  • Klavye ile: Ctrl + Shift + I,  ya da - -
      -
    • Internet Explorer ve Edge için: F12
      • -
    • macOS için: ⌘ + ⌥ + I
      • -
    -
    • -
  • Menü çubuğu ile: -
      -
    • Firefox: Menu  ➤ Web Developer ➤ Toggle Tools, ya da Tools ➤ Web Developer ➤ Toggle Tools
      • -
    • Chrome: More tools ➤ Developer tools
      • -
    • Safari: Develop ➤ Show Web Inspector. Eğer Develop menüsünü göremiyorsanız, Safari ➤ Preferences ➤ Advanced, ve son olarak menü çubuğunda Show Develop seçeneğini işaretleyin.
      • -
    • Opera: Developer ➤ Developer tools
      • -
    -
    • -
  • Bağlam menüsü ile: Web sayfasındaki bir öğenin üstünde sağ tıkladıktan (Mac için Ctrl-click), sonra açılan menüden Inspect Element seçeneğini seçin. (Bu yöntemin en büyük avantajı açılan pencerede seçilen kodu vurgulaması.)
    • -
- -

- -

Inspector: DOM kaşifi ve CSS editörü

- -

Geliştirici araçları genelde varsayılan olarak Inspector penceresini, aşağıdaki görseldekine benzer şekilde, açar. Bu araç bulunduğunuz sayfanın o anki HTML kodunu ve o koda uygulanan CSS kodlarını gösterir. Ayrıca gösterilen kodları düzenleyebilmenizi ve canlı olarak bu değişimleri görebilmenizi sağlar.

- -

- -

Eğer inpector penceresini göremiyorsanız,

- -
    -
  • Inspector sekmesine tıklayın/dokunun.
    • -
  • Internet Explorer kullanıyorsanız DOM Explorer'a tıklayın/dokunun ya da Ctrl + 1 tuşlarına basın.
    • -
  • Microsoft Edge ya da Opera kullanıyorsanız Elements'e tıklayın/dokunun.
    • -
  • Safari kullanıyorsanız kontroller çok açık olmayabilir, fakat eğer başka bir seçeneği seçmediyseniz HTML kodunu görebilmeniz gerek. CSS kodlarını görmek için Style butonuna tıklayın.
    • -
- -

DOM inspector'ünü keşfetmek

- -

Başlangıç olarak DOM inspector'deki herhangi bir HTML öğesine sağ tıklayın ve açılan bağlam menüsüne göz atın. Mevcut seçenekler tarayıcıdan tarayıcıya değişiklik gösterebilse de başlıca seçenekler hemen hemen her tarayıcıda aynıdır:

- -

- -
    -
  • Delete Node (bazen Delete Element). Seçili öğeyi siler.
    • -
  • Edit as HTML (bazen Add attribute/Edit text). Seçili HTML öğesini düzenleyebilmenizi ve sonuçlarını canı olarak görebilmenizi sağlar. Debugging ve test yapmak için oldukça kullanışlı bir özellikdir.
    • -
  • :hover/:active/:focus. Seçilen öğenin tasarımının nasıl değişeceğine göz atabilmeniz için öğe için seçilen durumu açık duruma getirir.
    • -
  • Copy/Copy as HTML. Seçilen HTML kodunu kopyalar.
    • -
  • Bazı tarayıcılar Copy CSS Path ve Copy XPath seçeneklerine de sahiptir. Bu seçenekler  o anki HTML öğesini seçecek CSS işaretçisini ya da XPath ifadesini kopyalayabilmenizi sağlar.
    • -
- -

Şimdi elinizdeki DOM yapısını düzenlemeyi deneyin. Öncelikle bir öğenin üstünde çift tıklayın, ya da sağ tıklayıp Edit as HTML seçeneğini seçin. Sonrasında seçtiğiniz öğeyi istediğiniz gibi düzenleyebilirsiniz fakat unutmayınki bu değişiklikler kalıcı değildir.

- -

CSS editörünü keşfetmek

- -

Varsayılan olarak CSS editörü seçili öğeye uygulanan CSS kurallarını gösterir:

- -

- -

CSS editörünün pek çok kullanışlı özelliği var:

- -
    -
  • Öğeye uygulanan kurallar öğe için en spesifik olandan en az spesifik olana doğru sıralanır.
    • -
  • Deklarasyonların yanındaki kutucuklara tıklayarak o deklarasyonun kaldırılması durumunda ne olacağını görebilirsiniz.
    • -
  • Kısaltılmış özelliklerin yanlarındaki ok işaretlerine tıklayarak uzun hallerini görebilirsiniz.
    • -
  • Özellik isimlerine ya da değerlere tıklarsanız bir metin kutusu açılacaktır. Bu metin kutusunda yeni değerler ekleyebilir ve canlı olarak oluşacak tasarımı görebilirsiniz.
    • -
  • Her kuralın yanında kuralın dosya adı ve bulunduğu satır numarası bulunmakta. Kurala tıklamanız durumunda geliştirici aracı sizin için kural dosyasını açacaktır. Bu dosyada kuralları düzenleyebilir ve kaydedebilirsiniz.
    • -
  • Kuralların süslü parantezlerinden kapatma parantezine tıklayarak yeni deklarasyonlar yazabileceğiniz bir metin kutusunu açabilirisiniz.
    • -
- -

CSS Viewer üzerinde tıklayabileceğiniz bir kaç sekme görebilirsiniz:

- -
    -
  • Computed: Bu sekme size seçili öğenin hesaplanmış son tasarımını (tarayıcın öğeye uyguladığı son veriler ile) gösterir.
    • -
  • Layout: Firefox'da bu alan iki bölümden oluşur: -
      -
    • Box Model: Seçili öğenin box modelini görsel bir şekilde temsil eder. Bu modelde öğenin sahip olduğu pading, border ve margin değerlerini ve öğenin büyüklüğünü görebilirsiniz.
      • -
    • Grid: Eğer inceledeğiniz sayfa CSS grid yapısını kullanıyorsa bu yapının detaylarını gösterir.
      • -
    -
    • -
  • Fonts: Firefox'da Fonts sekmesi seçili öğede kullanılan fontları gösterir.
    • -
- -

Daha fazlası için

- -

Farklı tarayıcıların Inspector'larını keşfedin:

- - - -

JavaScript debugger'ı

- -

JavaScript debugger, kodunuzdaki problemleri belirleyebilmek için kodun çalışması sırasında beklemesini istediğiniz noktalarda değişkenlerin değerlerini gözlemleyebilme ve breakpointler atayabilme olanağı sağlar.

- -

- -

Debugger'a erişmek için:

- -

Firefox: JavaScript debugger için, Simgesine tıkla ➤ Web Developer ➤ Debugger ya da  Ctrl + Shift + S tuşlarına bas. Eğer geliştirici araçları açık durumdaysa Debugger sekmesine tıkla.

- -

Chrome: Geliştirici araçlarını aç ve Sources sekmesine tıkla. (Opera'da da aynı yöntem geçerli.)

- -

Edge ve Internet Explorer 11: F12 tuşuna bastıktan sonra  Ctrl + 3 tuşlarına basın. Eğer geliştirici araçları açık durumda ise Debugger sekmesine tıklayın.

- -

Safari: Geliştirici araçlarını açtıktan sonra Debugger sekmesini tıklayın.

- -

Debugger'ı keşfetmek

- -

Firefox'da JavaScript Debugger üç bölümden oluşmaktadır.

- -

Dosya Listesi

- -

Soldaki ilk bölmemiz bize debug ettiğiniz sayfa ile ilgili dosyaları listelemektedir. Üzerinde çalışmak istediğiniz dosyayı seçebilirsiniz. Bir dosyanın üstüne tıklayarak içeriğini Debugger'ın orta bölümünde görüntüleyebilirsiniz.

- -

- -

Kaynak Kodu

- -

Kodun çalışmasını durdurmak istediğiniz yere breakpoint atayabilirsiniz. Görseldeki kodun 18 numaralı satırının vurgulanması bu satıra bir breakpoint atandığını göstermektedir.

- -

- -

Watch expression'ları ve breakpoint'ler

- -

Sağdaki bölmede eklediğiniz watch expression'ların ve atadığınız breakpoint'lerin listesini görebilirsiniz.

- -

Görseldeki ilk kısım, Watch expression, listItems adlı bir değişkenin eklendiğini gösteriyor. Listeyi genişleterek dizinin içindeki değerlere göz atabilirsiniz.

- -

Bir sonraki kısım , Breakpoints, sayfaya atanmış breakpoint'leri listelemekte. Örnekteki example.js dosyasında listItems.push(inputNewItem.value); adlı ifadeye bir breakpoint atandığını görüyoruz.

- -

Son iki kısım sadece kod çalışıyorken görünmektedirler.

- -

Call stack kısmı o anki satıra kadar çalışmış olan kodu göstermektedir. Örnekte kodun fare tıklamasını ele alan bir fonksiyon içinde olduğunu ve o an bir breakpoint'te beklediğini görebilirsiniz.

- -

Son kısım, Scopes, kodun farklı noktalarından hangi değerlerin görünür durumda olduğunu gösterir. Mesela, aşağıdaki resimde addItemClick fonksiyonun kodu için mevcut durumda kullanılabilecek nesneleri görebilirsiniz.

- -

- -

Daha fazlası için

- -

Farklı tarayıcıların JavaScript debugger'larını keşfedin:

- - - -

JavaScript konsolu

- -

JavaScript konsolu, düzgün çalışmayan JavaScript kodlarınının debug edilmesi için harika bir araçtır. JavaScript konsolu yüklenmiş durumdaki sayfada JavaScript kodu çalıştırabilmenizi ve oluşan hataları görebilmenizi sağlar. Bu konsola ulaşabilmek:

- -

Eğer geliştirici araçları açık durumda ise Console sekmesine tıklayın.

- -

Diğer durumlarda Firefox  Ctrl + Shift + K tuşları ile JavaScript konsolunu açabilmenize imkan tanır. Bir diğer yöntem ise menü komutlarını kullanmak: Menu  ➤ Web Developer ➤ Web Console, ya da Tools ➤ Web Developer ➤ Web Console. Diğer tarayıcılarda JavaScript konsoluna ulaşmak için önce geliştirici araçlarını açıp sonra Console sekmesine tıklayabilirsiniz.

- -

Bu yöntemlerin sonucun görseldekine benzer bir pencere göreceksiniz:

- -

- -

Konsolun ne yapabildiğini görmek için örnekteki kod parçacıklarını konsolunuzda teker teker deneyin:

- -
    -
  1. - 
    alert('hello!');
    -
    2. -
  2. - 
    document.querySelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var myImage = document.createElement('img');
-myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
-document.querySelector('h1').appendChild(myImage);
    -
    4. -
- -

Şimdi de kodların hatalı örneklerini deneyin ve neler elde edeceğinizi görün.

- -
    -
  1. - 
    alert('hello!);
    -
    2. -
  2. - 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var myImage = document.createElement('img');
-myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
-document.querySelector('h1').appendChild(myImage);
    -
    4. -
- -

Tarayıcınız hata döndürmeye başladığını göreceksiniz. Bu hatalar çoğu zaman çok açık ifadeler döndürmeselerde elinizdeki problemleri çözmek için yeterli olacaklardır.

- -

Daha fazlası için

- -

Farklı tarayıcıların JavaScript konsollarını keşfedin:

- - - -

Ayrıca bakınız

- - diff --git a/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html deleted file mode 100644 index da23bd22ef..0000000000 --- a/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html +++ /dev/null @@ -1,325 +0,0 @@ ---- -title: Arka planlar ve kenarlıklar -slug: Learn/CSS/Building_blocks/Backgrounds_and_borders -tags: - - Arka Plan - - Background - - Başlangıç - - Beginner - - CSS - - Eğitim - - Image - - Kenarlık - - Konum - - Learn - - Position - - Renk - - Resim - - borders - - color -translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders -original_slug: Öğren/CSS/CSS_yapi_taslari/Backgrounds_and_borders ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
- -

Bu derste, CSS arka planları ve kenarlıkları ile yapabileceğin bazı yapıcı şeylere bir göz atacağız. Degradeler, arka plan resimleri ve yuvarlatılmış köşeler eklemek gibi bir çok tasarımı oluşturabilmek için arka planlar ve kenarlıklar birçok seçenek sunacaktır.

- - - - - - - - - - - - -
Ö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ç:Kutuların arka planını ve kenarlığını nasıl biçimlendireceğini öğrenmek.
- -

CSS'de arka planların stilini ayarlama

- -

CSS'deki {{cssxref("background")}} niteliği, bu derste karşılaşacağın birçok arka planla ilişkili niteliğin kısaltmasıdır. Bir stil sayfasında karmaşık bir arka plan niteliğine aşağıdaki gibi birçok değerin aktrıldığını görürsen, sonradan okunması ve anlaşılmasının ne kadar zor olduğunu da farkedersin.

- -
.box {
-  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
-  url(big-star.png) center no-repeat, rebeccapurple;
-} 
-
- -

Bu eğitim setinde daha sonra kısa tanımın nasıl çalıştığına döneceğiz, ancak önce bireysel arka plan özelliklerine bakarak CSS'de arka planlarla yapabileceğin farklı tasarım özelliklerine bir göz atalım.

- -

Arka plan renkleri

- -

CSS {{cssxref("background-color")}} niteliğiyle herhangi bir öğeye arka plan rengini tanımlarız. Nitelik geçerli olan her <color> değerini kabul eder. background-color, öğenin içeriğinin ve dolgusunun altını boyar.

- -

Aşağıdaki örnekte, kutuya bir arka plan rengi, bir başlık ve bir {{htmlelement("span")}} öğelerine çeşitli renk değerleri ekledik.

- -

Geçerli olan <color> değerlerini kullanarak bunlarla oynayın.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

- -

Arka plan resimleri

- -

{{cssxref("background-image")}} niteliği öğenin arka planında bir resmin görüntülenmesini istediğimizde kullanırız. Aşağıdaki örnekte, iki kutumuz var — biri kutudan daha büyük bir arka plan resmine, diğerinde küçük bir yıldız resmi var.

- -

Bu örnek, arka plan resimleri hakkında iki şeyi gösterir. Varsayılan olarak, büyük görüntü kutuya sığacak şekilde küçültülmez, bu nedenle sadece küçük bir köşesini görürüz, küçük görüntü ise kutuyu dolduracak şekilde döşenir. Bu durumda, gerçek görüntü sadece tek bir yıldızdır.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

- -

Bir arka plan görüntüsüne ek olarak bir arka plan rengi belirlesen, görüntü rengin üstünde görüntülenir. Yukarıdaki örnekte background-color niteliğine renk bildiriminde bulun.

- -

Arka plan tekrarını kontrol etme

- -

{{cssxref("background-repeat")}} niteliği; görüntünün boyutu, kutunun içerik alanından küçük olması durumunda, görüntüyü kutu içerik alanına doldurmak için yatay ve dikey olarak tekrarını kontrol etmemizi sağlar. Mevcut değerler şunlardır:

- -
    -
  • no-repeat — arka planın tekrarlanmasını durdur.
    • -
  • repeat-x — yatay olarak tekrarla.
    • -
  • repeat-y — dikey olarak tekrarla.
    • -
  • repeat — varsayılan değer; her iki yönde de tekrarlayın.
    • -
- -

Bu değerleri aşağıdaki örnekte deneyin. Biz değerini no-repeat olarak ayarladık, bu yüzden bir tane yıldız göreceksin. Ama diğer etkilerin neler olduğunu görebilmek için diğer değerleri de dene.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

- -

Arka plan resmini boyutlandırma

- -

Yukarıdaki örnekte; görüntülenmek istenilen resmin boyutu, öğenin boyutundan daha büyük olduğu için kırpılan bir görüntümüz var. Bu durumda, görüntüyü arka plana sığacak şekilde boyutlandırmak için uzunluk veya yüzde değeri alabilen {{cssxref("background-size")}} niteliğini kullanabiliriz.

- -

Ayrıca anahtar kelimeleri de kullanabiliriz:

- -
    -
  • cover — tarayıcı, resmi en boy oranını korurken kutu alanını tamamen kaplaycak şekilde boyutlandırır. Bu durumda, görüntünün bir kısmı muhtemelen kutunun dışında kalacaktır.
    • -
  • contain — tarayıcı, resmi kutunun içine sığacak şekilde boyutlandıracaktır. Bu durumda, görüntünün en boy oranı kutununkinden farklıysa görüntünün iki yanında veya üstünde ve altında boşluklar oluşabilir.
    • -
- -

Aşağıdaki örnekte, yukarıdaki örnekten daha büyük bir resim kullandım ve kutunun içinde boyutlandırmak için uzunluk birimlerini kullandım. Bunun görüntüyü bozduğunu görebilirsin.

- -

Uygula.

- -
    -
  • Arka planın boyutunu değiştirmek için kullanılan uzunluk birimlerini değiştir.
    • -
  • Uzunluk birimlerini sil ve  background-size: cover veya background-size: contain tanımlamalarını yap.
    • -
  • Resmin görüntülemek istediğin kutudan küçükse, görüntüyü tekrarlamak için background-repeat niteliğinin değerini değiştir.
    • -
- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

- -

Arka plan resmini konumlandırma

- -

{{cssxref("background-position")}} niteliği, arka plan görüntüsünün uygulandığı kutuya göre görüntülendiği konumu seçmemize yarar. Bu, kutunun sol üst köşesinden başlayan ve kutunun yatay (x) ve dikey (y) eksenler boyunca konumlandırıldığı bir koordinat sistemi kullanır.

- -
-

Note: Varsayılan olarak background-position'ın başlangıç değeri(0,0) dır.

-
- -

background-position yatay ve dikey olarak iki ayrı değer alır.

- -

top ve right gibi anahtar kelimeler kullanabilirsin(alabildiği tüm değerleri görmek için {{cssxref("background-position")}} sayfasına bak):

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-} 
-
- -

Uzunluk ve yüzdeler:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: 20px 10%;
-} 
-
- -

Anahtar kelimeleri uzunluklar veya yüzdelerle de karıştırabilirsin:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px;
-}
- -

Son olarak, kutunun belli bir konumundan bir mesafeyi belirtmek için 4 değerli bir sözdizimi de kullanabilirsin — bu durumda uzunluk birimi, ondan önceki değerden bir sapmadır. Dolayısıyla, aşağıdaki CSS'de arka planı üstten 20piksel ve sağdan 10piksel sapmayla konumlandırıyoruz:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px right 10px;
-}
- -

Bu değerlerle oynamak ve yıldızı kutunun içinde hareket ettirmek için aşağıdaki örneği kullanın..

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

- -
-

Note: background-position is a shorthand for {{cssxref("background-position-x")}} and {{cssxref("background-position-y")}}, which allow you to set the different axis position values individually.

-
- -

Degrade arka planlar

- -

Bir gradyan — bir arka plan için kullanıldığında — tıpkı bir görüntü gibi davranır ve ayrıca  {{cssxref("background-image")}} niteliği kullanılarak tanımlanır.

- -

<gradient>  veri türü için MDN sayfasında farklı gradyan türleri ve bunlara yapabilceğin şeyler hakkında daha fazla bilgi edinebilirsin. Gradyanlarla oynamanın öğlenceli bir yolu, bağlantıdaki gibi web'de birçok CSS Gradyan oluşturucudan birini kullanmaktır.bir degrade oluşturabilir ve ardından onu oluşturan kaynak kodunu kopyalayıp projende kullanabilirsin.

- -

Aşağıdaki örnekte farklı renk geçişlerini deneyin. Sırasıyla ilk kutuda tüm kutu boyunca gerilmiş doğrusal bir gradyan ve diğer kutuda tekrarlayan belirli bir boyuta sahip radyal bir gradyan var.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

- -

Birden çok arka plan görüntüsü

- -

Birden çok arka plan görüntüsüne sahip olmak da mümkündür — background-image niteliğinde her birini virgülle ayırarak tek bir komutla birden çok değeri belirtebilirsin.

- -

Bunun yaptığında, birbiriyle örtüşen arka plan görüntüleriyle karşılabilirsin. Arka planlar, yığının altında en son listelenen arka plan görüntüsüyle katmanlanır ve önceki her görüntü, kodda onu izleyen görüntünün üstüne yığılır.

- -
-

Not: Degradeler, normal arka plan görüntüleriyle uyumlu bir şekilde karıştırılabilir

-
- -

Diğer background-* nitelikleride background-image gibi virgülle ayrılmış değerlere sahip olabilirler:

- -
background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);
-background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px,  top right;
- -

Farklı özelliklerin her bir değeri, diğer özelliklerdeki aynı konumdaki değerlele eşleşecektir. Örneğin yukarıdaki image1'in background-repeat değeri no-repeat olacaktır. Ancak, farklı özelliklerin farklı sayıda değeri olduğunda ne olur? Cevap, daha az sayıdaki değerin döneceğidir — yukarıdaki örnekte dört arka plan görüntüsü vardır, ancak yalnızca iki background-position değeri vardır. İlk iki konum değeri ilk iki resme uygulancak, ardından tekrar geri dönecek — image3'e ilk konum değeri image4'de de ikinci konum değeri verilecektir.

- -

Hadi oynayalım. Aşağıdaki örneğe iki resim ekledim. Yığınlama sırasını göstermek için, listede hangi arka plan görüntüsünün ilk sırada olduğunu değiştirmeyi deneyin veya konumu, boyutu veya tekrarlama değerleri üzerinde oynamalar yapmayı dene.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

- -

Arka plan sabitleme

- -

Arka planlar için kullanabileceğimiz başka bir seçenek de, öğenin içeriğinin kaydırıldığında arka planın nasıl davranacağını belirlemektir. Bu davranışa imkan tanıyan {{cssxref("background-attachment")}} niteliği aşağıdaki belirtilen değerler kullanılarak kontrol edilir.

- -
    -
  • scroll: Arka plan tanımlandığı öğeye değilde, sayfaya sabitlenir. Bu yüzden sayfa kaydırılırsa hareket eder. Öğenin içeriğinin kaydırılması arka planın hareket etmesini sağlamaz.
    • -
  • fixed: Bir öğenin arka planının, sayfa veya öğe içeriği kaydırıldığında kaymaması için görünüm alanına sabitlenmesine neden olur. Ekrandaki arka plan daima aynı konumda kalacaktır.
    • -
  • local: Bu değer daha sonra eklendi(Yanlızca Internet Explorer 9+'da desteklenir. Diğerleri IE4+'da desteklenir). Çünkü scroll değeri oldukça kafa karıştırıcıdır ve çoğu durumda istediğini yapmayabilir. local değeri tanımlandığı öğeye sabitlenir ve öğenin içeriği kaydırıldığında(kutu içerisinde veya sayfayla birlikte) içerikle birlikte arka planda hareket eder.
    • -
- -

{{cssxref("background-attachment")}} niteliğine tanımlanabilecek bu üç değerin aralarındaki farkları görebilmen için size örnek bir sayfa dım — background-attachment.html (ayrıca kaynak koduda burada).

- -

Arka plan tanımı için kısatanım kullanımı

- -

Bu dersin başında bahsettiğim gibi, genellikle {{cssxref("background")}} niteliği kullanılarak belirtilen arka planları göreceksin. Bu kısatanım, tüm farklı özellikleri aynı anda ayarlamana olanak tanır.

- -

Birden çok arka plan kullanıyorsan, ilk arka plan için tüm özellikleri belirlemen ve virgülle ayırdıktan sonra, sonraki arka planını eklemen gerekir ve/veya nekadar arka plan koyacaksan o kadar bunu tekrarlamalısın. Aşağıdaki örnekte bir boyut ve konuma sahip bir gradyan, ardından no-repeat değerine sahip bir görüntü ve en altta bir renk var.

- -

Arka plan kısatanım değerlerini yazarken uyulması gereken birkaç kural vardır, örneğin

- -
    -
  • background-color, yalnızca son virgülden sonra tanımlanabilir. İlk belirtilen konum en üstte blunur.
    • -
  • -

    background-size değeri, sadece background-position değerinden sonra '/' karakteriyle ayırarak tanımlanabilir.

    -
    • -
- -

{{cssxref("background")}} tüm detaylarını görebilmek için MDN sayfasına bir göz atın.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

- -

Arka planla erişilebilirlikle ilgili hususlar

- -

Bir arka plan görüntüsünün veya renginin üzerine metin yerleştirirken, metnin ziyaretçilerin için okunaklı olması için yeterli kontrastı sağladığına dikkat etmelisin. Ayrıca bir resim kullanmak istiyorsan, metin de bu resmin üstüne yerleştirilecekse ve resim yüklenemezse metininin okunaklı olmasını sağlayacak bir de background-color tanımlamalısın.

- -

Ekran okuyucular arka plan görüntülerini ayrıştıramaz, bu nedenle tamamen dekorasyon amaçlı olmalıdır; içeriğindeki önemli tüm içerikler HTML sayfasının bir parçası olmalı ve arka planda oluşturulmamalıdır.

- -

Kenarlıklar

- -

Kutu Modeli hakkında bilgi edinirken, kenarların kutumuzun boyutunu nasıl etkilediğini öğrenmiştik. Bu derste kenarlıkları kreatif bir şekilde nasıl kullanacağımıza bakacağız. Tipik olarak, CSS ile bir öğeye kenarlıklar eklediğimizde, kenarlığın rengini, genişliğini ve stilini bir CSS satırında tanımlayan kısatanım özelliğini kullanırız.

- -

Aşağıdaki {{cssxref("border")}} ile bir kutunun dört kenarı için kenarlık belirleyebiliriz.

- -
.box {
-  border: 1px solid black;
-}
- -

Veya kutunun bir kenarını hedefleyebiliriz, örneğin:

- -
.box {
-  border-top: 1px solid black;
-}
- -

Bu kısatanımların bireysel nitelikleride böyle olacaktır:

- -
.box {
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-}
- -

Ve daha detaylı tanımlama için:

- -
.box {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: black;
-}
- -
-

Not: Bu üst, sağ, alt ve sol kenarlık nitelikleri, belgenin yazma moduyla eşleştirilmiş olan mantıksal niteliklere de sahiptir. (Örn. Soldan sağa, sağdan sola veya yukarıdan aşağıya). Bunları, farklı metin yönleri'ni ele alan bir sonraki derste işleyeceğiz.

-
- -

Kenarlıklar için kullanabileceğin çeşitli stiller vardır. Aşağıdaki örnekte kutunun dört kenarı için farklı bir kenarlık stili kullandık. Kenarlıkların nasıl çalıştığını görmek için kenarlık stilini, genişliğini ve rengini değiştirin.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

- -

Yuvarlatılmış köşeler

- -

{{cssxref("border-radius")}}, yuvarlatılmış köşelere sahip kutular oluşturabilmek için bir seferde tüm köşelere tanımlama yapabilmek için kullanırız. Ayrıca ayrı ayrı köşelere detaylı bir tanımlama yapmak için kullanabileceğimiz daha farklı niteliklerde mevcuttur. Niteliklere değer olarak verebileceğimiz bir iki yöntememiz vardır. İlk yöntem; bir değer olarak iki adet uzunluk veya yüzde değeri girebiliriz, birinci değer yatay yarıçapını ve ikinci değeri ise dikey yarıçapını tanımlar. Çoğu durumda kullanacağımız diğer yöntem ise; her iki yarıçap için de kullanılacak tek bir değer girebiliriz.

- -

Örneğin, bir kutunun dört köşesinin de 10 piksellik bir yarıçapa sahip olmasını sağlamak için:

- -
.box {
-  border-radius: 10px;
-}
- -

Veya sağ üst köşenin yatay yarıçapı 1em ve dikey yarıçapı %10 olmasını sağlamak için:

- -
.box {
-  border-top-right-radius: 1em 10%;
-}
- -

Aşağıdaki örnekte dört köşeyi de ayarladım ve ardından farklı kılmak için sağ üst köşenin değerlerini değiştirdim. Köşeleri değiştirmek için değerlerle oynayabilirsin. {{cssxref("border-radius")}}'un kullanılabilir söz dizimleri hakkında daha fazla bilgi sahibi olabilmek için MDN sayfasına bakabilirsin.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

- -

Beçerilerini test et!

- -

Bu derste çok şey ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devem etmeden önce bu bilgileri iyi öğrendiğini doğrulamak için bazı tesler hazırladım — Becerilerini test edin: Arka Planlar ve Kenarlıklar.

- -

Özet

- -

Burada pek çok konuya değindik. Bir kutuya arka plan ve kanerlık eklemenin karmaşık olduğunu düşünebilirsin. Anlattımğım niteliklerden herhangi biri hakkında daha fazla bilgi sahibi olmak istiyorsan, farklı referans sayfalarını incele. MDN'deki her sayfada, kendini test etmen ve bilgini geliştimen için kullanabileceğin oldukça fazla kullanım örneği vardır.

- -

Bir sonraki derste, belgelerinin Yazma Modunun CSS'inle nasıl etkileşime girdiğini öğreneceğiz. Metin soldan sağa akmadığında ne olur? 

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index b5b9796991..0000000000 --- a/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: Kaynak sırası ve miras -slug: Learn/CSS/Building_blocks/Cascade_and_inheritance -tags: - - Acemi - - Art arda - - Beginner - - CSS - - Cascade - - Inheritance - - Learn - - Miras - - Oğitim - - kaynak siparişi - - kurallar - - ozgüllük - - rules - - source order - - specificity -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -original_slug: Öğren/CSS/CSS_yapi_taslari/Cascade_and_inheritance ---- -
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
- -

Bu dersin amacı, CSS'nin HTML'ye nasıl uygulandığına ve çakışmaların nasıl çözüldüğünü kontrol eden en temel kavranlar olan  art arda denetim, özgüllük ve kalıtım hakkındaki bilgilerini geliştirmektir.

- -

Bu ders üzerinde çalışmak, kursun diğer bazı bölümlerine göre daha az alaklı ve biraz daha akademik görünse de, bunları anlaman daha sonra karşılaşacağın sorunları daha kolay çözmeni sağlayacaktır! Bu bölümü dikkatlice çalışmanı ve dersi bitirmeden önce kavramları anladığını kontrol etmeni öneririm.

- - - - - - - - - - - - -
Ö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ç:ardarda denetim ve özgüllük hakkında bilgi edinmek ve CSS'de kalıtımın nasıl çalıştığını öğrenmek.
- -

Çakışan kurallar

- -

CSS, Basamaklı Stil Sayfaları anlamına gelir ve basamaklandırmanın(art arda denetimin) anlaşılması inanılmaz derecede önemlidir. Art arda denetimin davranış şekli, CSS'i anlamanın anahtarıdır.

- -

Bir gün, bir proje üzerinde çalışıyor olacaksın ve bir öğeye uygulanması gerektiğini düşündüğün CSS'in çalışmadığını göreceksin. Genellikle sorun, potansiyel olarak aynı öğeye uygulanabilecek iki kural oluşturmuş olmandır. Art arda Denetim ve özgüllük denetim mekanizmaları bu tür bir etkileşim olduğu zaman bir kuralın geçerli olmasını sağlar. Öğenin stilini belirleyen kuralın sonucu beklediğin olmayabilir, bu nedenle bu mekanizmaların nasıl çalıştığını anlaman gerekir.

- -

Burada ayrıca önemli olan kalıtım kavramıdır; bu, varsayılan olarak bazı CSS özelliklerinin mevcut öğenin ebeveynlerinin sahip olduğu değerlerin bazılarını devraldığı anlamına gelir. Bu, beklemediğin bazı davranışlara neden olabilir.

- -

Anlattığım temel konulara hızlıca bir göz atarak başlayalım, ardından sırayla her birine bakıp birbirleriyle ve CSS'le nasıl etkileşim kurduklarını görelim. Bu, anlaşılması zor bir ders gibi gelebilir.

- -

Art arda denetim

- -

Stil sayfaları basamaklıdır — çok basit bir şekilde bu, CSS kurallarının sırasının önemli olduğu anlamına gelir; eşit özgüllüğe sahip olan iki kural uygulandığında, CSS en son gelen kural kullanılacaktır.

- -

Aşağıdaki örnekte, h1 seçicisini kullandığım iki adet kuralım var. CSS'de yazılan bu kurallar aynı seçici olması ve aynı özgülleğe sahip olduklarından mavi(blue) olan kırmızı(red)'dan sonra geldiği için bu yarışı kazanır.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

- -

Şöyle özetlemek gerekirse: CSS stil sayfasını ilk yorumlamaya başladığında stil sayfamızı adım adım okumaya başlar. İlk önce 1. satırda belirtilen h1 etiketimizi seçip color niteliğini 2. satırda belirtiğimiz  kırmızı(red) olarak tanımlar ve dosyamızı okumaya devam eder. 3. satırdaki }  süstlü parantezle birlikte  h1 öğemizle ilgili tamınlamayı bitir. Tekrardan 4. satırdaki h1 öğesinin  color niteliğini 5. satırdaki mavi(blue) olarak tanımlar. CSS stil sayfamızın sonuna geldiğinde etiketteki nitelik değerlerini HTML sayfamızdaki öpelere uygulamaya başlar. h1 öğesinin color değişkeninde en son atanan değer mavi(blue) olduğu için HTML sayfamızdaki h1 öğemizin renk değeri mavi olur.

- -

Bir sonraki kısımda CSS'in öğelerimizin nitelik değerlerine atama yaparken göz önünde bulunan diğer bir kritere değineceğiz.

- -

Özgüllük

- -

Özgüllük; Birden çok kuralın farklı seçicileri varsa, yinede aynı öğeye işaret ediyorsa tarayıcının hangi kuralın uygulanacağına karar vermesidir. Temelde, bir seçicinin seçiminin ne kadar özgül olacağının bir ölçüsüdür:

- -
    -
  • öğe seçici daha az belirsizdir — HTML sayfasında bulunan kendi türündeki tüm öğeleri seçer — bu yüzden daha düşük puan alır.
    • -
  • Sınıf seçici daha belirgindir — sadece HTML sayfasındaki class nitelik değerine sahip öğeleri seçer — bu yüzden daha yüksek puan alır.
    • -
- -

Örnek zamanı! Aşağıda .main-heading sınıfına dahil <h1> etiketi seçicimiz  var. CSS sayfamızdaki kurallar uygulanırken sınıf seçicinin özgüllüğü daha yüksek olduğu için öğe seçicimiz sınıf seçicimizden daha sonra gelmiş olmasına rağmen HMTL öğemize uygulanmaz. Bu sefer yarışı sınıf seçicimiz kazanır ve içeriğimiz kırmızı görünür.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

- -

Bunuda şöyle özetlemek gerekirse: CSS stil sayfamızı yorumlamaya başladığında sayfamızı adım adım okumaya başlar. İlk önce .main-heading sınıfımızın color niteliğini kırmızı olarak tanımlar. Sonraki adımlarda h1 öğemizin color nitelik değerini de mavi olarak tanımlar. Sayfamızın sonuna geldiğinde toplamış olduğu verileri HTML sayfamızdaki öğelere uygularken öğelerimizin tanımlarına bakarak ilerler.  Sayfadaki tüm h1 öğeleri renk tanımlarını blue olarak tanımlayacaktır fakat bizim HTML sayfamızda sadece tek bir h1 öğesi olduğundan ve oda bir sınıfa dahil olduğu için, dahil olduğa sınıfa ait bir CSS kuralı olup olmadığına bakar. Eğer sınıfa ait bir kural varsa bu kuralı uygular yoksa öğe etiketi için tanımlamış olduğu kuralı uygular. CSS sayfamızda öğe seçici kuralı, sınıf seçici kuralından sonra gelmiş olsa bile özgüllük sınavını geçemez.

- -

Özgüllük puanlamasını ve diğer benzer nitelikleri daha sonra açıklayacağız.

- -

Miras

- -

Üst öğelere uygulanan CSS stillerin bir kısmı alt öğeler tarafından miras olarak alınır.

- -

Örneğin, color ve font-family niteliklerini bir öğeye ayarlarsan ve öğenin alt öğeleri doğrudan farklı bir renk ve yazı tipi değeri tanımlamazsan, nitelik verilen öğenin içinde bulunan tüm öğelerin renk ve yazı tipi üst öğenin tanımlandığı şekilde şekillendirilecektir.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

- -

Bazı özellikler miras olarak alınmaz  — Örneğin; {{cssxref("width")}} niteliğini %50 olarak ayarlarsan, tüm alt öğelerin genişlikleri üst öğelerin genişliğinin %50'si olacak şekilde tanımlanmaz. Durum bu şekilde olsaydı CSS'in kullanılması sinir bozucu olurdu!

- -
-

Not: MDN CSS nitelikleri referans sayfalarında, nitelikler bölümünün altında, niteliğin miras alıp almadığıda dahil olmak üzere bir dizi veri noktasının listelendiği teknik bilgi tablosunu bulabilirsin. Renk özelliği ayrıntıları, bölümüne bakın.

-
- -

Kavramların birlikte nasıl çalıştığını anlamak

- -

Bu üç kavram (art arda denetim, özgüllük ve miras) birlikte hangi CSS'in hangi öğelere uygulanacağını kontrol eder; aşağıdaki bölümlerde birlikte nasıl çalıştıklarını göreceğiz. Biraz karmaşık görünebilir, Ancak CSS ile daha deneyimli hale geldikçe bunları hatırlamaya başlayacaksın ve unutursan her zaman buradaki ayrıntılara bakabilirsin! Deneyimli geliştiriciler bile tüm tedayları hatırlamıyor.

- -

Aşağıdaki video, bir sayfanın art arda kontrol, özgüllüğü ve daha fazlasını incelemek için Firefox Geliştirici Araçlarını nasıl kullanabileceğini gösterir:

- -

{{EmbedYouTube("Sp9ZfSvpf7A")}}

- -

Mirası anlamak

- -

Mirasla başlayacağız. Aşağıdaki örnekte , İki seviyeli sırasız listemiz bulunmakta {{HTMLElement("ul")}}. Dış taraftaki ul öğemize bir sınır, dolgu ve yazı tipi rengi verdik.

- -

Renk doğrudan çocuklara da uygulandı, aynı zamanda dolaylı çocuklara(torunlara) da uygulandı <li>. Daha sonra ikinci listemizi special sınıfını ekledik ve ona farklı bir renk uyguladık. Bu sınıftaki değerlerde ikicinci listemizin çocukları tarafından miras alındı.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

- -

Genişlikler(yukarıda belirtildiği gibi), kenar boşlukları, dolgu ve sınırlar miras olarak alınmaz. Bir sınır, listemizin çocukları tarafından miras alınacak olsaydı, her liste öğesi bir sınır kazanırdı — muhtemelen istediğimiz bir etki değil!

- -

Hangi özellikler varsayılan olarak miras alınıp alınmadı büyük ölçüde sağduyuya bağlıdır.

- -

Mirası kontrol etmek

- -

CSS, mirası kontrol etmek için dört özel evrensel nitelik değeri sağlar. Her CSS niteliği bu değerleri kabul eder.

- -
-
{{cssxref("inherit")}}
-
Seçilen öğe niteliğinin miras alıp alamadığına bakılmaksızın, ebeveyninden miras alması sağlanır.
-
{{cssxref("initial")}}
-
Niteliğe tanımlanmış tüm kurallar yok sayılır ve tüm miraslar engellenilerek başlangıç değerine ayarlanır(sıfırlarnır. Varsayılan değerler de kullanılmaz).
-
{{cssxref("unset")}}
-
Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerinin sıfırlanmasını sağlar. Miras alabilen nitelikler için {{cssxref("inherit")}} gibi, alamayan nitelikler için {{cssxref("initial")}} gibi davranır.
-
{{cssxref("revert")}}
-
Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerin tarayıcının veya kullanıcının varsayılan stil sayfasında belirtilmiş varsayılan değerin tanımlanmasını sağlar.
-
- -
-

Not: Bunların nasıl çalıştıkları hakkında daha fazla bilgi için {{SectionOnPage("/tr/docs/Web/CSS/Cascade", "CSS Kökeni bildirisi")}}'ne bak.

-
- -

Bir bağlantı listesine bakabilir ve evrensel değerlerin nasıl çalıştığını keşfedebilirsin. Aşağıdaki etkileşimli örnek, CSS ile oynamana ve değişiklik yaptığında ne olacağını görmene onlanak tanır. Kodla oynamak HTML ve CSS ile başa çıkmanın en iyi yoludur.

- -

Örnek:

- -
    -
  1. İkinci liste öğesine  my-class-1 sınıfı uygulanmıştır. Bu sınıf  <a> öğesinin rengini miras alacak şekilde ayarlar. Kuralı kaldırdığında bağlantı rengi nasıl gözükür?
    2. -
  2. Üçüncü ve dördüncü halkaların neden oldukları renk değişimlerini anlıyor musun? Eğer anlamadıysan yukarıdaki açıklamayı yeniden gözden geçir.
    3. -
  3. <a>  öğesinin yeni bir renk tanımlarsan hangi öğelerin rengi değişir. Örnek a { color: red; }?
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

- -

Tüm öğelerin değerlerini sıfırlama

- -

CSS'in all niteliği, öğelerin mirası kontrol eden değerlerini öğenin tüm niteliklerine uygulamak için kullanılır. Bu miras kontrol değerlerinin herhangi biri için kullanılabilir(inherit, initial, unset veya revert). Yeni tanımlara başlamadan önce bilinen bir başlangıç noktasına geri dönebilmen için stillerde yapılan değişiklikleri geri almanın uygun bir yoludur.

- -

Aşağıdaki örnekte iki adet alıntı bloğu var(blockquote). CSS sayfamızda alıntı bloğuna uygulanan bir stilimiz var ve sınıf tanımımızda da öğelerin tüm niteliklerindeki miras kontrol değerini tek seferde unset değerini atayan bir bildirimimiz var:  all: unset.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

- -

 all niteliğine mevcut diğer değerleri atayıp farkın neler olduğunu gözlemle.

- -

Ardarda kontrolü anlamak

- -

HTML yapısının derinliklerine yerleştirilmiş bir paragrafın, gövdeye uygulanan bir CSS ile neden aynı renk olduğunu şimdi anlıyoruz. Ayrıca belgenin herhangi bir noktasında bir öğeye uygulanan CSS'i nasıl değiştirebileceğimizi de biliyoruz. Şimdi, birden fazla seçicinin bir öğeye stil uyguladığında, art arda kontrolün hangi CSS kuralının geçerli olduğunu nasıl tanımladığına düzgün bir şekilde bakacağız.

- -

Burada önem sırasına göre sıralanan, dikkate alınması gereken üç etken vardır. Sonraki bir öncekini geçersiz kılar:

- -
    -
  1. Kaynak sırası
    2. -
  2. Özgüllük
    3. -
  3. Önem
    4. -
- -

Tarayıcıların tam olarak hangi CSS'in uygulanması gerektiğini nasıl anladığını görmek için bunları irdeliyeceğiz.

- -

Art arda denetim

- -

Art arda denetim için kaynak sırasının ne kadar önemli olduğunu zaten görmüştük. Tam olarak aynı ağırlığa sahip birden fazla kuralın varsa, en son gelen kural dikkate alınır. Bunu öğeleri biçimlendirilme aşaması anına, en yakın olan kuralın kazandığı bir eleme olarak düşünebilirsin. Kaynak sırasındaki seçicilerin hedef kitlesi geneldir, HTML sayfasında seçicinin belirttiği bütün öğeleri seçer.

- -

Özgüllük

- -

Kaynak sırasının önemli olduğu gerçeğini anladık; fakat bir öğenin stili için yapmış olduğun kuralın, stil sayfandaki kaynak sırasında sonda olmasına rağmen ondan bir veya daha önceki kuraldan etkilendiğini göreceksin. Bunun nedeni, önceki kuralın daha yüksek özgüllüğe sahip olmasıdır — hangi kuralın özgüllüğü daha yüksek ise, tarayayıcı öğeleri şekillendirecek kural olarak onu seçer. Çünkü özgüllüğü yüksek olan seçiciler(class, id vb.) HTML sayfasında bulunan bütün elamanları değilde tanımlandıkları öğenin/öğelerin üzerinde etkili olduklarından hedefleri daha belirgindir. Ayrıca eşit özgüllüğe sahip seçiciler kendi aralarında kaynak sırasına tabidir.

- -

Bu derste daha önce gördüğümüz gibi, sınıf seçicinin  ağırlığı öğe seçiciden daha fazladır, bu nedenle sınıfta tanımlanan özellikler öğeye doğrudan uygulanan şekillleri geçersiz kılar.

- -

Burada dikkat edilmesi gereken şey, öğeye uygulanan kurallardaki tüm nitelikleri değilde sadece aynı nitelik üzerinde tanımlanmış kuralları etkilemesidir. Örneğin ilk kuralda renk ve font tanımı olsun, özgüllüğü yüksek veya sonra gelen kuralda sadece renk tanımı varsa bir önceki veya düşük özgülleğe sahip kuraldaki font tanımını etkilemez.

- -

Bu davranış, CSS'de tekrarı önlemeye yardımcı olur. Yaygın bir uygulama, temel öğeler için genel stilleri tanımlamak ve ardından farklı olanlar için sınıflar oluşturmaktır. Örneğin; aşağıdaki stil sayfasında 2. seviye başlıklar için genel stilleri tanımladık ve sonra sadece bazı özellikleri ve değerleri değiştiren bazı sınıflar oluşturduk. Başlangıçta tanımlanan değerler tüm başlıklara uygulanır, daha sonra sınıflarla birlikte başlıklara daha karakteristik değerler uygulanır.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

- -

Şimdi tarayıcının özgüllüğü nasıl hesaplayacağına bir göz atalım. Bir öğe seçicinin düşük özgüllüğe sahip olduğunu ve bir sınıf tarafından üzerine yazılabileceğini zaten biliyoruz. Esasen bu seçicilere verilen puan cinsinden bir değerdir, farklı türdeki seçicilere ait puanlarını toplamak bize söz konusu seçicinin özgüllük değerini verir ve bu da diğer kuralların sahip oldukları puan ile karşılaştırılır.

- -

Bir seçicinin sahip olduğu özgüllük miktarı dört farklı değer (veya bileşen) kullanılarak ölçülür, bunlar binler basamağı, yüzler basamağı, onlar basamağı ve birler basamağı olarak düşünülebilir.

- -
    -
  1. Binler basamağı: Bir bildirim HTML içerisinde tanımlarken {{htmlattrxref("style")}} niteliğiyle şekillendiriliyorsa bu sütuna bir puan eklenir. Bu tür bildirimlerin seçicileri yoktur, bu nedenle özgüllükleri her zaman 1000'dir.
    2. -
  2. Yüzler basamağı: Öğeye tanımlanmış bir kimlik için seçici (id) varsa, bu sütuna bir puan eklenir.
    3. -
  3. Onlar Basamağı: Her bir sınıf(class), öznitelik veya genel seçicide bulunan sözde sınıf için bu sütuna bir puan eklenir.
    4. -
  4. Birler: Genel seçici içinde bulunan her bir öğe veya sözde öğe için bu sütunda bir puan eklenir.
    5. -
- -
-

Not: Evrensel seçici (*), birleştirici seçiciler (+, >, ~, ' '), ve olumsuzluk ifadesi sözde sınıfının (:not) özgüllük üzerinde herhangi bir etkisi yoktur.

-
- -

Aşağıdaki tablo, birkaç seçilmiş örneği göstermektedir. Bunları gözden geçirmeye ve onlara verdiğimiz özgüllüğü anlamaya çalış. Seçicileri henüz ayrıntılı olarak ele almadık, istersen her bir seçicinin ayrıntılarını MDN  seçiciler kaynağına bakabilirsin.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SeçiciBinlerYüzlerOnlarBirlerToplam özgüllük
h100010001
h1 + p::first-letter00030003
li > a[href*="tr"] > .inline-warning00220022
#identifier01000100
{{htmlattrxref("style")}} niteliği. İçinde seçici yok.10001000
- -

Devam etmenden önce bir örneğe bakalım.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

- -

Peki burada neler oluyor? İlk önce, bu örneğin ilk yedi kuralıyla ilgileniyoruz ve fark edeceğin gibi, bunların özgüllük değerlerini her birinden önce yoruma ekledim.

- -
    -
  • İlk iki seçici, bağlantının arka plan renginin stili üzerinde rakabet ediyor — ikincisi kazanır ve arka plan rengi mavi yapar çünkü zincirde fazladan bir kimlik id seçicisi vardır: özgüllüğü 201'e karşı 101'dir.
    • -
  • Üçüncü ve dördüncü seçiciler, bağlantının metin rengi üzerinde rekabet ediyor — ikincisi kazanır ve metni beyaz yapar çünkü bir tane daha az öğe seçiciye sahip olmasına rağmen, eksik olanın yerine bir tane sınıf seçiciye sahip. Yani kazanan özgüllük 113'e 104'tür.
    • -
  • Seçiciler 5-7, üzerine gelindiğinde bağlantının kenarlığının üzerinde rekabet ediyor. Seçici altı, 23'e 24'le beşe kaybeder — zincirde bir adet daha az seçiciye sahiptir. Bununla birlikte, seçici yedi, hem beşi hemde altıyı yener — zincirde beşle aynı sayıda alt seçiciye sahip olmasına rağmen bir öğe seçicinin yerinde bir sınıf seçici vardır. Yani kazanan 23 ve 24'de karşı 33'tür.
    • -
- -
    -
- -
-

Not: Bu, anlaşılma kolaylığı açısından yalnızca bir örnektir. Gerçekte, her seçici türünün, daha düşük özgüllük dizeyine sahip seçiciler tarafından üzerine yazılamayan kendi özgüllük düzeyi vardır. Örneğin, bir milyon sınıf(class) seçici, bir kimlik(id) seçicinin üzerine yazamaz.

- -

Özgüllüğü değerlendirmenin daha doğru bir yolu, özgüllük seviyelerini ayr ayrı en yüksekten başlayarak en düşüğe doğru puanlamak olacaktır. Yanlızca belirli bir düzeydeki seçici puanları arasında bir bağ olduğunda, bir sonraki düzeyi aşağı doğru değerlendirmen gerekir; aksi takdirde, daha yüksek özgüllük seviyelerinin üzerine asla yazmacakları için daha düşük özgüllük seviyesi seçicleri göz ardı edebilirsin.

-
- -

!important (!önemli)

- -

Yukarıdaki hesaplamaların tümünü geçersiz kılmak için kullanabileceğin özel bir CSS bildirimi var, ancak onu kullanırken çok dikkatli olmalısın — !important. Bu, belli bir özelliği-şekli belirli bir öğeye veya öğelere uygulamak istediğimiz tanımları uygulanabilmesi için, kademenin diğer tüm kurallarını geçersiz kılar.

- -

Bir tanesinin bir kimliğe sahip iki tane paragrafımızın olduğu bu örneğe bir göz atın.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

- -

Neler olduğunu görmek için bunu gözden geçirelim — anlamakta zorlanıyorsan ne olacağını görmek için bazı özellikleri kaldırmayı deneyin:

- -
    -
  1. Üçüncü kuralın {{cssxref("color")}} ve {{cssxref("padding")}} değerlerinin uygulandığını, fakat {{cssxref("background-color")}} değerinin uygulanmadığını göreceksin. Neden? Gerçekten üçü de kesinlikle uygulanmalıdır, çünkü kaynak sıradaki kurallar genellikle daha önceki kuralları geçersiz kılar.
    2. -
  2. Bununla birlikte, yukarıdaki kurallar kazanır, çünkü sınıf seçiciler öğe seçilerden daha yüksek özgüllüğe sahiptir.
    3. -
  3. Her iki elamanda better sınıfına ({{htmlattrxref("class")}}) atanmış, ama bir tanesi winning kimliğine({{htmlattrxref("id")}}) atanmış. Kimliklerin sınıflardan daha yüksek bir özgüllüğü olduğundan (bir sayfadaki her benzersiz kimliğe sahip yalnızca bir öğe olabilir, ancak aynı sınıfa sahip birçok öğe bulunabilir — kimlik seçicileri hedefledikleri öğe açısından daha belirgindir), 1 piksel kalınlığındaki siyah kenarlık 2. nesneye uygulanmalı, ilk öğe gri arka plan rengini almalı ve sınıf tarafından belirtildiği gibi kenarlık olmamalıdır.
    4. -
  4. 2. elamanın arka planı kırmızı (red) ancak hiçbir sınırı yok. Neden? Çünkü ikinci kuraldaki bildirim nedeniyle: !important — Kimlik(ID) daha yüksek bir özgüllüğe sahip olsa bile, border: none nitelik tanımlaması !important bildirimine sahip olduğu için tüm kuralları aşarak kazanmış olur.
    5. -
- -
-

Not: !important bildirimini geçersiz kılmanın tek yolu, daha sonra kaynak sırasına veya aynı özgüllüğe sahip daha sonraki kaynak sırasına veya daha yüksek özgüllüğe sahip bir !important bildiriminde bulunmak.

-
- -

!important bildiriminin var olduğunu bilmek, başka kişilerin kodlarında onunla karşılaştığında ne olduğunu bilmen için yararlıdır. Ancak, kesinlikle mecbur kalmadıkça asla kullanmamanı şiddetle taviye ederim. !important Kaynak sırasının normal çalışma şeklini değiştirir. Bu nedenle büyük bir stil sayfasında CSS sorunlarının hata ayıklamasını gerçekten zorlaştırır.

- -

Kullanmanı gerektirebilecek bir duruma örnek vermek gerekirse, çekirdek CSS modüllerini düzenleyemediğin bir CMS üzerinde çalışırken ve başka bir şekilde geçersiz kılınamayan bir stili gerçekten geçersiz kılmak istediğinde faydalı olabilir. Ama farklı bir şekilde yapabiliyorsan kullanma.

- -

CSS konumunun etkisi

- -

Son olarak, bir CSS bildiriminin öneminin, hangi stil sayfasında belirtildiğine bağlı olduğunu da bilmende fayda var — kullanıcılar, geliştiricinin stillerini geçersiz kılmak için özel stil sayfaları ayarlayabilir, örneğin, kullanıcı görme engelli olabilir ve daha kolay okuma sağlamak için ziyaret ettiği tüm web sayfalarında yazı tipi boyutunu normal boyutun iki katı olacak şekilde ayarlayabilir..

- -

Özet

- -

İhtilaflı beyanlar aşağıdaki sırayla uygulanacak, daha sonraki beyanlar öncekileri geçersiz kılacaktır:

- -
    -
  1. Kullanıcı aracındaki stil sayfaları (ör. Tarayıcının varsayılan stilleri, başka bir stil ayarlanmadığında kullanılır).
    2. -
  2. Kullanıcı stil sayfalarındaki normal bildirimler (bir kullanıcı tarafından belirlenen şekillendirmeler).
    3. -
  3. Yazar şekillendirme sayfasındaki normal bildirimler (bunlar, web geliştiricileri olarak bizim tarafımızdan belirlenen şekillendirmelerdir).
    4. -
  4. Yazar stil sayfalarındaki önemli bildirimler.
    5. -
  5. Kullanıcı stil sayfalarındaki önemli bildirimler.
    6. -
- -

Web geliştiriclerinin şekillendirme sayfalarının kullanıcı şekillendirme sayfalarını geçersiz kılması mantıklıdır, böylece tasarım amaçlandığı gibi korunabilir, ancak bazen kullanıcıların yukarıdaki belirtildiği gibi web geliştirici stillerini geçersiz kılmak için iyi nedenleri olabilir. Bunu da !important bildirimini kullanarak sağlayabilirler.

- -

Becerilerini test et!

- -

Bu makalede bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri kavradığını doğrulamak için senin için bazı testler hazırladım. — bk. Becerilerini test edin: Kaynak sırası.

- -

Sıradaki ne

- -

Bu makalenin çoğunu anladıysan, tebrik ederim — CSS'in temel makaniğine aşina olmaya başladın. Sırada, seninle seçicilere ayrıntılı olarak bakacağız.

- -

Kaynak sırasını, özgüllüğü ve mirası tam olarak anlamadıysan endişelenme! Bunlar, şu ana kadar derste ele aldığımız en karmaşık ve bazen profesyonel web geliştiricilerinin bile zorlandığı konulardır. Kursa devam ederken bu makaleye birkaç kez dönmeni ve bu konular üzerinde biraz daha kafa yormanı tavsiye ederim.

- -

Beklendiği gibi uygulanmayan şekillendirmelerle ilgili garip sorunlarla karşılaşmaya başlarsan buraya tekrar bak. Özgüllük sorunu olabilir.

- -

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/debugging_css/index.html b/files/tr/learn/css/building_blocks/debugging_css/index.html deleted file mode 100644 index 37af423069..0000000000 --- a/files/tr/learn/css/building_blocks/debugging_css/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: CSS'de hata ayıklamak -slug: Learn/CSS/Building_blocks/Debugging_CSS -tags: - - Acemi - - Beginner - - CSS - - DOM - - Debugging - - DevTools - - Eğitim - - Hata Ayıklama - - Kaynak kod - - Learn - - source -translation_of: Learn/CSS/Building_blocks/Debugging_CSS -original_slug: Öğren/CSS/CSS_yapi_taslari/Debugging_CSS ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
- -

Bazen CSS yazarken, CSS'in beklediğini yapmadığı bir sorunla karşılaşabilirsin. Belki belirli bir seçicinin bir öğeyle eşleşmesi gerektiğine inanıyorsun ancak hiçbir şey olmuyor veya bir kutu beklediğinden farklı bir boyuttadır. Bu ders, bir CSS sorununu nasıl gidereceğin konusunda rehberlik edecek ve tüm modern tarayıcılarda bulunan  DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini gösterecektir.

- - - - - - - - - - - - -
Ö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ç:Tarayıcının temellerini ve DevTools ile CSS'in basit bir şekilde nasıl incelenip düzenlenebileceğini öğrenmek
- -

Tarayıcılarda DevTools'a nasıl erişilir

- -

Tarayıcı geliştirici araçları nelerdir dersi; çeşitli tarayıcılarda ve platformlarda araçlara nasıl erişileceğini açıklayan güncel bir rehberdir. Çoğunlukla belirli bir tarayıcıda geliştirmeyi seçebilir ve bu nedenle o tarayıcıda bulunan araçlara aşina olabilirsin. Fakat bunlara diğer tarayıcılarda da nasıl erişebileceğini bilmek faydalı olacaktır. Bu, birden çok tarayıcı arasında tasarımında farklılıklar görüdüğünde yardımcı olacaktır.

- -

Ayrıca, tarayıcılar DevTools'larını oluştururken farklı alanlara odaklandıklarını göreceksin. Örneğin, Firefox'ta CSS düzeni ile görsel olarak çalışabilmek için,  Izgara Düzeni, Flexbox'ı ve Biçimleri incelemenizi ve düzenlemenizi sağlayan bazı mükemmel araçları vardır. Ancak, diğer tarayıcılar da bunlara benzer temel araçlara sahiptirler.

- -

Bu derste, Firefox Geliştirici Araçlarının CSS ile çalışmak için bazı yararlı özelliklerine bakacağız. Bunu yapmak için örnek bir dosya kullanacağım. Devam etmek istiyorsanız bunu yeni bir sekmede açman ve yukarıda bağlantısı verilen derste açıklandığı gibi DevTools'a erişmelisin.

- -

DOM ve görüntüleme kaynağı karşılaştırması

- -

Yeni gelenleri DevTools'a çekebilecek bir şey, bir web sayfasının kaynağını görüntülediğinde veya sunucuya koyduğunuz HTML dosyasına baktığınızda gördüklerin ile DevTools'un HTML Panelinde görebileceklerin arasındaki farktır. Kaynağı Görüntüle aracılığıyla görebileceğine kabaca benzer görünse de bazı farklılıklar vardır.

- -

Tarayıcı DOM'da kötü yazılmış bazı HTML'yi bizim için düzeltmiş olabilir. Bir öğe yanlış kapatılmış ise, örneğin bir adet açmış olduğunuz <h2> etiketini </h3> ile kapatırsanız, tarayıcı ne yapmak istediğinizi anlar ve DOM'daki HTML'yi yanlış kapatılan </h3>'ü </h2> ile düzeltir. Tarayıcı ayrıca tüm HTML'yi normalleştirecek ve DOM'daki JavaScript tarafından yapılan tüm değişiklileri de gösterecektir.

- -

Kaynağı görüntüle ile görünen sunucuda depolanan HTML kaynak kodudur. DevTools ile karşılaştırıldığında, DevTools ziyaret edilen sayfanın ziyaret edildiği esnada kaynak kodunun yanında yeniden şekillendirilen(JavaScript vb) HTML ağacı'nda ne olup bittiği hakkında daha detaylı bilgi vermektedir.

- -

Uygulanan CSS'i inceleme

- -

Sayfanda incelemek istediğin öğeyi seçtikten sonra, farenin sağ/ctrl+sol tuşuyla tıkladıktan sonra açılan menüden öğeyi incele'yi seçerek veya Araçlar menüsündeki Web geliştirici sekmesinde bulunan seçeneklerden birini seçerek DevTools'a geçiş yapabilirsin. Ders boyunca ortak çalışma alanımız olması için hazırladığım örnek web sayfasındaki box1 sınıfına atanmış öğeyi seçip DevTools'u aktif hale getirerek anlatımıza başlayabiliriz. Seçecek olduğumuz öğe örneğimizdeki kenarlığa sahip ilk öğededir.

- -

The example page for this tutorial with DevTools open.

- -

Açılan DevTools ekranında birçok sekme ve bu sekmeler içerisinde çeşitli düzenleme ve kontrol alanlarının olduğunu göreceksin. Açılan bölümde Denetçi sekmesinde bulunan HTML alanının sağındaki Kurallar görünümüne bakarsan, seçmiş olduğun öğeye uygulanan CSS niteliklerini ve değerlerini görmelisin. Öğemize doğrudan uygulanan box1 sınıfına ait kuralları ve ebeveynlerinden miras aldığı CSS kurallarını listeleyecektir, bizim durumumuzda öğemizin ebeveyni olan <body>'den alınan miraslar da olacaktır. İstemediğimiz CSS davranışlarını tespit etmemize olanak sağlayacak yer burasıdır. Belki bir üst öğeden miras alıyordur veya farklı bir kuralın etkisi altındadır. Böyle bir durumla karşılaştığımızda bu öğe için yeni bir kural yazılıp yazılmayacağına karar vermemize yardımcı olacak kısım da burasıdır.

- -

Ayrıca, kısa tanımları genişletme yeteneğini de faydalı bulacaksın. Örneğimizde kullandığım margin kısa tanımı üzerinden ilerleyelim.

- -

Kısa tanımı genişletip uzun tanımlarının nitelik ve özelliklerini görebilmek için, nitelik etiketinin sonunda, değerin ise önünde bulunan küçük oka tıklayalım. Bu küçük ok aynı zamanda hangi niteliklerin kısa tanım olduğunu bilmemizde bize yardımcı olur. Kısa tanım olmayan nitelik etiketlerinin sonunda bu küçük ok bulunmaz.

- -

Kurallar görünümünde aynı zamanda öğemize uygulanan CSS kurallarını aktif/pasif konumuna getirebiliriz. Farenin imlecini niteliğimizin üzerine getirdiğimizde görünen onay kutusunun onayını kaldırdırdığımızda öğeye uygulanan CSS kuralının artık uygulanmadığını görebilirsin. Yeniden aktifleştirmek için onay kutusunu onaylaman yeterli olacaktır. Örneğin, border-radius niteliğimizin onay kutusunudaki işareti kaldırırsak CSS uygulamayı durduracaktır. Kısa tanımların uzun tanımlarını görebiliriz fakat bunların bildirimlerini bizim yapmadığımız ve DevTools bilgi için listelediğinden bunları aktif/pasif konumuna getiremeyiz. Uzun tanımların da aktif/pasif olabilmesi için CSS dosyamızda bizim tarafından tanımlanması gerekmektedir.

- -

Bunu bir A/B karşılaştırması yapmak, kuralın uygulanmış halinin mi yoksa uygulanmadığı halinin mi daha iyi olduğuna karar vermek ve aynı zamanda bir hatalı gösterim varsa bu hatanın işlem yaptığımız kuraldan mı kaynaklandığını bulabilmek için bu özelliği kullanırız. Mesela tasaramımızda bir düzensizlik var ve box1 sınıfımıza ait kuralların içerisindeki bir bildirimden mi kaynaklandığını tespit etmek istiyorsak, tek tek bildirimlerimiz üzerindeki onay kutularının işaretlerini kaldırıp kontrol etmemizi sağlar.

- -

Aşağıdaki video, Firefox Geliştirici Araçlarını kullanarak CSS'de hata ayıklama konusunda bazı yararlı ipuçları sağlar:

- -

{{EmbedYouTube("O3DAm82vIvU")}}

- -

Değerleri düzenleme

- -

Nitelikleri aktif/pasif konuma getirmenin yanı sıra niteliklerimizin değerlerini de değiştirebiliriz. Bir öğenin boyutunun daha büyük/küçük olmasını ve belki başka bir rengin daha iyi görünmesine veya daha iyi bir kontrasta sahip olabileceğini görmek isteyebiliriz. DevTools bir stil sayfasını düzenlemek ve sayfayı yeniden yüklemekten daha fazla zaman kazandırır.

- -

Seçtimiz box1 sınıfına ait öğemizin Kurallar görünümündeki color niteliğinin yanıda ki küçük renkli daireye tıklayalım. Bir renk seçicinin açıldığını ve farklı renkleri deneyebilmemiz için tanımlanabilecek tüm renkleri bize gösterdiğini göreceksin. Bu küçük pencereden istediğin rengi seçebilir ve bu seçiminin gerçek zamanlı web belgenize uygulandığını görebilirsin. Benzer bir şekilde, kenarlığın genişliğini, stilini veya rengini de değiştirebilirsin.

- -

DevTools Styles Panel with a color picker open.

- -

Yeni nitelik eklemek

- -

DevTools'u kullanarak niteliklerde ekleyebiliriz. Belki de kutunun <body> öğesinden miras aldığı yazı tipi boyutunu değiştirmek ve kendi boyutunu ayarlamak istediğini fark edebilirsin. Bunu CSS dosyanıza eklemeden önce DevTools'ta yapabilirsin.

- -

Yeni bir bildirim girebilmek için kuralın sonunda bulunan } süslü paranteze tıklamalısın, bu noktada yeni niteliği yazmaya başladığında DevTools size öğenizle eşleşen tüm niteliklerin otomatik tamamlama listesini sunacaktır. İstediğiniz niteliği seçtikten/yazdıktan sonra istediğiniz değeri verebilirsiniz. Biz burada örnek olması itibariyle font-size niteliğini seçeceğiz. Aynı seçiciyle ek bir kural eklemek için Kural görünümünde bulunan + düşmesine tıklayabilir ve yeni kuralını oluşturabilirsin.

- -

The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

- -
-

Not: Kurallar görünümde başka yararlı özelliklerde vardır. Buna örnek geçersiz bir değere sahip veya başka bir kural tarafından ezilen bildirimlerin üzerleri çizilir Daha fazla bilgi için CSS'i inceleme ve düzenleme dersine bakın.

-
- -

Kutu modelini anlamak

- -

Önceki derslerde Kutu Modeline verdiğimiz boyutun üzerine dolgu ve kenarlık genişliklerinin de eklendiğini, ayrıca bu hesaplama yöntemini değiştiren alternatif bir kutu modelimizin olduğunu öğrenmiştik. DevTools bir öğenin boyutunun nasıl hesaplandığını anlamamıza da yardımcı olur.

- -

Düzen görünümde(Layout) seçilen öğenin kutu modelinin satır içi genişliğini/yüksekliğini ve dolgu, kenarlık ve boşluk genişliklerini gösteren bir diagramla birlikte kutunun açıkça tanımlanmamış olsa bile  kutu modeli niteliklerini ve değerlerini gösteren bir alanda bulunmaktadır.

- -

Bu panelde, kutu modeli özelliklerinden biri olan box-sizing öğenin hangi kutu modelini kullandığını kontrol eden niteliktir.

- -

box1 ve box2 sınıflarına dahil olan kutuları karşılaştırdığında, her ikisinin de genişliğinin 400 piksel olacak şekilde tanımlandığını, ancak box1 sınıfına dahil olan kutunun diğer kutudan daha geniş göründüğünü görürsün. İki kutu arasındaki bu farkın birinci kutunun kutu modeli niteliğinin context-box değerine sahip olmasından kaynaklanmaktadır. Bu değer kutuya verdiğimiz genişliğe ek olarak, dolgu ve kenarlık genişliklerinin de eklenmesine sebeb olmuştur ve kutumuzun satır içi geniliği verdiğimiz genişlikle aynı olmuştur.

- -

box2 sınıfına dahil olan öğemizin kutu modeli border-box olduğundan verdiğimiz genişlikten dolgu ve kenarlık genişlikleri çıkartılmış ve kutumuzun satır içi genişliği 350 piksel olmuştur. Ama kutunun da sayfada kapladığı alanı tam olarak belirtebilmemize olanak sağlamıştır. Bizim tanımlamamızda kutumuzun sayfada kapladığı alanın genişliği 400px olacaktır.

- -

The Layout section of the DevTools

- -
-

Not: Kutu Modelini İnceleme ve Düzenleme bölümünden daha fazla bilgi edinebilirsin.

-
- -

Özgüllük sorunlarını çözme

- -

Bazen mevcut bir sitede geliştirme yaparken CSS kurallarınının gerektiği gibi uygulanmadığını, farklı kuralların zorluklar yaşattığını göreceksin. Ne yaparsan yap öğen CSS'i uygulamıyor gibi gözükecek. Mühtemelen burada oluşan hata, özgüllüğü daha yüksek olan bir seçicinin, oluşturmuş olduğun kuralı geçersiz kılmasıdır ve DevTools bunların tespitinde de yardımcı olacaktır.

- -

Örnek dosyamızda bir <em> öğesi içerisinde iki kelimemiz bulunmakta. Birinci turuncu, diğeri ise sıcak pembe olarak görüntülenmektedir. Öğeye uyguladığım CSS kuralı aşağıda:

- -
em {
-  color: hotpink;
-  font-weight: bold;
-}
- -

Bunla birlikte stil sayfamda .special sınıf seçicisine sahip bir kuralım daha var:

- -
.special {
-  color: orange;
-}
- -

Art arda denetim ve miras dersinden hatırlayacağınız gibi, sınıf seçiciler öğe seçicilerden daha yüksek bir özgüllüğe sahiptir. DevTools, nitelik kurallarının bulunduğu büyük stil sayfalarında bu tür çakışmaları bulmanda yardımcı olacaktır.

- -

Kontrol görünümünde <em> öğe ve .special sınıf seçicilerinin öğemize uyguladığı kuralları ve bu kuralların içerisinde turuncu renk bildirimin geçerli olduğunu, öğe seçicimiz içerisinde bulunan color niteliğininde üzerinin çizik olduğunu görebilirsin. Artık aynı tür öğenin içerisinde bulunan metinlerin neden farklı olduğunu anlayabiliyoruz.

- -

Selecting an em and looking at DevTools to see what is over-riding the color.

- -

Firefox Geliştirici Araçları hakkında daha fazla bilgi edinin

- -

MDN'de Firefox DevTools hakkında pek çok bilgi mevcuttur. Daha ayrıntılı bilgi alabilmek ve işlerin nasıl yürüdüğünü öğrenebilmek için DevTools bölümüne ve Nasıl Yapılır Rehberi'ne bakın.

- -

CSS'de hata ayıklama sorunları

- -

DevTools, CSS sorunlarını çözerken çok yardımcı olabilir, bu nedenle kendini CSS'inin beklediğin gibi davranmadığı bir durumla karşılaştığında, nasıl davranmalısın? Aşağıdaki adımlar yardımcı olacaktır.

- -

Sorundan bir adım uzaklaşın

- -

Herhangi bir kodlama problemleri özelliklede CSS problemleri oldukça can sıkıcı olabilir, çünkü çevrim içi aramayla bir çözüm bulmaya yardımcı olabilecek hata mesajı vermez. Hayal kırıklığına uğrarsınız, bir süre konudan uzaklaşın — yürüyüşe çıkın, bir şeyler için, bir arkadaşınızla sohbet edin veya bir süre başka bir konu üzerinde çalışın. Bazen sorun hakkında düşünmeyi bıraktığınızda çözüm sihirli bir şekilde ortaya çıkar. Böyle olmasa bile kendini dinlenmiş, dinç ve iyi hissettiğinden sorun üzerinde daha rahat çalışabilirsin.

- -

HTML ve CSS kodların geçerli mi?

- -

Tarayıcılar, CSS ve HTML'nin doğru şekilde yazılmasını bekler, ancak tarayıcılar kusurları örterek, biçimlendirme veya stil sayfasında hataların olsa bile web sayfanı görüntülemek için ellerinden geleni yapacaklardır. Kodunda hatalar varsa, tarayıcının ne demeye çalıştığını tahmin etmesi gereki ve olmasını istediğinden farklı bir karar verebilir. Ek olarak, iki farklı tarayıcı sorunlarla farklı şekilde başa çıkmaya çalışabilir. Bu nedenle web sayfanı yayınlamadan önce herhangi bir hatanın olup olmadığını doğrulamak için HTML ve CSS'ini bir doğrulama aracıyla test etmen gerekir.

- - - -

Nitelik ve değer, test ettiğin tarayıcı tarafından destekleniyor mu?

- -

Tarayıcılar, anlamadıkları CSS'i görmezden gelir. Kullandığınız özellik veya değer, test ettiğiniz tarayıcı tarafından desteklenmiyorsa, hiçbir şey bozulmaz ancak desteklenmeyen bildiriminiz uygulanmaz. DevTools genellikle desteklenmeyen özellikleri ve değerleri bir şekilde vurgular. Aşağıdaki ekran görüntüsünde, tarayıcı {{cssxref("grid-template-columns")}} için alt ızgara değerlerini desteklemiyor.

- -

Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.

- -

MDN'deki her özellik sayfasının altındaki Tarayıcı uyumluluk tablolarına da göz atabilirsin. Tablolarda nitelik için tarayıcı desteğini gösterir, niteliğin bazı kullanımı için destek varsa ve diğerleri için desteklenmiyorsa bölünür. Aşağıdaki tablo {{cssxref("shape-outside")}} niteliği için tarayıcı uyum verilerini göstermektedir.

- -

{{Compat("css.properties.shape-outside")}}

- -

CSS'ini geçersiz kılan başka bir etken mi var?

- -

Özgüllük hakkında öğrendiğiniz bilgilerin çok faydalı olacağı yer burasıdır. Yapmaya çalıştığınız etkiyi geçersiz kılan daha karakteristik bir kuralınız varsa, ne olduğunu anlamaya çalıştığın bir durumun içerisinde kendini bulabilirsin. Bu durumda DevTools CSS'ini neyin geçersiz kıldığını vurgulayarak gösterecek ve geçersiz kılan karakteristik kuralınızı geçersiz kılabilecek bir kural yazmanız gerektiğini öğrenebileceksiniz.

- -

İndirgenmiş test senaryosu

- -

Sorun yukarıdaki adımlarla çözülmediyse, biraz daha uğraşman gerekecektir. Bu noktada yapılacak en iyi şey, indirgenmiş test senaryosu olarak bilinen bir ortam oluşturmaktır. "Bir sorunu azaltabilmek" gerçekten yararlı bir beceridir. kendi kodundaki ve meslektaşlarının kodundaki sorunları bulmana yardımcı olacak ve ayrıca hataları bildirmenize, hatta daha etkili bir şekilde yardım istemenize olanak sağlayacaktır.

- -

İndirgenmiş test senaryosu, ilgisiz görünen içerikleri ve stilleri kaldırarak sorunu mümkün olan en basit şekilde oluşturan kod bloğudur. Bu genellikle, hatalı olarak gördüğünüz görüntüyü oluşturan kodların ve kuralların diğer çalışan kodlarınızdan ve kurallarınızdan ayrıştırılması anlamına gelir.

- -

İndirgenmiş bir test senaryosu oluşturmak:

- -
    -
  1. Biçimlendirmeniz dinamik olarak oluşturulmuşsa — örn. CMS aracılığıyla — sorunu oluşturan kodlarınızın statik/sabit bir sürümünü oluşturun. CodePen gibi çevrim içi kodlamaya ve paylaşmaya imkan tanıyan web sayflarıyla çalışarak koduna heryerden ulaşabilir ve meslektaşlarınla kolayca paylaşabilirsin. Bunun için sayfa kaynağını görüntüleyi seçip HTML'yi CodePen'e kopyalaman, ardından ilgili CSS ve JavaScript'i de alıp çalışmana dahil etmelisin. Bundan sonra sorunun halen devam edip etmediğini kontrol edebilirsin.
    2. -
  2. JavaScript'i kaldırıp sorunun devam edip etmediğine bakın. Eğer javascript kaldırmanız sorunu çözmediyse javascript kodunuzu yeniden ekleyin.
    3. -
  3. Soruna katkıda bulunmayan tüm HTML'leri kaldırın. Düzenin bileşenlerini ve hatta ana öğelerini kaldırın ve sorunu devam etmesine sağlayacak en küçük kod bloğuna kadar inmeye çalışın.
    4. -
  4. Sorunu etkilemeyen tüm CSS'leri kaldırın.
    5. -
- -

Bunu yapma sürecinde, belirlirli nitelikleri açıp kapatarak soruna neyin olduğunu keşfedebilirsin. Bir şeyler keşfettikçe kodlarının arasına bazı yorumlar eklemeyi de unutma. Yardım istemen gerektiğinde, size yardım eden kişiye denediklerinizi de gösterebilirsiniz.

- -

Hala sorunu çözmek için mücadele ediyorsanız, indirgenmiş bir test senaryosuna sahip olmanız bir forum sayfasında veya iş arkadaşınıza gösterebileceğiniz yalın bir dosyanız olmuş olur. Yardım istemeden önce sorunu dar bir kalıbın içerisine hapsetmiş olmanız, sorun hakkında yardım alma olasılığınız çok daha yüksek olacaktır. Çünkü kimse bir başkasının kod karmaşası içerisinde uğraş vermek istemez. Yardım isteyen kişinin çözüm için bir çabasının olduğunu bilmek ister. Çünkü öğrenim, problemlerin çözümlerini arama aşamasında olgunlaşır. Yoksa öğretmenlerimiz neden problem versinler ki.

- -

Sorunun aslında bir tarayıcıdaki hatadan kaynaklanması durumunda, ilgili tarayıcı geliştiricilerine bir hata raporu içerisinde indirgenmiş test senaryonu da göndermen faydalı olacaktır(örn. Mozilla'nın bugzilla sitesi).

- -

CSS ile daha deneyimli hale geldikçe, sorunları çözmede daha hızlı olduğunuzu göreceksiniz. Ancak en tecrübeli bizler bile bazen kendimizi dünyada neler olup bittiğini merak ederken buluruz. Metodik bir yaklaşım benimsemek, indirgenmiş bir test senaryosu oluşturmak ve sorunu başka birine açıklamak genellikle düzeltmenin bulunmasıyla sonuçlanacaktır.{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html deleted file mode 100644 index f0f6d6a04b..0000000000 --- a/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Farklı metin yönlerini kullanma -slug: Learn/CSS/Building_blocks/Handling_different_text_directions -tags: - - Başlangıç - - Beginner - - CSS - - Eğitim - - Learn - - logical properties - - mantıksal ozellikler - - writing modes - - yazma modu -translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions -original_slug: Öğren/CSS/CSS_yapi_taslari/Handling_different_text_directions ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
- -

CSS öğrenimimizde şimdiye kadar karşılaştığımız özelliklerin çoğu, ekranımızın fiziksel boyutlarına bağlanmıştır. Örneğin bir kutunun üstünde, sağında, altında ve solunda kenarlıklar oluşturmak gibi. Bu fiziksel boyutlar, yatay olarak görüntülenen içeriğe çok düzgün bir şekilde eşleşir ve HTML varsayılan olarak, soldan sağa dilleri(örn. Türkçe veya İngilizce), sağdan sola yazılan dillere(Arapça gibi) göre daha iyi destekleme eğilimindedir.

- -

Ancak son yıllarda, sağdan sola ve aynı zamanda yukarıdan aşağıya içeriklerde(Japonca gibi) dahil olmak üzere farklı içerik yönlerine daha iyi destek vermek için CSS gelişti — bu farklı yönlerin görüntülenmesine yazma modu denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarını anlamak çok yardımcı olacaktır, bu nedenle şimdi onu tanıtacağı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ç:Modern CSS için yazma modlarının önemini anlamak.
- -

Yazma modları nelerdir?

- -

CSS'de bir yazma modu, metnin yatay mı yoksa dikey mi çalıştığını ifade eder.  {{cssxref("writing-mode")}} niteliği bize mevcut yazma modundan başka bir yazma moduna geçiş yapmamıza olanak sağlar. Bunu yapmak için dikey yazı modu kullanan bir dilde çalışmana gerek de yoktur — tasarımının bölümlerinin yazma moduna yaratıcı amaçlala da değiştirebilirsin.

- -

Aşağıdaki örnekte writing-mode: vertical-rl kullanılarak görüntülenen bir başlığımız var. Metin artık dikey olarak çalışıyor. Dikey metin, grafik tasarımında yaygındır ve web tasarımına daha ilginç bir görünüm ve his katmanın bir yolu olabilir.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

- -

writing-mode niteliği için olası üç değer şunlardır:

- -
    -
  • horizontal-tb: Yukarıdan aşağıya blok akış yönü. Cümleler yatay olarak ilerler.
    • -
  • vertical-rl: Sağdan sola blok akış yönü. Cümleler dikey olarak ilerler.
    • -
  • vertical-lr: Soldan sağa blok akış yönü. Cümleler dikey olarak ilerler.
    • -
- -

Yani writing-mode niteliği öğelerin sayfada, bloklar halinde görüntülendiği yönü belirler — yukarıdan aşağıya, sağdan sola veya soldan sağa. Bu daha sonra metnin cümlelerde aktığı yönü belirler.

- -

Yazma modları ve blok ve satır içi düzen

- -

Blok ve satır içi düzeni, daha önce bazı öğelerin blok ve bazılarının da satır içi öğeler olarak götüntülendiğini tartıştık. Yukarıda açıkladığımız yazma modunda ki blok ve satır içi yönler fiziksel ekrana değil, belgeye bağlıdır bağlıdır. Türkçe gibi metni yatay olarak görüntüleyen bir yazma modu kullanıyosan,  bloklar sayfanın üstünden altına doğru görüntülenir.

- -

Bir örneğe bakarsak, bu daha da netleşecektir. Bu örneğimizde, bir başlık ve bir paragraf içeren iki kutum var. İlki writing-mode: horizontal-tb, sayfanın üstünden altına doğru yatay eksende hareket eden bir yazma modu kullanır. İkincisi writing-mode: vertical-rl; sayfanın sağından sola doğru dikey eksende hareket eden bir yazma modudur.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

- -

Yazma modunu değiştirdiğimizde, aslın hangi yönün blok ve hangisinin de satır içi olduğunu belirliyoruz. Bir horizontal-tb yazma modunda blok yönü yukarıdan aşağıya doğru ilerler; bir vertical-rl yazma modunda blok yönü yatay olarak sağdan sola ilerler. Daha iyi açıklamak istersek; block dimension: yazım modunda bloğu paragraf gibi düşünebiliriz. blok yönü paragrafların sayfada dizileceği yönü belirler. Yukarıdan aşağıya, soldan sağa veya sağdan sola. inline dimension: Satır içi ise paragrafların içerisindeki satırlar(dizeler) olarak düşünebiliriz, satır içi cümlenin satır içerisindeki akış yönünü belirler.

- -

Bu şekil, yatay yazma modundayken iki boyutu göstermektedir.

- -

,Showing the block and inline axis for a horizontal writing mode.

- -

Bu şekil, dikey yazma modundaki iki boyutu göstermektedir.

- -

Showing the block and inline axis for a vertical writing mode.

- -

CSS mizanpajına ve özellikle yeni mizanpaj yöntemlerine geliştirmeye başladığında, bu blok ve satır içi fikri çok önemli hale gelir. Tekrardan bu konuya değineceğiz.

- -

Yön

- -

Yazma moduna ek olarak metin  yönümüz de var. Yukarıda belirtildiği gibi, Arapça gibi bazı diller yatay olarak ancak sağdan sola yazılır. Bu, kreatif anlamda kullanacağın bir uygulama değildir — bir metni sağ taraftan başlatmak istiyoran, bunu yapmanın başka yolları da vardır — ancak bunu CSS'in doğasının bir parçası olarak anlamak önemlidir. Web sadece soldan sağa gösterilen diller için değildir.

- -

Yazma modu ve metnin yönünün değişebilmesi nedeniyle, yeni CSS mizanpaj yöntemleri sola ve sağa, yukarı ve sağıya atıfta bulunmaz. Bunun yerine, bu satır içi ve bu blok ayrımıyla birlikte başlangıç ve bitiş  tanımlarıyla bu işi çözer. Şu anda bunun için fazla endişelenmeyin, ancak düzene bakmaya başlarken bu fikirleri aklında blundurun; bunu CSS anlayışında gerçekten yararlı bulacaksın.

- -

Mantıksal özellikler ve değerler

- -

Öğreniminin bu noktasında yazma modları ve yönü hakkında konuşmamın nedeni, ekranın fiziksel boyutlarına bağlı bir çok özelliğe zaten bakmış olmamız ve konu hakkında fikir sahibi olmandır.

- -

İki kutumuza tekrar bir göz atalım — biri horizontal-tb ve diğeride vertical-rl değerlerine sahip. Bu iki kutuya da bir {{cssxref("width")}} değeri verdim. Gördüğün gibi kutu dikey yazma modundayken bir genişliğe sahiptir ve bu metnin taşmasına neden olmuştur.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

- -

Aslında burada olmasını istediğimiz şey, yazma moduyla birlikte yükseği de, genişliği de değiştirmek. Dikey yazma modundayken, yatay modda olduğu gibi kutunun blok boyutunun da genişlemesini istiyoruz.

- -

Bunu kolaylaştırmak için, CSS yakın zamanda bir dizi eşlenmiş özellik geliştirdi. Bunlar esasen fiziksel özellikleri — width ve height gibi — mantıksal veya  akışla ilgili sürümlerle değiştirir.

- -

Yatay yazma modundayken çağırılan {{cssxref("inline-size")}} niteliği satır içi boyuttaki width'yi ifade eder.  {{cssxref("block-size")}} niteliği ise blok boyuttaki height boyutunu ifade eder. Bunların nasıl çalıştığını aşağıdaki örnekte görebilirsin. inline-size ile width.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

- -

Mantıksal kenar boşluğu, kenarlık ve dolgu nitelikleri

- -

Son iki derste CSS kutu modeli ve CSS kenarlıkları hakkında konuştuk. Kenar boşluğu, kenarlık ve dolgu niteliklerinde, fiziksel niteliklerin bir çok örneklerini bulacaksın {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, ve {{cssxref("border-bottom")}}. Genişlik ve yükseklik için eşlemelerimiz olduğu gibi, bu nitelikler için de eşlemelerimiz var.

- -

margin-top niteliğinin eşlemesi olan {{cssxref("margin-block-start")}}, her zaman kenar boşluğunun blok boyutunun başında olmasını sağlayacaktır.

- -

{{cssxref("padding-left")}} niteliğinin eşlemesi olan {{cssxref("padding-inline-start")}}, satır içi yönüne başlamadan uygulanacak olan dolguyu ayarlar. {{cssxref("border-bottom")}} niteliğinin eşlemsi olan {{cssxref("border-block-end")}} ise blok boyutunun sonunda bir sınır koymamızı sağlar.

- -

Aşağıda fiziksel ve mantıksal nitelikler arasında bir karşılaştırma görebilirsin.

- -

Eğer .box sınıfı içerisindeki writing-mode'u vertical-rl olarak değiştirirsen, fiziksel boyut ile mantıksal niteliklerin yazma modu üzerindeki etkisini daha iyi anlayabilirsin.

- -

Ayrıca {{htmlelement("h2")}} etiketinin border-bottom niteliğine sahip olduğunu görebilirsin. Her iki yazma modunda da alt kenarlığın her zaman metnin altında kalmasını nasıl sağalayacağını bulabilir misin?

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

- -

Tek tek kenarlık uzuntanımları göz önünde bulundurduğunda çok sayıda nitelik vardır ve Mantıksal Özellikler ve Değerler için MDN sayfasında eşlenen tüm nitelikleri görebilirsin.

- -

Mantıksal değerler

- -

Şimdiye kadar mantıksal nitelik adlarına baktık. Fiziksel yönleri belirten bazı nitelik son ekleri vardır top, right, bottom, ve left. Bu yönleri belirten eklerin de eşleştirmeleri vardır — mantıksal son eklerine bakacak olursa, block-start, inline-end, block-end, ve inline-start.

- -

Örneğin, metnin resmin etrafına sarılmasına neden olmak için bir resmi sola kaydırmak isteyebilirsin. left değerinin yerini  inline-start değerinin aldığını görebilirsin

- -

Resim üzerinde nasıl bir etkisi olduğunu görebilmek için horizontal-tb değerini vertical-rl ile değiştirebilirsin. Ayrıca float niteliğindeki inline-start değerini inline-end ile değiştirin.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

- -

Burada ayrıca, yazma modu ne olursa olsun kenar boşluklarının doğru yerde olmasını sağlamak için mantıksal kenar boşluk değerlerini kullanıyoruz.

- -
-

Şu anda, yalnız"ca Firefox için float akış kontrol değerleri desteklenmektedir. Eğer Google Chrome veya Microsoft Edge kullanıyorsan, metnin kaymadığını fark edebilirsin.

-
- -

Fiziksel veya mantıksal özellikleri kullanmalı mısın?

- -

Mantıksal özellikler ve değerleri, fiziksel eşdeğerlerinden daha yenidir ve bu nedenle tarayıclarda yakın zamanda desteklenmiştir. Tarayıcı desteğinin ne kadar geriye gittiğini görmek için MDN'deki herhangi bir özellik sayfasını kontrol edebilirsin. Birden fazla yazma modu kullanmıyorsan, şimdilik fiziksel sürümleri kullanmayı tercih edebilirsin. Bununla birlikte, nihayetinde insanların çoğu için mantıksal versiyonlara geçiş yapmalarını bekliyorum, çünkü flexbox ve grid gibi düzen yöntemleriyle de uğraşmaya başladığında çok mantıklı geliyorlar.

- -

Becerilerini test et!

- -

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test edin: yazma modları.

- -

Özet

- -

Bu derste açıklanan kavramlar CSS'de giderek daha önemli hale geliyor. Blok ve satır içi yönün ve yazma modunda bir değişiklikle metnin akışını nasıl değiştiğinin anlaşılması, ileride çok faydalı olacaktır. Yatay mod dışında bir yazma modu kullanmasan bile CSS'i anlamana yardımcı olacaktır.

- -

Bir sonraki modülde, CSS'deki taşmayı derinlemesine ele alacağız.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
  13. /ol>
    14. -
diff --git a/files/tr/learn/css/building_blocks/images_media_form_elements/index.html b/files/tr/learn/css/building_blocks/images_media_form_elements/index.html deleted file mode 100644 index eeb021ca8c..0000000000 --- a/files/tr/learn/css/building_blocks/images_media_form_elements/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Görseller, medya ve form öğeleri -slug: Learn/CSS/Building_blocks/Images_media_form_elements -tags: - - Acemi - - Beginner - - CSS - - Eğitim - - Forms - - Gorüntü - - Images - - Learn - - Media - - Medya - - değiştirilen içerik - - form - - replaced content -translation_of: Learn/CSS/Building_blocks/Images_media_form_elements -original_slug: Öğren/CSS/CSS_yapi_taslari/Images_media_form_elements ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
- -

Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Görseller, diğer ortamlar ve form öğeleri, CSS ile biçimlendirme de şimdiye kadar öğrendiğin kutu davranışlarından biraz farklı davranırlar. Neyin yapılıp neyin yapılamadığını anlamak bazı karmaşıklıklardan seni kurtarabilir. Burada dikkat etmemiz gereken bazı ana konulara değineceğiz.

- - - - - - - - - - - - -
Ö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ç:Bazı öğelerin CSS ile stil verildiğinde alışılmadık davranışlar göstermesini anlamak
- -

Yenilenen öğeler

- -

Görüntüler ve medyalar yenilenen öğeler olarak tanımlanır. Bu, CSS'in bu öğeleri dahili düzenini etkileyemeceği anlamına gelir — yalnızca sayfadaki diğer öğelerle arasındaki konumlarına müdahale edebilir. Ancak göreceğimiz gibi, CSS'in bir görüntüye yapabileceği çeşitli şeyler de vardır.

- -

Görüntüler ve medyalar gibi bazı değiştirilebilen öğeler de bir en boy oranına sahip olarak var olurlar. Bu, hem yatay(x) hem de dikey(y) boyutlara sahip olduğu ve varsayılan olarak dosyanın iç boyutları kullanılarak görüntüleneceği anlamına gelir.

- -

Görüntüleri boyutlandırma

- -

Bu zamana kadar ki derslerden öğrendiğin gibi, CSS'deki her öğe bir kutudan oluşturulur. Her iki yönde de görüntü dosyasının iç boyutlarından daha küçük veya daha büyük bir kutunun içine bir görüntü yerleştirirsen, ya kutudan daha küçük görünür yada kutunun sınırları dışına taşar. Taşma ile ne yapılacağı konusunada bizim karar vermemiz gerekir.

- -

Aşağıdaki örnekte, her ikisi de 200 piksel boyutunda iki kutumuz var:

- -
    -
  • Biri 200 pikselden daha küçük bir görüntü içeriyor — kutudan daha küçük ve onu doldurmak için genişlemiyor.
    • -
  • Diğeri 200 pikselden büyüktür ve kutunun sınırları dışına taşmaktadır.
    • -
- -

{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}

- -

Öyleyse taşma konusu hakkında ne yapabiliriz?

- -

Önceki dersimizde öğrendiğimiz gibi, yaygın bir teknik olan {{cssxref("max-width")}} niteliğinin değerinine %100 değerini tanımlayabiliriz. Bu, görüntünün boyut olarak kutudan daha küçük olmasını ancak daha büyük olmamasını sağlayacaktır. Bu teknik, <video>lar ve  <iframe>ler içinde geçerlidir.

- -

Yukarıdaki örnekte bulunan <img> öğesine max-width: 100%; niteliğini tanımlayın. Daha küçük görüntünün değişmeden kaldığını, ancak daha büyük olanın kutuya sığabilmek için küçüldüğünü göreceksin.

- -

Kutuların içindeki görüntülerle ilgili başka seçimler de yapabilirsin. Örneğin, bür görüntüyü bir kutuya tamamen kaplayacak şekilde boyutlandırmak isteyebilirsin.

- -

Bunu sağlamak için {{cssxref("object-fit")}} niteliği size yardımcı olacaktır. object-fit niteliği yenilenebilen öğelerde kullanıldığında, görselin kutuya sığabilmesi için çeşitli şekillerde bize yardımcı olur..

- -

Aşağıda cover, en boy oranını koruyarak, görüntüyü küçülten ve kutuyu düzgün bir şekilde dolduran değeri kullandık. En-boy oranı korunduğu için, görüntünün kutudan taşan kısımları kırpılacaktır.

- -

{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}

- -

Değer olarak contain'nu kullanırsak, görüntü kutunun içine tamamen sığabileceği kadar küçültülür. Görüntü, kutuyla aynı en-boy oranına sahip değilse "sinemaskop" şeklinde görüntülenecektir.

- -

fill değeri ise, kutuyu tamamen dolduracak fakat görüntü, kutuyla aynı en-boy oranına sahip değilse görüntüyü büzüp gerecektir. Yukarıdaki örnekte kutunun birinde bu değeri kullanıp nasıl sonuçlandığını görebilirsin.

- -

Düzende yenilenebilen öğeler

- -

Yenilenebilen öğeler üzerinde çeşitli CSS mizanpaj tekniklerini kullanırken, diğer öğelere göre biraz farklı davrandıklarını fark edebilirsin. Örneğin, esnek veya ızgara düzeninde öğeler varsayılan olarak tüm alanı dolduracak şekilde boyutlandırılır. Görüntüler yeniden boyutlandırılmazlar, bunun yerine ızgara alanının veya esnek kabın başlangıcına hızalanırlar.

- -

Bunu aşağıdaki, içinde dört öğe bulunan iki sütun ve iki satırdan oluşan bir ızgara örneğinde görebilirsin. Tüm <div> öğelerinin bir arka plan rengi vardır, satır ve sütunu doldurmak için öğemiz boyutlandırılır. Ancak görüntünün boyutunda bir değişim olmaz.

- -

{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}

- -

Bu dersleri sırayla takip ediyorsan, henüz düzene bakmamışsındır. Değiştirilen öğelerin bir ızgara veya esnek mizanpajın parçası olduklarında, dahil oldukları düzen tarafından garip bir şekilde uzatılmalarını önlemek için farklı varsayılan davranışlara sahip olduklarını unutmayın.

- -

Görüntüyü, içinde bulunduğu ızgara hücresini dolduracak şekilde uzatmaya zorlamak için aşağıdaki gibi bir tanımlama yapman gerekir:

- -
img {
-  width: 100%;
-  height: 100%;
-}
- -

Ancak bu, görüntüyü uzatır ve bu olmasını istediğin bir görünüm değidir.

- -

Form öğeleri

- -

Form öğeleri, CSS ile stil oluşturma söz konusu olduğunda zor bir konu olabilir ve Web Formları dersi, burada yeniden anlatamayacağım kadar karmaşık yönlerine yönelik ayrıntılı kılavuzlar içerir. Makalenin bu bölümünde vurgulanmaya değer bir kaç temel var.

- -

<input> etiketi aracılığıyla sayfana birçok form denetimi eklenir — bu, renk ve tarih seçiciler gibi HTML5'e eklenen daha karmaşık alanlara kadar ve metin girişleri gibi basit form alanlarını tanımlar. Ayrıca <textarea> gibi satırlı metin girişine izin veren ek unsurlar ve ek unsurlar için kullanılan form üzerindeki öğelerin gruplandırılması ve etiketlenmesini sağlayan ek tanımlar da vardır — <fieldset> ve <legend> gibi.

- -

HTML5 ayrıca web geliştiriclerinin hengi alanların gerekli olduğunu ve hatta girilmesi gereken içerik türünü belirtmesine olanak tanıyan nitelikler içerir. Kullanıcı beklenmedik bir şey girerse veya gerekli bir alanı boş bırakırsa, tarayıcı hata mesajı gösterebilir. Farklı tarayıcılar, bu tür öğeler için ne kadar stil ve özelleştirmeye izin verdikleri konusunda tutarsızdır.

- -

Metin giriş öğelerini şekillendirme

- -

Metin girişine izin veren <input type="text"> gibi, belirli türlerin girişine izin veren <input type="email"> gibi ve birden fazla satıra sahip metin girişine izin veren <textarea> etiketi gibi öğelerin stillendirilmesi oldukça kolaydır ve sayfandaki diğer kutular gibi davranma eğilimindedirler. Bu öğelerin varsayılan stili kullanıcının, siteyi ziyaret ettiği işletim sistemi ve tarayıcıya bağlı olarak farklılıklar gösterecektir.

- -

Aşağıdaki örnekte, CSS kullanarak bazı metin girişlerine stil uyguladık. Kenarlık, kenar boşlukları ve dolgu gibi stillerin beklediğin gibi uygulandığını ve farklı girdi türlerini hedeflemek için nitelik seçicilerin kullanıldığını görebilirsin. Kenarlıkları, arka plan renklerini, yazı tiplerini ve dolguyu değiştirerek bu formun görünümünü değiştirmeyi denebilirsin.

- -

{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}

- -
-

Önemli: Form öğelerinin kullanıcı için görülebilir olması için form öğelerinin görümünü değiştirirken dikkatli olmalısın. Çevresindeki diğer nesnelerden neredeyse ayırt edilemeyen kenarlık ve arka planna sahip bir form girişi oluşturulabilir, ancak bu fark edilmesini ve bilgi girişi yapılmasını zorlaştırır.

-
- -

Bu kursun HTML bölümündeki form stiliyle ilgili derslerde açıklandığı gibi, daha karmaşık giriş türlerinin çoğu işletim sistemi tarafından oluşturulur ve şekillendirme için erişilemez. Bu nedenle her zaman formların farklı ziyaretçiler için oldukça farklı görüneceğini varsaymalı ve çeşitli tarayıcılarda karmaşık formları test etmelisin.

- -

Kalıtım ve form öğeleri

- -

Bazı tarayıcılar, form öğeleri varsayılan olarak yazı tipi stilini devralmaz. Bu nedenle, form alanlarının gövdede veya bir ana öğede tanımlanan yazı tipini kullandığından emin olmak istiyorsan, bu kuralı CSS'ine eklemelisin.

- -
button,
-input,
-select,
-textarea {
-  font-family : inherit;
-  font-size : 100%;
-}
- -

Form öğeleri ve kutu boyutlandırma

- -

Tarayıcılar arasında form öğleri, farklı widget'ler için farklı kutu boyutlandırma kuralları kullanır. Kutu modeli dersimizde box-sizing niteliği hakkında bilgi edindin ve bu bilgiyi form öğelerinde genişlik ve yükseklileri ayarlarken tutarlı bir görünüm sağlamak için formları şekillendirirken kullanabilirsin.

- -

Tutarlılık için tüm öğelerde kenar boşlukları ve dolgu değerlerini 0 olarak ayarlamak ve ardından belirli kontrolleri şekillendirirken bunları tekrardan tanımlamak iyi bir fikirdir.

- -
button,
-input,
-select,
-textarea {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
- -

Diğer kullanışlı ayarlar

- -

Yukarıda belirtilen kurallara ek olarak, hiç gereği yokken <textarea> öğesinde bir kaydırma çubuğu gösteren IE'yi durdurmak için, overflow: auto tanımını yapın:

- -
textarea {
-  overflow: auto;
-}
- -

Hepsini bir araya getirerek "sıfırlamak"

- -

Son bir adım olarak, çalışmak ortamında tutarlı bir temel sağlamak için, yukarıda tartışılan çeşitli özellikleri aşağıdaki "form sıfırlama" ile tamamlayabiliriz. Bu, son üç bölümde bahsedilen tüm öğeleri içerir:

- -
button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  padding: 0; margin: 0;
-}
-
-textarea {
-  overflow: auto;
-}
- -
-

Not: Normalleştirme stil sayfaları, birçok geliştirici tarafından projelerinde bir dizi temel stil şablonu oluşturmak için kullanılır. Salt olarak bunlar, CSS üzerinde kendi stilini oluşturmadan önce, tarayıcılar arasında ki farklı varsayılan değerler için ve yukarıda bahsettiğimiz davranışlar için tutarlı bir varsayılana sahip olmanı sağlar. Tarayıcılar tipik olarak geçmişe göre daha tutarlı olduğundan, eskisi kadar önemli değiller. Bununla birlikte, bir örneğe göz atmak istersen, bir çok popüler stil sayfasından biri olan ve pekçok projede kullanılan Normalize.css bakabilirsin.

-
- -

Biçimlendirme formları hakkında daha fazla bilgi için, MDN'nin HTML bölümdeki iki derse göz atın.

- - - -

Becerilerini test edin!

- -

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test et: Görüntüler ve form öğeleri.

- -

Özet

- -

Bu ders, CSS'de görseller, medya ve diğer alışılmadık unsurlarla çalışırken karşılaşacağın bazı farklılıkları ele aldı. Sonraki makalede, HTML tablolarını biçimlendirmen gerektiğinde yararlı bulacağın birkaç ipucuna bakacağız.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/index.html b/files/tr/learn/css/building_blocks/index.html deleted file mode 100644 index a0c22927c6..0000000000 --- a/files/tr/learn/css/building_blocks/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: CSS yapı taşları -slug: Learn/CSS/Building_blocks -tags: - - Başlangıç - - Beginner - - CSS - - Learn - - building blocks - - kutu oluşturmak - - Öğrenme -translation_of: Learn/CSS/Building_blocks -original_slug: Öğren/CSS/CSS_yapi_taslari ---- -
{{LearnSidebar}}
- -

Bu derste, CSS'in ilk adımlarının kaldığı yerden devam ediyor. Artık dile ve sözdizimine aşinalık kazandın ve onu kullanma konusunda bazı temel deneyimler edindin, biraz daha derine dalma zamanı. Bu bölüm, art arda denetime ve mirasa, sahip olduğun tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasına bakar.

- -

Buradaki amaç, sana yeterli CSS yazman için altyapı hazırlamak ve metin şekillendirme ve CSS düzeni gibi daha karakteristik kurallara geçmeden önce tüm temel teorileri anlamana yardımcı olmak

- -
-

Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?

- -

Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.

- -

Başla

-
- -

Gereksinimler

- -

Bu üniteye başlamadan önce şunlara sahip olmalısın:

- -
    -
  1. Bilgisayar kullanma ve Web'i sıradan bir şekilde kullanma (örn. web sayfalarında dolaşma, web üzerinde araştırma yapabilme)
    2. -
  2. Gerekli uygulamaların yüklenmesi bölümünde ayrıntılı olarak verilen çalışma ortamı ve  Dosyalarla çalışmak bölümünde ayrıntılarıyla anlatıldığı gibi dosyanın nasıl oluşturulacağının ve yönetileceğinin anlaşılması
    3. -
  3. HTML'ye Giriş ünitesinde tartışıldığı gibi alt yapıya sahip olmak.
    4. -
  4. CSS ilk adımlar ünitesinde açıklanan temellerin anlaşılması.
    5. -
- -
-

Not: Kendi dosyalarını oluşturma imkanının olmadığı bir bilgisayar/table/başka bir çihaz üzerinde çalışıyorsan; çevrim içi kod düzenleyip deneyebileceğin şu siteleri kullanabilirsin: JSBin veya Glitch.

-
- -

Kılavuzlar

- -

Bu ünite, CSS dilinin en önemli kısımlarını kapsayan aşağıdaki makaleleri içerir. Ders boyunca, gördüklerini denemene izin verecek bir çok alıştırmalarla karşılaşacaksın.

- -
-
Art arda denetim ve miras
-
-

Bu dersin amacı, CSS'in HTML'ye nasıl uygulandığını ve çakışmaların nasıl çözüldüğünü kontrol eden CSS'in en temel kavramlarından bazıları olan art arda denetim, özgüllük ve miras anlayışını geliştirmektir.

-
-
CSS seçicileri
-
CSS'de, stil verilecek öğeleri seçerken yüksek hassasiyetli birçok seçici mevcuttur. Bu makale ve alt makalelerinde, seçicilerin farklı türlerinin nasıl çalıştığını görerek incelemiş olacağız. Alt makalelerin bağlantıları aşağıdadır: - -
-
Kutu modeli
-
CSS'deki herşeyin etrafında bir kutu vardır ve bu kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin ve öğelerin diğer öğelerle hizlanmasının anahtarıdır. Bu derste, nasıl çalıştığını ve bununla ilgili terminolojiyi anlayarak daha karmaşık tasarımların üstesinden gelebilmen için CSS Kutu Modeline derinlemesine bakacağız.
-
Arka planlar ve kenarlıklar
-
Bu derste CSS arka planları ve kenarlıkları ile yapabileceğin bazı yenilikçi özelliklere bir göz atacağız. Renk geçişleri, arka plan resimleri ve yuvarlatılmış köşeler yapabilmek. CSS'deki arka planlar ve kenarlıklar bir çok stil sorunun çözümüdür.
-
Farklı metin yönlerini kullanma
-
Son yıllarda, sağdan sola ve yukarıdan aşağıya doğru(japonca gb.) içeriklerinde dahil olduğu farklı yönlülüğü daha iyi desteklemek için CSS gelişti. Bu farklı yönlere yazma modu denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarının anlamak sana çok yardımcı olacaktır. Bu nedenle bunları bu makalede tanıtacağız.
-
Taşan içerik
-
Bu derste CSS'deki başka bir önemli soruna bakacağız — taşma. Taşma, bir kutunun sınırları içerisinde tutabileceğinden daha fazla içerik olduğunda olan davranıştır. Bu makalede ne olduğunu ve nasıl yönetileceğini öğreneceksin.
-
CSS değerleri ve birimleri
-
CSS'de kullanılan her nitelik, o nitelik için izin verilen bir değere veya değerler kümesine sahiptir. Bu derste, kullanılan en yaygın değerlerden ve birimlerden bazılarına göz atacağız.
-
CSS'de öğelerin boyutlandırma
-
Şimdiye kadarki derslerde, CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarına az buçuk aşına oldun. Tasarımındaki farklı özelliklerin ne kadar büyük olacağını anlamak gerçekten önemlidir ve bur derste, nesnelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yolarını özetleyeceğiz ve gelecete size yardımcı olacak boyutlandırma ile ilgili bir kaç terim tanıtacağız.
-
Görseller, medya ve form nesneleri
-
Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Resimler, diğer ortamlar ve form nesneleri gibi. CSS ile biçimlendirme becerin açısından normal kutulardan biraz farklı davranırlar. Neyin mümkün olup neyin mümkün olmadığını anlamak bazı hayal kırıklıklarından seni kurtarabilir. Bu ders bilmen gereken bazı ana konuları vurgular.
-
Tabloları şekillendirme
-
Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı işi değildir, ancak bazen bunu yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin uygulanmasıyla HTML tablolarının güzel görünmesi için sana bir klavuz sağlar.
-
CSS'de hata ayıklama
-
Bazen CSS yazarken, CSS'nin istediğin şeyi yapmadığı bir sorunla karşılaşırsın. Bu makale, bir CSS sorununu nasıl gidereceğin konusunda sana rehberlik edecek ve tüm modern tarayıcılarda bulunan DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini göstereceğiz.
-
CSS'ini düzenleme
-
Daha büyük stil sayfaları ve büyük projeler üzerinde çalışmaya başladığında, büyük bir CSS dosyasını korumanın ne kadar zor olabileceğini keşfedeceksin. Bu makalede, CSS'ini yazmak için kullanılan en iyi uygulamalara  ve bakımı iyileştirmeye yardımcı olmak için başkaları tarafından kullanılan çözümlerden bazılarına kısa bir göz atacağız.
-
- -

Değerlendirmeler

- -

CSS becerilerini test etmek ister misin? Aşağıdaki değerlendirmeler, yukarıdaki kılavuzlarda anlatılan CSS hakkında edindiğin bilgileri sınayacak.

- -
-
Temel CSS anlayışı
-
Bu değerlendirme, temel sözdizimi, seçiciler, özgüllük, kutu modeli ve daha fazlası hakkında öğrendiklerini sınar.
-
Süslü antetli kağıt oluşturma
-
Doğru izlenimi bırakmak istiyorsan, güzel bir antetli kağıda bir mektup yazmak gerçekten iyi bir başlangıç olabilir. Bu değerlendirme, böyle bir görünüm elde etmek için seni çevrimiçi bir şablon oluşturmaya davet edeceğim.
-
Harika görünümlü bir kutu
-
Burada, göz alıcı bir kutu oluşturmak için arka plan ve kenarlık stilini kullanma konusunda biraz pratik yapacağız.
-
- -

Göz at

- -
-
Gelişmiş stil efektleri
-
Bu makale, kutu gölgleri, karışım modları ve filtreler gibi bazı ilginç gelişmiş stil özelliklerine giriş sağlayan bir numara kutusu görevi görür.
-
diff --git a/files/tr/learn/css/building_blocks/organizing/index.html b/files/tr/learn/css/building_blocks/organizing/index.html deleted file mode 100644 index 6fe3ee5d36..0000000000 --- a/files/tr/learn/css/building_blocks/organizing/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: CSS planlama -slug: Learn/CSS/Building_blocks/Organizing -tags: - - Acemi - - Beginner - - CSS - - CodingScripting - - Eğitim - - Learn - - biçimlendirme - - comments - - formatting - - methodologies - - organizing - - post-processor - - pre-processor - - stil rehberi - - styleguide - - yorumlar -translation_of: Learn/CSS/Building_blocks/Organizing -original_slug: Öğren/CSS/CSS_yapi_taslari/Organizing ---- -
{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
- -

Projelerin büyüdükçe, projenle birlikte büyüyen CSS Stil sayfalarınla çalışmanın ne kadar zor olacağını tecrübe edeceğin zamanlar gelecek. Bu derste, CSS Stil sayfalarında tecrübeli geliştiriciler tarafından kullanılan; sana yol gösterip, zorlanmadan geliştirme ve bakım yapabilmene yardımcı olacak bazı çözümlere göz atacağı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ç:Stil sayfalarını organize etmeye yönelik bazı ipuçlarını ve CSS en iyi şekilde planlama uygulamalarını öğrenmek, ekip çalışmasına yardımcı olacak ortak adlandırmalar ve araçlar hakkında bilgi edinmek.
- -

CSS'i düzenli tutmak için ipuçlar

- -

Düzenli stil sayfaları yazmak ve stül sayfalarını düzenli tutmak için bazı genel öneriler

- -

Projende kodlama stili rehberin var mı?

- -

mevcut bir proje üzerinde bir ekiple çalışyorsan, kontrol etmen gereken ilk şey, projenin CSS için mevcut bir stil reberine sahip olup olmadığıdır. Takım stil rehberi her zaman kendi kodlama tercihlerine sahip olmalıdır. Çoğu zaman bir şeyler yapmak için doğru veya yanlış bir yol yoktur, ancak tutarlılık önemlidir.

- -

Örneğin, MDN kod örnekleri için CSS yönergelerine bir göz atın.

- -

Tutarlı olmasını sağlayın

- -

Projede bir takımla veya yanlız çalışıyor olsan bile, yapman gereken ilk iş kendine tutarlı bir yol belirlemektir. Buradaki tutarlılık, sınıflar için aynı adlandırma kurallarını kullanmak, rengi tanımlamak için bir yöntem seçmek veya biçimlendirmeyi sabitlemek (örn. kodunuzu girintilemek için sekmeler mi yoksa boşluklar mı kullanacaksın? Girinti kaç karakter olacak?)

- -

Her zaman uygulayacağın bir dizi kurala sahip olduğunda, CSS yazarken gereken zihinsel ek yükten kurtulursun. Bu kuralı oluşturmak için illaki bir projeye başlaman gerekmiyor. Bu eğitim serisi devam ederken dahi, bu kurallarının ilk adımlarını belirleyebilirsin.

- -

CSS biçimlendirmen okunabilir olsun

- -

CSS'i biçimlendirmenin birkaç yolu vardır. Bazı geliştiriciler, tüm kuralları tek bir satıra koyar. Örneğin:

- -
.box { background-color: #567895; }
-h2 { background-color: black; color: white; }
- -

Diğer geliştiriciler her şeyi yeni bir satıra ayırmayı tercih ediyor:

- -
.box {
-  background-color: #567895;
-}
-
-h2 {
-  background-color: black;
-  color: white;
-}
- -

Tarayıcılar, hangi CSS biçimlendirmesini kullandığınızı önemsemez. Kişisel olarak her bir özellik ve değer çiftinin yeni bir satırda bulunmasının okunurluluğu arttırdığını düşünüyorum.

- -

CSS hakkında yorumlarda bulun

- -

CSS'ine yorum eklemek, diğer geliştiriciclerin CSS dosyanızda çalışmasına yardımcı olmasının yanında kendi yazmış olduğun kodları ne için ve neden yazıldığını hatırlanmanda da yardımcı olacaktır.

- -
/* Bu bir CSS yorumudur
-Birden fazla satıra bölünebilir. */
- -

Bir ipuçu, Stil sayfandaki mantıksal bölümler kullanmak, sayfanda arama yaparken bölümler arasında hızlı bir şekilde ilerlemeni hatta direk o bölüme atlamana olanak sağlayacaktır. Yorumlarında bir dizge kullanmayı alışkanlık haline getirirsen, onu arayarak bölümlerinin arasında aradığın bölüme rahatlıkla atlayabilirsin. Bölümler için aşağıda || mantıksal işaretini kullandım.

- -
/* || Genel stiler */
-
-...
-
-/* || Yazıları şekillendir */
-
-...
-
-/* || Üst bilgi ve ana gezinti bölmesi */
-
-...
-
-
- -

CSS'indeki her kuralı yorumlamana gerek yok, çünkü çoğu kendi kendini açıklayıcı olacaktır. Yorumlaman gerekenler, vermiş olduğun bir kararın sebebini veya diğer bildirimlerden bariz bir şekilde ayrılmış olanlar hakkında olacaktır.

- -

Eski tarayıcı uyumsuzluklarını aşmak için eski tarayıcıların desteklediği bir bildirimde bulunmuş olabilirsin. Örneğin:

- -
.box {
-  background-color: red; /* linear-gradient değerini desteklemeyen tarayıcılar için arka plan rengi */
-  background-image: linear-gradient(to right, #ff0000, #aa0000);
-}
-
- -

Belkide bir işin üstesinden gelebilmek için başka bir kaynaktan yardım aldın ve CSS biraz kafa karıştırıyor. Bu durumda, kaynağın URL'sini yorumlarak ekleyebilirsin. Bir süre sonra bu projeye geri döndüğünde kendine teşekkür edeceksin. Çünkü işin üstesinden gelebilmek için bir yerden yardım aldım ama nerede? diyer türlü bunu hatırlamak zaman alacaktı.

- -

Stil sayfanda mantıksal bölümler oluştur.

- -

Tüm ortak stillerin, stil sayfanda ilk olarak bildirilmesi iyi bir fikirdir. Bu, o öğeyle özel bir tasarım yapmadığın sürece tüm projende standart bir tasarımı elde etmeni sağlayacaktır. Genellikle şunlar için oluşturduğun kuralların olacak:

- -
    -
  • body
    • -
  • p
    • -
  • h1, h2, h3, h4, h5
    • -
  • ul ve ol
    • -
  • table özellikleri
    • -
  • Bağlantılar
    • -
- -

Stil sayfasının bu bölümünde, sitedeki yazı için varsayılan stil sağlıyoruz, veri tabloları ve listeler içinde varsayılan bir stil bildiriminde bulunoyor vb.

- -
/* || Genel Stiller */
-
-body { ... }
-
-h1, h2, h3, h4 { ... }
-
-ul { ... }
-
-blockquote { ... }
-
- -

Daha sonra, birkaç yardımcı sınıf tanımlayabiliriz. Örneğin, esnek öğeler olarak veya başka bir şekilde göstereceğimiz listeler için varsayılan liste stilini kaldıran bir sınıfımız olsun. Ayrıca birçok farklı öğeye uygulamak isteyeceğimizi bildiğimiz birkaç tanımlamamız da varsa, bunları da bu bölümde tanımlayabiliriz.

- -
/* || Araçlar */
-
-.nobullets {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-...
-
-
- -

Sonra site genelinde her sayfada kullanmayı planladığımız tüm kurallarıda şuraya ekleyebiliriz. Bunlar, temel sayfa düzeni, başlık, gezinme stili vb. gibi bölümler için olabilir.

- -
/* || Site geneli */
-
-.main-nav { ... }
-
-.logo { ... }
-
- -

Son olarak; içeriğe, sayfaya ve hatta kullanıldıkları bileşene göre ayrılmış belilirli kısımlar için CSS ekleyeceğiz.

- -
/* || Site sayfaları */
-
-.product-listing { ... }
-
-.product-box { ... }
-
- -

Çalışmamazı bu şekilde sıralayarak, en azından stil sayfasında değişiklik yapmak istediğimizde, değiştireceğimiz bildirimlerin/kuralların hangi bölümde olduğu hakkında bir fikrimiz olur.

- -

Aşırı karakteristik seçicilerden kaçının

- -

Çok özel seçiciler oluşturulduğunda; aynı kuralın başka bir öğeye de uygulanması gerektiğinde, CSS kuralının çoğaltıldığını sıklıkla göreceksin. Örneğin, main sınıfına dahil <article> öğesinin torunlarından box sınıfına dahil <p> öğeleri için bir kuralımız olabilir.

- -
article.main p.box {
-  border: 1px solid #ccc;
-}
- -

Fakat daha sonra aynı kuralları main sınıfına dahil olmayan ebeveyne sahip öğeye veya <p> öğesi dışındaki bir öğeye uygulamak isteyebiliriz. Bu durumda, bu kurala ya yeni bir seçici ekleyecek yada tamamen yeni bir kural kümesi oluşturmamız gerekecek. Bunun yerine, bu stil için .box seçiciye sahip bir kural oluşturur ve bu kuralı uygulamak istediğimiz tüm öğeleri box sınıfına dahil ederiz.

- -
.box {
-  border: 1px solid #ccc;
-}
- -

Daha karakteristik seçiciler oluşturacağımız mantıklı zamanlarımız olacaktır, ancak bu genellikle normal uygulamadan ziyade istisnaî bir durum olacaktır.

- -

Büyük stil sayfalarını daha küçük parçalara bölün

- -

Farklı tasarlanmış veya özellikli sayfalara sahip sitelerde, genel kuralların bulunduğu stil sayfalarınla, her web sayfasının kendine has kurallarının olduğu stil sayfalarını bir birinden ayırmak geliştirme ve düzeltmelerde yararlı olacaktır. Bir stil sayfasında birden çok stil sayfasına bağlanabilirsin. Stil sayfasına bağladığınız diğer stil sayfasının içindeki kurallar, bağlantı yapılan satırdan itibaren asıl stil sayfanıza yazılmış gibi işlem görür ve art arda kontrol şartları gereği bağlandığı noktadan sonra kuralınızı geçersiz kılacak diğer kurallar için dikkat etmeniz gerekir.

- -

Örneğin, bir mağaza için hazırlanmış bir sitenin parçası olarak ürün listelerinin ve formların olduğu iki sayfamızın olduğunu düşünelim. Ürün listeleri ve formlar için farklı CSS kuralları olacağı için bu iki sayfa için gerekli stil sayfalarını birbirinden ayırıp, ürün listelerinin olduğu web sayfası yüklenirken sadece bu sayfa için gerekli CSS'lerin indirilmesi sağlanarak internet trafiğinden de tasarruf yapmış oluruz.

- -

CSS'inizi ayrı dosyalarda tutmanız, kodlarınızı düzenli tutmanızı kolaylaştırabilir. Aynı zamanda da birden fazla kişinin çalıştığı projelerde CSS üzerinde çalışan kişilerin, aynı anda aynı CSS dosyası üzerinde çalışma olasılığıyla daha az karşılaşılır ve bu da kaynak kontrolünde daha az çakışmalara yol açacağı anlamına gelir.

- -

Yardımcı olabilecek diğer araçlar

- -

CSS'inin kendi içinde yerleşik organizasyon şeklinde bir yeteneği yoktur, bu nedenle CSS'i nasıl yazdığınla ilgili tutarlılık ve ilkeler oluşturmak için çalışman gerekir. Web topluluğu daha büyük CSS projelerini yönetmene yardımcı olabilecek çeşitli araçlar ve yaklaşımlar geliştirmiştir. Araştırmanız için size yardımcı olabileceklerinden ve diğer insanlarla çalışırken bunlarla karşılaşmanız muhtemel olduğundan, bazıları hakkında kısa bir rehber ekledim.

- -

CSS metodolojileri

- -

CSS yazmak için kendi kurallarınızı oluşturmak yerine, topluluk tarafından halihazırda tasarlanmış ve birçok projede test edilmiş yaklaşımlardan yararlanabilirsin. Bu metodolojiler temelde CSS kodlama kılavuzlarıdır ve CSS yazmak ve düzenlemek için çok iyi yapılandırılmış bir yaklaşım benimserler. Tipik olarak, her seçiciyi o proje için özel bir kurallar kümesine yazıp optimize ettiyseniz, gereksinim duyduğunuzdan daha ayrıntılı bir CSS kullanımına neden olma eğilimindedirler.

- -

bununla birlikte, birini benimseyerek çok fazla yapı kazanırsınız ve bu sistemlerin çoğu çok yaygın olarak kullanıldığından, diğer geliştiricilerin kullandığınız yakşalımı anlaması ve CSS'lerini aynı şekilde yazması daha olasıdır. Sıfırdan kendi kişisel metodolojinizi geliştirmek zorunda kalmazsınız.

- -

OOCSS

- -

Karşılaşacağın yaklaşımların çoğu, Nicole Sullivan'ın çalışmasıyla popüler hale gelen Nesne Yönelimli CSS (OOCSS) kavramına bir şeyler borçludur. OOCSS'in temel fikri, CSS'ini sitenizde ihtiyaç duyduğunuz her yerde kullanabileceğiniz, yeniden kullanılabilir nesnelere dönüştürmektir. OOCSS'in standart örneği, Media Nesnesi olarak tanımlanan modeldir. Bu, bir tarafında sabit boyutlu bir görüntü, video veya başka bir öğe ve diğer tarafında esnek içerik bulunan bir modeldir. Yorumlar, listeler vb. tüm web sitelerinde gördüğümüz bir modeldir.

- -

OOCSS yaklaşımını benimsemesende, bu tür modellerin kullanıldığı yerler için özel CSS oluşturabilirsin, örneğin bileşen parçaları için bir dizi kurala sahip comment adlı bir sınıf ve neredeyse comment sınıfıyla arasında bazı farklılıklar haricinde aynı olan  list-item sınıfı oluşturalım. Bu iki bileşen arasındaki fark, liste öğesinin bir alt kenarlığa sahip olması ve yorumlardaki resimlerin kenarlığı varken, liste öğesindeki resimlerin kenarlıklarının olmamasıdır.

- -
.comment {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-}
-
-.comment img {
-  border: 1px solid grey;
-}
-
-.comment .content {
-  font-size: .8rem;
-}
-
-.list-item {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  border-bottom: 1px solid grey;
-}
-
-.list-item .content {
-  font-size: .8rem;
-}
- -

OOCSS'de, her iki bileşen içinde ortak CSS'e sahip olan media adlı tekbir model oluştururuz. Daha sonra küçük farklılıkların üstesinden gelmek için ek sınıflar ekleyip CSS'imizi genişlettik.

- -
.media {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-}
-
-.media .content {
-  font-size: .8rem;
-}
-
-.comment img {
-  border: 1px solid grey;
-}
-
-.list-item {
-  border-bottom: 1px solid grey;
-}
- -

HTML'emizdeki yorum kısmının hem media, hem de comment sınıflarına dahil edilmesi gerekir:

- -
<div class="media comment">
-  <img />
-  <div class="content"></div>
-</div>
-
- -

Liste öğelerinin de hem media, hem de list-item sınıfklarına dahil edilmesi gerekir:

- -
<ul>
-  <li class="media list-item">
-    <img />
-    <div class="content"></div>
-  </li>
-</ul>
- -

Nicole Sullivan'ın bu yaklaşımını açıklarken ve onu teşvik ederken yaptığı çalışma, bugün OOCSS yaklaşımını sıkı bir şekilde takip etmeyen kişlerin bile, CSS yaklaşımını bir gün bir şekilde kullanacağı anlamına geliyor — genel olarak olaylara yaklaşmanın iyi bir yolu olarak görünüyor.

- -

BEM

- -

BEM, Blok Öğe Değiştirici anlamına geliyor. BEM'de bir blok, düğme, menü veya logo gibi bağımsız bir nesnedir. Bu öğe, bir liste elamanı veya bulunduğu bloğa bağlı bir başlık gibi bir şeydir. CSS sınıflarında çizgi ve alt çizlerin yoğun kullanımı nedeniyle BEM yaklaşımı kullanan kodu heryerde tanıyacaksın. Örneğin, BEM Adlandırma kuralları sayfasındaki HTML'ye uygulanan sınıflara bakın:

- -
<form class="form form--theme-xmas form--simple">
-  <input class="form__input" type="text" />
-  <input
-    class="form__submit form__submit--disabled"
-    type="submit" />
-</form>
- -

Ek sınıflar, OOCSS örneğinde kullanılanlara benzer, ancak BEM katı adlandırma kuralları kullanır.

- -

BEM, daha büyük web projelerinde yaygın olarak kullanılmaktadır ve birçok kişi CSS'lerini bu şekilde yazmaktadır.

- -

Sistem hakkında daha fazla bilgi edinmek için CSS Hileleri üzerine BEM 101'i okuyun.

- -

Diğer yaygın sistemler

- -

Kullanımda olan bu sistemlerden daha fazlası da vardır. Diğer popüler yaklaşımlar arasında Jonathan Snook tarafından oluşturulan Ölçeklenebilir ve Modüler CSS Mimarisi(SMACSS), Harry Roberts'tan ITCSS ve Yahoo! tarafından oluşturulan Atomic CSS (ACSS) bulunmaktadır. Bu yaklaşımlardan birini kullanan bir projeyle karşılaşırsan, o zaman avantajın aynı tarzda kodlamayı anlamana yardımcı olabilecek bir çok makale ve rehbere ulaşabilmendir.

- -

Böyle bir sistemi kullanmanın dezavantajı, özellikle küçük projeler için aşırı derecede karmaşık görünebilmeleridir.

- -

CSS için bir sistem oluşturun.

- -

CSS'i düzenlemenin bir başka yolu da, arayüz geliştiricileri için mevcut olan bazı araçlardan yarlanmaktır; bu CSS yazmak için biraz daha programlı bir yaklaşım benimsemene olanak tanır. Ön işlemci ve son işlemci olarak adlandırdığımız bir dizi araç vardır. Bir ön işlemci, ham dosyalarınız üzerinde çalışır ve onları bir stil sayfasına dönüştürür, oysa bir son işlemci bitmiş stil sayfasını alır ve ona bir şeyler yapar — daha hızlı yüklenmesi için onu optimize edebilir.

- -

Bu araçlardan herhangi birini kullanmak için, geliştirme ortamının ön ve son işlemeyi yapan komut dosyalarını çalıştırabilmesi gerektirir. Birçok kod düzenleyici bunu sizin için yapabilir veya yardımcı olması için komut satırı araçları yükleyebilirsiniz.

- -

En popüler ön işlemci Sass'tır. Bir bir Sass öğreticisi değildir, bu yüzden diğer Sass özelliklerinden herhangi birini kullanmasanız bile, Sass'ın yapabileceği, planlama açısından gerçekten yarlı olan birkaç konuyu kısaca açıklayacağım. Sass hakkında daha çok şey öğrenmek istiyorsanız, Sass Temelleri makalesi ile başlayın ve ardından diğer belgelerine geçin.

- -

Değişken tanımlama

- -

CSS artık yerel özel özelliklere sahiptir ve bu Sass'ın özelliğini, giderek daha az önemli hale getirir, ancak Sass'ı kullanmamızın nedenlerinden biri, bir projede kullanılan tüm renkleri ve yazı tiplerini bir dosyada tanımlayabilmek ve ardından bu değişkeni tüm proje içerisinde kullanmaktır. Bu, mavinin yanlış tonunu kullandığınızı fark ettiğinde, yanlış tanımı sadece bir yerde değiştirmenin yeterli olacağı anlamanı gelir.

- -

Aşağıdaki ilk satırdaki gibi bir $base-color değişkeni tanımlarsak, onu stil sayfası aracıyla bu rengi kullanmamız gereken her yerde kullanabiliriz.

- -
$base-color: #c6538c;
-
-.alert {
-  border: 1px solid $base-color;
-}
- -

CSS derlendikten sonra aşağıdaki gibi gözükecektir.

- -
.alert {
-  border: 1px solid #c6538c;
-}
- -

Birleşen stil sayfalarını derlemek

- -

Yukarıda CSS'i planlamanın bir yolununda stil sayfalarını daha küçük stil sayfalarına bölmek olduğundan bahsetmiştim. Sass'ı kullanırken bunu başka bir seviyeye taşıyabilir ve çok sayıda çok küçük stil sayfalarına sahip olabilirsin — hatta her bileşen için ayrı bir stil sayfasına sahip olacak kadar ileri gidebilirsin. Sass(kısımlar-partials) içerme işlevini kullanarak, web sitenizde kullanmak istediğiniz stil sayfalarını bir birine bağlayarak bir veya daha fazla stil sayfasını kullanabilirsin.

- -

Örneğin, partials(kısımlar) ile bir dizin içerisinden birkaç stil dosyaların olabilir: Diyelim ki foundation/_code.scss, foundation/_lists.scss, foundation/_footer.scss, foundation/_links.scss vb. dosyaların olsun. Bunları Sass'da kullanmak için @use bildirimini kullanabilirsin:

- -
// foundation/_index.sass
-@use 'code'
-@use 'lists'
-@use 'footer'
-@use 'links'
- -

Kısımların tümü, yukarıda belirtildiği gibi bir dizin dosyasına yüklenirse, daha sonra tüm dizini tek seferde başka bir stil sayfasına bağlayabilirisin:

- -
// style.sass
-@use 'foundation'
- -
-

Not: Sass'ı denemenin basit bir yolu  CodePen kullanmakttır. CSS'in için Sass'ı ayarlardan etkinleştirerek,  CodePen'nin web sayfanı normal şekilde görebilmen için Sass aracını kullanmasını sağlayabilirsin. Bazen CSS öğreticilerinin CodePen demolarında düz CSS yerine Sass kullandığını göreceksin, bu sebeble bu konuda bilgi sahibi olman faydalı olacaktır.

-
- -

Optimizasyon için son işlem

- -

Örneğin, çok sayıda ek yorum ve boşluk ekleyerek stil sayfalarının boyutunun artmasından endişe ediyorsan, üretim sürümünde gereksiz olan her şeyi kaldırarak CSS'i optimize etmek için bir işlem sonrası yapılması gerekenler olabilir. Bunu yapmak için son işlemci çözümüne bir örnek cssnano.

- -

Bundan sonra

- -

Bu, CSS'i öğrenme rehberinin son bölümüdür ve görebileceğin gibi CSS'i keşfinin bu noktadan sonra devam edebileceği birçok yol vardır.

- -

CSS'de mizanpaj hakkında daha fazla bilgi edinmek için CSS Mizanpajını Hakkında bölümüne bakabilirsin.

- -

Artık MDN CSS materyalinin geri kalanını keşfetme becerisine sahip olmalısın. özellikleri ve değerleri arayabilir, kullanılacak kalıplar için CSS YemekKitabını inceleyebilir ve CSS Izgara Düzeni Rehberi gibi bazı özel kılavuzlardan daha fazlasını okuyabilirsin.

- -

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 öğelerin 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/learn/css/building_blocks/overflow_tasks/index.html b/files/tr/learn/css/building_blocks/overflow_tasks/index.html deleted file mode 100644 index d84ac5c022..0000000000 --- a/files/tr/learn/css/building_blocks/overflow_tasks/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Taşma' -slug: Learn/CSS/Building_blocks/Overflow_Tasks -tags: - - Acemi - - Beginner - - CSS -translation_of: Learn/CSS/Building_blocks/Overflow_Tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Overflow_Tasks ---- -
{{LearnSidebar}}
- -
- -

Bu görevlerin amacı, CSS'deki taşma konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır.

- -
-

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

- -

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.

-
- -

Birinci Görev

- -

Kutu sabit bir yüksekliğe sahip olduğu için içerik kutudan taşıyor. yüksekliği koruyun, ancak yalnızca taşmaya neden olacak kadar metin varsa kutunun kaydırma çubuklarına sahip olmasını sağlayın. Metnin bir kısmını HTML'den kaldırarak test edin, yalnızca kutunun sınırlarını aşmayacak uzunlukta içerik mevcut ise, kaydırma çubuklarının gizlenmesi gerekmektedir.

- -

A small box with a border and a vertical scrollbar.

- -

Bitmiş örneği oluşturabilmek için aşağıdaki canlı kodu düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 800)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

İkinci Görev

- -

Bu görevde bir görüntü kutunun içindedir, kutunun boyutlarından daha büyük olduğunda gözle görülür bir şekilde taşar. Resmin, kutudan taşan kısımlarının görüntülenmecek şekilde gizlenmesini sağlayın.

- -

A box with an image which fills the box but does not spill out the edges.

- -

Örneği resimde gösterildiği gibi yeniden oluşturabilmek için aşağıdaki canlı kodu düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1100)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarının editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

Değerlendirme veya daha fazla yardım

- -

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

- -

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

- -
    -
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. -
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: -
      -
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • -
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • -
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • -
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • -
    -
    3. -
diff --git a/files/tr/learn/css/building_blocks/overflowing_content/index.html b/files/tr/learn/css/building_blocks/overflowing_content/index.html deleted file mode 100644 index 4737025f4f..0000000000 --- a/files/tr/learn/css/building_blocks/overflowing_content/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: İçerik taşması -slug: Learn/CSS/Building_blocks/Overflowing_content -tags: - - Acemi - - Beginner - - Block Formatting Context - - CSS - - Data Loss - - Eğitim - - Learn - - Veri kaybı - - overflow - - taşma -translation_of: Learn/CSS/Building_blocks/Overflowing_content -original_slug: Öğren/CSS/CSS_yapi_taslari/Overflowing_content ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
- -

Bir kutuya sığmayacak kadar fazla içerik olduğunda taşma olur. Bu derste taşmanın ne olduğunu ve nasıl yönetilceğini öğreneceksin.

- - - - - - - - - - - - -
Ö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ç:Taşmayı ve onu nasıl yöneteceğini anlamak.
- -

Taşma nedir?

- -

CSS'deki her öğe bir kutudur. {{cssxref("width")}} ve {{cssxref("height")}} (veya {{cssxref("inline-size")}} ve {{cssxref("block-size")}}) değerleri atayarak bu kutuların boyutlarını ayarlayabiliriz. Eğer boyutlarını ayarladığımız kutunun içeriği, kutunun boyutları içerisine sığmaz ise içerik kutu dışına çıkar ve biz bunu taşma olarak adlanırırız. CSS, taşmayı yönetmek için çeşitli araçlar sağlar. CSS düzeninde ilerledikçe ve CSS yazdıkça, daha fazla taşma durumuyla karşılaşacaksın.

- -

CSS, "veri kaybını" önlemeye çalışır

- -

Taşma olduğunda CSS'in varsayılan davranışını gösteren iki örneği ele alım.

- -

İlk örnek, height niteliği kullanılarak kutunun uzunluğu kısaltılmıştır. Ardından ayrılan alanı aşan içerik ekliyoruz. İçerik kutunun dışına taşar ve aşağıdaki paragrafın üzerinde görüntülenir.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

- -

İkinci örnek, kutu içeriğinde bir kelime vardır ve kutu kelime için çok küçük olacak şekilde boyutlandırıldı. Bu yüzden metin kutunun dışına çıktı.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

- -

CSS'in neden bu kadar dağınık bir şekilde çalıştığını ve içeriği amaçlanan kapsayıcısının dışında görüntülediğini merak edebilirsin. neden taşan içeriği gizlemiyorsun? Neden kapsayıcının boyutunu tüm içeriğe uyacak şekilde ölçeklendirmiyorun?

- -

Mümkün olan her yerde, CSS içeriği gizlemez. Bu, veri kaybına neden olur. Veri kaybıyla ilgili sorun, fark edemeyebilmendir. Web sitesi ziyaretçileri fark etmeyebilir. Bir formdaki gönder düğmesi kaybolursa ve kimse formu tamamlayamazsa, bu büyük bir sorun olabilir! Bunun yerine, CSS içeriğin sığmadığı durumlarda görünür bir şekilde taşar. Bir sorun olduğunu görme olasılığın daha yüksektir. En kötü ihtimalle, bir site ziyaretçisi içeriğin düzensizliğini size bildirecektir.

- -

Bir kutuya width veya height ile sınırlarsan, CSS ne yaptığını bilmene güvenir. CSS, taşma potansiyelini yönettiğini varsayar. Genel olarak, kutu metin içerdiğinde blok boyutunu sınırlamak sorunludur. Siteyi tasarlarken beklediğinden daha fazla metin olabilir veya metin daha büyük olabilir. (Örn, kullanıcı yazı tipi boyutunu arttırabilir)

- -

Sonraki iki konu, boyutlandırmayı taşmaya daha az eğilimli şekillerde kontrol etmeye yönelik farklı yaklaşımları açıklar. Bununla birlikte, sabit bir boyuta ihtiyacın varsa, taşmanın nasıl davranacağını da kontrol edebilirsin.

- -

Taşma niteliği: overflow

- -

{{cssxref("overflow")}} niteliği bir öğenin taşma kontrolünün nasıl ele alınacağını belirler. Tarayıcıya nasıl davranması gerektiği konusunda talimat verme şeklimiz budur. Taşmanın varsayılan değeri visible'dir. Bu varsayılan ile içeriği taştığını da görebiliriz.

- -

Taşan içeriği gizlemek için de ayarlayabilirsin; overflow: hidden. Bu tam olarak söylediği şeyi yapar: taşmayı gizler. Bunun bazı içerikleri görünmez hale getirebileceğine dikkat edin. Bunu yalnızca içeriği gizlemek soruna neden olmaz ise yapmalısın.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

- -

Bunun yerine, belki de içerik taştığında kaydırma çubukları eklemek istersen; overflow: scroll. Taşma için yeterli içerik olmasa bile, görünür kaydırma çubuklarına sahip tarayıcılar kullanıldığında, bunları her zaman görüntülenir. Bu, kutudaki içerik miktarına bağlı olarak kaydırma çubuklarının görünmesi/kaybolması yerine düzeni tatarlı tutma avantajını sunar.

- -

Aşağıdaki kutudan bazı içerikleri kaldırın. Kaydırmaya gerek olmasa bile kaydırma çubuklarının nasıl kaldığına dikkat edin.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

- -

Yukarıdaki örnekte, sadece y ekseni için kaydırmamız gerekiyor, ancak her iki eksende de kaydırma çubukları görünüyor. Sadece y ekseninde kaydırma çubuğu olsun istiyorsak {{cssxref("overflow-y")}} niteliğini kullanmamız gerekiyor, tanımlama overflow-y: scroll.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

- -

{{cssxref("overflow-x")}} uzun kelimeleri barındırmak için önerilen bir yol olmasa da, bu nitelikle x ekseninde de kaydırabilirsin! Küçük bir kutuda uzun bir kelimen varsa, {{cssxref("word-break")}} veya {{cssxref("overflow-wrap")}} niteliklerini kullanmayı düşünebilirsin. Ek olarak, CSS'de öğeleri boyutlandırma bölümünde tartışılan yöntemlerden bazıları, değişken içerik miktarlarını daha iyi ölçeklendiren kutular oluşturmana yardımcı olabilir.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

- -

scroll'da olduğu gibi, kaydırma çubuğuna neden olacak kadar içerik olup olmadığına bakılmaksızın kaydırma boyutunda bir kaydırma çubuğu elde edersin.

- -
-

Not:  overflow niteliği kullanılarak oluşturulan kuralda hem x, hemde y eksenleri için aynı özellikte kaydırma çubukları elde edersin. İki anahtar kelime kullanılırsa; örneğin, overflow: scroll hidden'nin açılımı: overflow-x: scrool ve overflow-y: hidden olacak şekilde yorumlanacaktır.

-
- -

Kaydırma çubuklarının sadece kutuya sığamayacak kadar fazla içerik olduğunda görünmesini istiyorsan, overflow:auto kullanın. Bu, tarayıcının kaydırma çubuklarının görüntülenip görüntülenmemesinin gerekip gerekmediğini belirlemesini sağlar.

- -

Aşağıdaki örnekte, kutuya sığana kadar içeriği silin. Kaydırma çubuklarının kaybolduğunu görmelisin.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

- -
-

Not: Kaydırma çubuklarının görünüp görüntülenmesi sadece CSS'in elinde değildir. Eğer işletim sisteminin sistem ayarlarında kaydırma(sarma) çubuklarının görüntülenme şekliyle ilgili bir ayar uygulamışsan; tarayıcın ilk önce bu sistem ayarını dikkate alacaktır.(örn. Mac OS X, "Sistem Tercihleri -> Genel -> Sarma çubuklarını göster" ayarı)

-
- -

Taşma, Blok Biçimlendirme Kapsamı oluşturur

- -

scroll veya auto gibi bir taşma değeri kullandığında, Blok Biçimlendirme Kapsamı(Block Formatting Context - BFC) oluşturursun. overflow olarak tanımladığın kutunun içeriği bağımsız bir düzen oluşturur. Kutunun dışındaki hiç bir içerik bu kutuyu çevreleyen düzenin içerisine giremez. Tutarlı bir kaydırma deneyimi oluşturmak için tüm kutu içeriğinin gösterilebilmesi ve başka öğelerle örtüşmemesi gerektiğinden bu kaydırma davranışını mümkün kılar.

- -

Web tasarımında istenmeyen taşma

- -

Modern yerleşim yöntemleri (CSS düzeninde açıklanmıştır) taşmayı yönetir ve web sayfasında ne kadar içeriğin olacağı konusunda varsayımları veya bağımlılıkları olmadan çalışırlar.

- -

Bu her zaman bir ölçüt olmamıştır. Geçmişte bazı siteler, kutuların tabanlarını hizalamak için sabit yükseklikte kutular inşa ediyordu. Bu kutuların birbirleriyle hiçbir ilişkisi olmayabiliyordu ve bu kırılgandı. Eski bir uygulamada, içeriğin sayfadaki diğer içeriği kapladığı bir durumla karşılaşabilirisin. Artık bunun taşma ile gerçekleştiğini anlayabilirsin. İdeal olarak, düzeni sabit yükseklikteki kutulara bağlı kalmayacak şekilde yeniden düzenlemen gerekir.

- -

Bir site geliştirirken her zaman taşmayı aklında bulundurmalısın. Büyük ve az miktarda içeriğe sahip tasarımları test et. Metnin yazı tipi boyutlarını artır. Her zaman CSS'inin sağlam bir şekilde çalıştığından emin olmalısın. İçeriği gizlemek veya kaydırma çubukları eklemek için taşma değerinin değiştirilmesi, büyük olasılıkla birkaç belli kullanım durumu için illaki olacaktır.(Örn. Kaydırılmasına ihtiyaç duyduğun içeriğe sahip bir kutuda)

- -

Becerilerini test et!

- -

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. bkz. Becerilerini test edin: taşma.

- -

Özet

- -

Bu derste taşma kavramını tanıttım. CSS'in Varsayılan davranışının, taşan içeriği görünmez hale getirmekten kaçındığını anlamalısın. Olası taşmayı yönetebileceğini ve ayrıca kazara sorunlu taşmaya neden olunmadığından emin olmak için tasarımını test etmen gerektiğini benimsemelisin.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

- -

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'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html deleted file mode 100644 index 224b5b181a..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Nitelik seçiciler -slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors -tags: - - Attrubute - - Başlangıç - - Beginner - - CSS - - Learn - - Nitelik - - Ogrenim - - Selectors - - seçiciler -translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

HTML eğitimi çalışmalarından hatırladığın gibi, kullanılan öğenin, öğe hakkında daha ayrıntılı bilgi veren niteliklere sahip olabilir. CSS'de, belirli niteklilere sahip öğeleri hedeflemek için nitelik seçicileri kullanabilirsin. Bu ders, bu çok kullanışlı seçicileri nasıl kullanacağını gösterecek.

- - - - - - - - - - - - -
Ö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ç:Nitelik seçicilerin ne olduğunu ve nasıl kullanılacağını öğrenmek.
- -

Durum ve değer seçiciler

- -

Bu seçiciler, tek başına bir niteliğin varlığına (örneğin href) veya niteliğin değerine karşı çeşitli eşleşmelere dayalı olarak bir öğenin seçilmesini sağlar.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SeçiciÖrnekAçıklama
[nitelik]a[title]Belirtilen niteliğe sahip öğeleri eşleştirir(adı köşeli parantez içindeki değerdir)
[nitelik=değer]a[href="https://example.com"]Nitelik değerinin tırnak içerisindeki değerle tam olarak eşleşenleri seçer.
[nitelik~=değer]p[class~="special"] -


- Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya diğerlerinden boşlukla ayrılmış olan eşleşmeleri seçer.

-
[nitelik|=değer]div[lang|="zh"]Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya eşleşen değerle başlamış olması kaidesiyle hemen ardından tire(-) işaretiyle ayrılmış değerleri seçer.
- -

Aşağıdaki örnekte bu seçicilerin kullanıldığını görebilirsin.

- -
    -
  • li[class]: kullanarak bir seçiciyi herhangi bir sınıf niteliğine sahip öğeyle eşleştirebiliriz.
    • -
  • li[class="a"]: a sınıfına sahip bir öğeyle eşleşir. ancak öğe a sınıfından başka bir sınıfa da dahil edilmiş ise bu öğeyle eşleşmez.
    • -
  • li[class~="a"]:  a sınıfıyla tam olarak eşleşen ve boşlukla diğer sınıflardan ayrılarak tanımlanmış öğeleride seçer.
    • -
  • li[lang|="zh":  zh ile tam eşleşen veya zh- ile başlayan nitelik değerlerine sahip öğeleri seçer.
    • -
- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

- -

Alt dize eşleştirme seçicileri

- -

Bu seçiciler, niteliğin değeri içindeki dizelerde daha gelişmiş eşlemelere olanak tanır. Örneğin,  box-warning ve box-error sınıfların olsun ve siz box- dizesiyle başlayan her şeyi hedeflemek istiyorsan,  [class^="box-"] ile ikisini birde seçebilirsin. (veya [class|="box"] yukarıdaki bölümde açıklandığı gibi).

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SeçiciÖrnekAçıklama
[nitelik^=value]li[class^="box-"]nitelik değeri, çift tırnak içerisindeki dize ile başlıyorsa eşleştirmeyi sağlar.
[nitelik$=value]li[class$="-box"]nitelik değeri, çift tırnak içerisindeki dize ile bitiyorsa eşleştirmeyi sağlar.
[nitelik*=value]li[class*="box"]nitelik değerinin herhangi bir yerinde çift tırnak içerisindeki dize bulunuyorsa eşleştirme sağlar.
- -

(Dipnot: Düzenli ifadelerde kullanımları çok yaygındır ^ ile başlayanlar ve $ ile bitenler.)

- -

Bir sonraki örnek, bu seçicilerin kullanımını göstermektedit:

- -
    -
  • li[class^="a"]: a ile başlayan herhangi bir nitelik değeriyle eşleşir. Bu nedenle ilk iki liste öğesiyle eşleşir.
    • -
  • li[class$="a"]: a ile biten herhangi bir nitelik değeriyle eşleşir. Bu nedenle birinci ve üçüncü liste öğesiyle eşleşir.
    • -
  • li[class*="a"]: Herhangi bir nitelik değerinin, herhangi bir yerinde a dizesi geçiyorsa eşleşir. Bu yüzden tüm liste öğelerimizle eşleşir.
    • -
- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

- -

Büyük küçük harf duyarlılığı

- -

Esasen CSS büyük/küçük harfe duyarlı değildir. Fakat HTML belge dilinin gereksinimlerinden dolayı ASCII karakter aralığında büyük/küçük harfe duyarlı olacaktır. Eğer kurallarının büyük/küçük harfe duyarlı olmasını istemiyorsan i bildirimini köşeli parantezi kapatmadan önce bildirmen gerekmektedir. CSS'in büyük/küçük harfe duyarlılığı hedeflediği belge diline göre belirlenecektir.

- -

Aşağıdaki örnekte, ilk seçici, a ile başlayan bir değerle eşleşecektir — yalnızca ilk liste öğesiyle eşleşir çünkü diğer iki liste öğesi büyük A harfiyle başlar. ikinci seçici, büyük/küçük harf duyarlı bağrağını kullanır ve bu nedenle tümüyle eşleşir.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

- -
-

Not: Belge dilinin büyük/küçük harfe duyarlı olmadığı durumlarda, büyük/küçük harfe duyarlı eşlemeyi zoralayacak yeni bir değer daha vardır(s). Ancak bu, tarayıclarda daha az desteklenir ve HTML gereksinimlerinden dolayı kullanışlı değildir.

-
- -

Sonraki adımlar

- -

Artık nitelik seçicilerle işimiz bitti, bir sonraki dersimize devam edebiliriz ve  sözde sınıf ve sözde öğe seçiciler hakkında bilgi edinebilirsin.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/selectors/combinators/index.html b/files/tr/learn/css/building_blocks/selectors/combinators/index.html deleted file mode 100644 index 5141688e8e..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/combinators/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Birleştiriciler -slug: Learn/CSS/Building_blocks/Selectors/Combinators -tags: - - Birleştiriciler - - CSS - - Selectors - - combinators - - seçiciler -translation_of: Learn/CSS/Building_blocks/Selectors/Combinators ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

İşleyeceğimiz son seçiciler birleştiricilerdir; birleştiriciler diğer seçicileri, birbirleriyle ve belgedeki içeriğin konumu ile yararlı bir ilişki sağlaycak şekilde birleştirirler.

- - - - - - - - - - - - -
Ö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'de kullanılabilecek farklı birleştirici seçiciler hakkında bilgi edinmek.
- -

Soy(torun) birleştirici

- -

Soy birleştiricisi — tipik olarak tek bir boşluk ( ) karakterinden oluşur — en az iki seçiciden oluşan (ata, eşleşen n. soy, n. eşleşenin soyundan gelen n+1. eşleşen soy). Birinci seçicinin eşleştiği öğenin soyunda ikinci seçicinin eşleştiği öğe ile eşleşir. torunt seçici hiyararşide kaçıncı basamakta olduğu önemli değildir. Bir alt öğede olabir, 2., 3., 4. veya daha alt seviyelerdeki bir öğede olabir. Örneğin; aşağıda body'nin soyundan gelen article'nin soyundaki p ile eşleşirlir. article body'nin 50. torunu olabilir, p'de article'nin 15. torunu olabilir burada dikkat edilecek durum p ile body arasında herhengi bir yerde article'nin olması gerekmektedir. Tabiki buradaki kavram yazacağın kurala göre değişecektir.

- -
body article p
-
- -

Aşağıdaki örnekte, sadece .box sınıfının içindeki <p> öğesini eşleştiriyoruz.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

- -

Çocuk birleştirici

- -

Çocuk birleştirici, iki seçici arasına yerleştirilen büyüktür işaretidir (>). Yalnızça birinci seçiciyle eşleşen öğelerin doğrudan alt öğeleri içinde bulunan, ikinci seçiciyle eşleşen öğelerle eşleşir. Hiyerarşinin sonraki alt öğeleriyle bir eşleştirme gerçekleştirmez. Örneğin, <article> öğesinin doğrudan bir alt öğesi olan <p> öğesiyle eşleşen bir kural yazmak istersek:

- -
article > p
- -

Bir sonraki örnekte, içinde sıralı bir liste bulunan sırasız bir liste var. Sadece <ul> öğe seçicimin doğrudan bir alt öğesi olan <li> öğesiyle eşleşen bir kural yazıp. Onlara üst sınır çizgisi tanımladım.

- -

Buradaki <li> seçicinin çocuk olduğunu belirten > işaretini kaldırırsan, bir soy seçiciyle karşılaşırsın ve tüm öğeler kırmızı bir üst kenarlık alır.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

- -

Bitişik kardeş birleştirici

- -

Bitişik kardeş seçici (+), hiyararşinin aynı seviyesindeki başka bir öğenin hemen yanındaki öğeyi seçmek için kullanılır. Örneğin, <p> öğesinden sonra gelen <img> öğesini seçmek için:

- -
p + img
- -

Yaygın bir kullanım örneği, aşağıda olduğu gibi, bir başlığı takip eden paragrafa bir şeyler yapmaktır. Burada doğrudan bir <h1> bitişiğinde olan bir paragraf arıyoruz ve onu şekillendirmek istiyoruz.

- -

Eğer <h1> ve <p> arasına <h2> gibi başka bir seçici eklersen, paragrafın artık şekillenmediğini göreceksin.

- -

 {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

- -

Genel kardeş birleştirici

- -

Doğrudan bitişik olmasalar bile bir öğenin kardeşlerini seçmek istiyorsan, genel kardeş birleştiriciyi (~) kullanabilirsin. <p> öğesinden sonra gelen tüm <img> öğelerini seçmek için şunu yapardık.

- -
p ~ img
- -

Aşağıdaki örnekte,  <h1> öğesinden sonra gelen <p>'yi seçip, daha sonra gelen <div>'i atlıyoruz ve bir sonra ki <p> öğesinide seçiyoruz.

- -
-

Not: Genel kardeş seçici kendinden sonra gelen aynı hiyararşideki kardeşleriyle eşleşir. Kendinden önce gelen kardeşleriyle bir eşleşme sağlamaz.

-
- -

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

- -

Birleştiricileri kullanma

- -

Belgenin bir bölümünü seçmek için önceki derslerde keşfettiğin seçicilerden herhangi birini birleştiricilerle birleştirebilirsin. Örneğin, <ul> doğrudan çocukları ve "a" sınıfına sahip liste öğelerini seçmek istesem, aşağıdaki kodu kullanabilirim.

- -
ul > li[class="a"]  {  }
- -

ancak, belgenin çok özel bölümlerini seçen büyük seçici listeleri oluştururken dikkatli olun. Seçiciyi biçimlendirmedeki öğenin konumuna özelleştirdiğin için CSS kurallarını farkılı bir yerde kullanman zor olacaktır.

- -

Basit bir sınıf oluşturmak ve bunu söz konusu öğeye uygulamak genellikle daha iyidir. Bununla birlikte, belgendeki bir şeye ulaşman gerekiyorsa ve bir CMS tarafından oluşturulmuş olması hasebiyle HTML'ye erişemiyorsan, birleştiriciler hakkındaki bilgin çok yararlı olacaktır.

- -

Beçerilerini test et!

- -

Bu derste bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testlere bakmak isteyebilirsin —  Becerilerini test et: Seçiciler.

- -

Sıradaki

- -

Bu, seçicilerle ilgili derslerimizin son bölümüdür. Bir sonraki derste CSS'in başka bir önemli kısmına geçeceğiz —  CSS Kutu Modeli.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/selectors/index.html b/files/tr/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index d78c248dbf..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: CSS seçicileri -slug: Learn/CSS/Building_blocks/Selectors -tags: - - Acemi - - Attribute - - Beginner - - CSS - - Class - - Eğitim - - Learn - - Nitelik - - Pseudo - - Selectors - - Sozde - - id - - seçiciler - - sınıf -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

{{Glossary("CSS")}}, seçicileri {{glossary("HTML")}} belgeleri içerisindeki web sayfamızı oluşturan öğeleri hedeflemek için kullanılır. Biçimlendirilecek öğeleri seçerken ince hassasiyete sahip çok çeşitli CSS seçicileri mevcuttur. Bu derste ve alt derslerde, bunların nasıl çalıştırklarını görecek ve farklı türlerini ayrıntılı olacak iceleyeceğiz.

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

- -

Şimdiye kadar bir çoğuyla tanıştın. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayıcıya kural içindeki CSS bildirimlerinin uygulanabilmesi için hangi HTML öğesinin seçilmesi gerektiğini söyleyen ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen öğe veya öğeler, seçicinin konusu olarak anılır.

- -

Some code with the h1 highlighted.

- -

Daha önceki makalelerde, bazı farklı seçicilerle tanıştın ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendin — örn. bir h1 birinci dereceden başlıkları seçen seçiciyle .special gibi bir sınıf seçici.

- -

CSS'de seçiciler CSS seçicileri standardizasyonunda tanımlanır ve çalışabilmeleri için CSS'in diğer parçaları gibi tarayıcılarda desteğe sahip olmaları gerekir. karşılaşacağın seçicilerin çoğu, olgun bir özellik olan Seviye 3 Seçiciler standardizasyonunda tanımlanmıştır. Bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksın.

- -

Seçici listeleri

- -

Aynı CSS'i kullanan birden fazla öğenin bulunduğu durumlarda, her öğe için ayrı ayrı seçicilerle kural oluşturmaktansa, kuralın tüm öğelere uygulanması için kuralı seçici listelerinde birleştirebiliriz. Örn.i hem  h1 hemde .special sınıfı için aynı CSS'e kullanacaksam, bunu iki ayrı kural olarak yazabilirim.

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

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

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

Beyaz boşluk virgülden önce veya sonra geçerlidir. Ayrıca, her biri yeni bir satırdaysa, seçicileri daha okunabilir bulabilirsin.

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

Aşağıdaki etkileşimli örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi dene. Görsel sunum birleştirilden sonra aynı olmalıdır.

- -

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

- -

Seçicileri bu şekilde grupladığında, 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 öğesine stil uygulanmaya devam edecektir.

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

Ancak birleştirildiğinde, geçersiz sınıf bildiriminden dolayı kuralım tümü geçersiz sayılacaktır.

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

Seçici türleri

- -

Birkaç farklı seçici grubu vardır ve hangi tür seçiciye itiyacın olduğunu bilmek, çalışman için doğru aracı bulmana yardımcı olacaktır. Bu dersimizin alt derslerinde, farklı seçici gruplarına daha ayrıntılı olarak bakacağız.

- -

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

- -

Bu grup, HTML öğesini hedefleyen seçicileri <h1>.

- -
h1 { }
- -

Sınıfı hedefleyen seçicileri:

- -
.box { }
- -

ve bir kimliği hedefleyen seçicileri içerir:

- -
#unique { }
- -

nitelik seçicileri

- -

Bu grup, bir öğedeki belirli bir özelliğin varlığına bağlı olarak öğeleri seçmen için sana farklı yollar sunar:

- -
a[title] { }
- -

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

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

Sözde sınıf ve sözde öğeler

- -

Bu grub, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içeri. Örn., :hover sözde sınıfı fare işaretçisiyle üzerine gelinmiş bir bağlantıyı seçer.

- -
a:hover { }
- -

Ayrıca, öğenin kendisi yerine bir öğenin belili bir bölümünü seçen sözde öğeleri de içerir. Örn., ::first-line her zaman bir öğenin (<p> aşağıdaki durumda) içindeki ilk metin satırını seçer, sanki <span> öğesiyle etrafına sarılmış ve sonra seçilmiş gibi davranır.

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

Birleştiriciler

- -

Son seçici gurubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Örn., aşağıda<article> öğesini alt birleştirici (>) kullanarak öğenin doğrudan çocukları olan paragrafları seçer:

- -
article > p { }
- -

Sıradaki

- -

Bundan sonra MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki referans tablosuna bakabilir veya Eğitim bölümümüzdeki tür, sınıf ve kimlik seçicileri sayfasına geçerek yolculuğuna başlayabilirsin.

- -

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

- -

Seçiciler referans tablosu

- -

Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağını gösteren kılavuz sayflarına bağlantılar ve kullanabileceğin seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğin her seçici için MDN sayfasına bi bağlantı ekledim. Bunu, çalışmanda veya CSS ile denemeler yaparken bakabileceğin bir referans olarak kullanabilirsin.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SeçiciÖrnekCSS Eğitim sayfası
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çiciler
Nitelik seçicia[title] {  }Nitelik seçiciler
Sözde sınıf seçicilerp:first-child { }Sözde sınıflar
Sözde öğe seçicilerp::first-line { }Sözde sınıflar
Torun birleştiricilarticle pTorun birleştirici
Çocuk birleştiriciarticle > pÇocuk birleştirici
Bitişik kardeş birleştiricih1 + pBitişik kardeş
Genel Kardeş birleştiricih1 ~ 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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html deleted file mode 100644 index 5b2ecb8a1f..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ /dev/null @@ -1,414 +0,0 @@ ---- -title: Sözde sınıflar ve sözde öğeler -slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements -tags: - - Başlangıç - - Beginner - - CSS - - Eğitim - - Learn - - Pseudo - - Pseudo-class - - Pseudo-element - - Selectors - - Sozde Ogeler - - Sozde sınıflar - - seçiciler -translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

Bakacağımız bir sonraki seçici kümesi, sözde sınıflar ve sözde öğeler olarak adlandıracağız. Bunların sayıları oldukça fazladır ve genellikle özel amaçlara hizmet ederler. Bunları nasıl kullanacağını öğrendikten sonra, yapmaya çalıştığın bir görev için işe yarar bir şey olup olmadığını görmek için listeye göz atabilirsin. MDN referans sayfaları, her seçici için tarayıcı desteğini açıklamada her zamanki gibi yardımcı olur.

- - - - - - - - - - - - -
Ö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ç:Sözde sınıf ve sözde öğe seçicileri hakkında bilgi edinmek.
- -

Sözde sınıf nedir?

- -

Sözde sınıf, belirli bir durumda olan öğeleri seçen bir seçicidir. Örneğin, türlerinin ilk öğeleridirler veya fare imleci üzerlerine getirilmiştir. Belgenin bir kısmına bir sınıf uygulamış gibi davranma eğilimindediler, genellikle kurallardaki  fazla sınıfları azaltmana yardımcı olur ve  daha esnek, bakımı kolay bir kod sağlarlar.

- -

Sözde sınıflar, iki nokta üst üste ile başlayan anahtar kelimelerdir:

- -
:pseudo-class-name
- -

Basit sözde sınıf örneği

- -

Basit bir örneğe bakalım. Bir makaledeki ilk paragrafı daha büyük ve kalın yapmak istersek, bu paragrafa bir sınıf ekleyebilir ve ardından aşağıdaki ilk örnekte olduğu gibi bu sınıfa CSS uygulayabilirim:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

- -

Bunu sürdürmek gerçekten can sıkıcı olabilir — ya belgenin üstüne yeni bir paragraf eklenirse? Sınıfı yeni paragrafa taşımam gerekir. Sınıfı eklemek yerine {{cssxref(":first-child")}} sözde sınıfını kullanabilirim — bu her zaman belgedeki ilk alt öğeyi hedefleyecek ve artık HTML'yi düzenlememe gerek kalmayacaktır.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

- -

Tüm sözde sınıflar aynı şekilde davranır. Belgemizin belirli bir durumda olan bir kısmını hedeflerler ve HTML'mize bir sınıf eklemişiz gibi davranırlar. MDN'de bulunan diğer bazı örneklere bir göz atmak yararlı olacaktır:

- - - -
-

Not: Sözde sınıfları ve öğeleri, önünde herhangi bir öğe seçici olmadan yazmak geçerlidir. Yukarıdaki örnekte, öğe seçici olmadan :first-child'ı doğrudan yazabilirsin ve artık kural <article> öğesinin herhangi ilk çocuğu olan herhangi bir öğesiyle eşleşir — tür önemli değildir. first-child ile *:first-child'ın aynı işi yaptığını fakat evrensel seçici ile kullanımında okunurluluğun daha iyi olduğunu daha önceden açıklamıştır. Bununla birlikte, genellikle bundan daha fazla kontrole sahip olmak istenir, bu nedenle karekeristik özelliklere hakim olmalısın.

-
- -

Kullanıcı eylemi sözde sınıfları

- -

Bazı sözde sınıflar, yalnızca kullanıcının belgeyle etkileşim kurduğunda geçerlidir. Bazen dinamik sözde sınıflar olarak adlandırılan bu kullanıcı eylemi sözde sınıfları, kullanıcı onunla etkileşime girdiğinde öğeye bir sınıf eklemiş gibi davranır. Örnek verirsek:

- -
    -
  • :hover — Farenin işaretçisi hangi öğenin üzerindeyse o öğeyi seçer. Farenin konumu değiştikçe seçilen öğede değişir. Fare işaretçisini bu listenin başındaki :hover dizesinin üzerine getirerek değişimi görebilirsin.
    • -
  • :focus — Bu sadece, kullanıcı öğeye klavye kontrolleri kullanarak odaklanılan öğeyi seçer.
    • -
- -

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

- -

Sözde öğe nedir?

- -

Sözde öğeler de benzer şekilde davranırlar, ancak var olan öğelere bir sınıf uygulamak yerine, sanki hedeflediğin noktaya yeni bir HTML öğesi eklemişsin gibi davranırlar. Sözde öğeler çift iki nokta üst üste ile başlar  ::.

- -
::pseudo-element-name
- -
-

Not: İlk kullanılmaya başlanan bazı  sözde öğeler tek iki nokta üst üste sözdizimini kullandı, bu nedenle bunları bazen kodlarda veya örneklerde görebilirsin. Modern tarayıcılar, geriye dönük uyumluluk için ilk zamanlarda çıkan söz dizimlerini tek veya çift üstü üste nokta ile desteklemeye devam ederler.

-
- -

Örneğin, bir paragrafın ilk satırını seçmek istiyorsan, onu bir <span>  öğesine sarabilir ve ona bir CSS kuralı uygulayabilirsin; ancak, sarmaladığın kelime sayısı ana öğenin genişliğinden daha uzun veya daha kısa olsaydı bu başarısız olurdu. Bir satıra kaç kelimenin sığacağını bilemediğimiz için — ekran genişliği veya yazı tipi boyutu değişirse içeriğin şeklide değişecektir — bunu HTML öğesi ekleyerek sağlam bir şekilde yapmak imkansızdır.

- -

::first-line Sözde öğesi güvenilir bir şekilde bunu sizin için yapacaktır — kelimelerin sayısının çoğalıp/azalması, ekranın genişleyip/daralması veya yazı tipinin ve boyutunun değişmesi bunu etkilemeyecek halen ilk satırı seçmeye devam edecektir.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

- -

Sanki bir <span>, ilk biçimlendirilmiş satırın etrafını sihirli bir şekilde sarmış ve satır uzunluğu her değiştiğinde kendini güncelleştiriyormuş gibi davranır.

- -

Bu örnekte her iki paragrafın da ilk satırını seçtiğini görebilirsin.

- -

Sözde sınıfları ve sözde öğeleri birleştirmek

- -

İlk paragrafın ilk satırını kalın yapmak istersen, :first-child ve ::first-line seçicileri birbirine zincirleyebilirsin. Aşağıdaki CSS'i kullanması için önceki canlı örneği düzenlemeyi deneyin. Bir <article> öğesi içinde bulunan ilk öğenin<p> ilk satırını seçmek istediğimizi söylüyoruz.

- -
article p:first-child::first-line {
-  font-size: 120%;
-  font-weight: bold;
-}
- -

::before ve ::after ile içerik oluşturmak

- -

CSS kullanarak belgene içerik eklemek için kullanılan bir kaç özel sözde öğe vardır: content.

- -

Aşağıdaki canlı örnekte olduğu gibi bir metin dizisi eklemek için bunları kullanabilirsin. content özelliğinin metin dizesini değiştirmeyi dene ve çıktıdaki değişimi gözlemle. Ayrıca ::before sözde öğesini ::after olarak değiştir ve öğenin başına eklenen metnin ne tür bir değişim geçirdiğini gözlemle.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

- -

CSS'den metin dizeleri eklemek aslında web'de çok sık yaptığımız bir şey değildir. Çünkü bu metne bazı ekran okuyucular tarafından erişilemez ve gerektiğinde bu metinleri birilerinin bulması ve düzenlemesi zor olabilir.

- -

Bu sözde öğelerin daha geçerli bir kullanımı, bir simge eklemektir, örneğin aşağıdaki örnekte eklenen küçük ok, bir ekran okuyucusu tarafından okunmasını istemediğimiz gösterimdir:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

- -

Bu sözde öpeler, aynı zamanda sayfadaki herhangi bir öğe gibi biçimlendirilebilen boş bir dize eklemek için de sıklılkla kullanılır.

- -

Bu sonraki örnekte, ::before sözde öğesini kullanarak boş bir dizge ekledim. Bu boş dizeyi genişlik ve yükseklikle biçimlendirebilmem için bunu display: block olarak ayarladım. Artık CSS kullanarak onu normal bir öğe gibi şekillendirebiliyorum. Tanımlar üzerinde oynayarak görünüşünü ve davranışını değiştirebilirsin.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

- -

Özellik ile birlikte ::before ve ::after sözde öğelerin kullanımı, CSS'de "Oluşturulan İçerik" olarak adlandırılır ve bu tekniği çeşitli görevler için kullanıldığını sıklıkla görürsün. CSS Arrow Please, CSS ile bir ok oluşturmamızı sağlayan harika bir sitedir. Okunu oluştururken CSS'e incele, {{cssxref("::before")}} ve cssxref("::after")}} sözde öğelerinin kullanıldığını göreceksin. Bu seçicileri her gördüğünde, belgeye neyin eklendiğini görmek için {{cssxref("content")}} özelliğine bak.

- -

Referans bölümü

- -

Çok sayıda sözde sınıf ve sözde öğe vardır ve başvurlaracak bir listeye sahip olmak yararlıdır. Aşağıda, MDN'deki referans sayfalarına bağlantılarla birlikte listeleyen bir tablo bulunmakta. Bunu, hedeflemen için mevcut olan seçenekleri görmek için bir referans olarak kullanman takıldığın noktalarda faydalı olacaktır.

- -

Sözde sınıflar

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SeçiciAçıklama
{{ Cssxref(":active") }}Kullanıcının tarafından etkinleştirilen öğeyi seçecektir. Bu kullanıcının bir butona tıklaması/etkinleştirmesi ile bu eylemi bırakması arasında gerçekleşir.
{{ Cssxref(":any-link") }}Bağlantının herhangi bir durumuyla eşleşir :link ve :visited her iki bağlantı durumunun ikisiylede eşleşir.
{{ Cssxref(":blank") }}herhangi kullanıcı girişi olmayan  <input> öğesiyle eşleşir.
{{ Cssxref(":checked") }}Kullanıcının seçtiği öğelerle eşleşir. Örn., onay kutuları veya radyo düşmelerini tikini açtığında.
{{ Cssxref(":current") }}O anda görüntülenmekte olan öğeyle veya öğenin bir atasıyla eşleşir.
{{ Cssxref(":default") }}Bir dizi benzer öğe arasında varsayılan değeri olan bir veya daha fazla UI öğesiyle eşleşir.
{{ Cssxref(":dir") }}Öğenin yönlülüğüne göre eşleme yapmak için kullanılır (HTML dir niteliğinin değerine veya CSS direction özelliğindeki değere göre).
{{ Cssxref(":disabled") }}Devre dışı bırakılmış kullanıcı arabirimi öğeleriyle eşleşir. Herhangi bir şekilde etkileşime girilemez sadece varsayılan olarak görünebilir.
{{ Cssxref(":empty") }}Alt öğesi(çocukları) olmayan bir öğeyle eşleşir.
{{ Cssxref(":enabled") }}Herhangi bir şekilde etkileşime girilebilen öğeleri seçer.
{{ Cssxref(":first") }}Basılı Medya, içerisindeki ilk sayfayla eşleşir.
{{ Cssxref(":first-child") }}Kardeşler arasında birinci olan öğeyle eşleşir
{{ Cssxref(":first-of-type") }}Türdeş kardeşler arasındaki ilk öğeyi seçer.
{{ Cssxref(":focus") }}Odaklanmış bir öğeyle eşleşir.
{{ Cssxref(":focus-visible")}}Öğeler arasında klavye ile dolaşıldığında odağın görüntülenmesi gereken öğelerle eşleşir.
{{ Cssxref(":focus-within") }}Odaklanılabilen bir çocuğu olan öğeyle eşleşir.
{{ Cssxref(":future") }}Geçerli öğeden sonraki öğe ile eşleşir.
{{ Cssxref(":hover") }}Kullanıcının üzerine geldiği öğe ile eşleşir.
{{ Cssxref(":indeterminate") }}Değeri belirsiz olan UI öğeleriyle eşleşir, genellikle checkboxes.
{{ Cssxref(":in-range") }}Değeri belirtilen aralık içerisinde olan bir öğe ile eşleşir.
{{ Cssxref(":invalid") }}Geçersiz bir değer girilmiş olan <input> öğesiyle eşleşir.
{{ Cssxref(":lang") }}Dil tanımı olan bir öğe ile eşleşir (HTML'nin lang niteliğindeki değerleri baz alır).
{{ Cssxref(":last-child") }}Kardeşler arasındaki en son öğe ile eşleşir.
{{ Cssxref(":last-of-type") }}Türdeş kardeşler arasındaki en son öğe ile eşleşir.
{{ Cssxref(":left") }}Basılı Medya, içersindeki soldaki sayfalarla eşleşir.
{{ Cssxref(":link")}}Ziyaret edilmeyen bağlantılar ile eşleşir.
{{ Cssxref(":local-link")}}Geçerli belge ile aynı sitede bulunan sayfalara işaret eden bağlantılarla eşleşir.
{{ Cssxref(":is", ":is()")}}Seçicide belirtilen seçilerden herhangi biriyle eşleşir.
{{ Cssxref(":not") }}Bağımsız deşişken tarafından temsil edilmeyen öğe/öğeler ile eşleşir.
{{ Cssxref(":nth-child") }}Kardeş listesindeki öğeler ile eşleşir — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)
{{ Cssxref(":nth-of-type") }}Türdeş kardeş listesindeki öğeler ile eşleşir. — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)
{{ Cssxref(":nth-last-child") }}Kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)
{{ Cssxref(":nth-last-of-type") }}Türdeş kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)
{{ Cssxref(":only-child") }}Kardeşi olmayan bir öğeyle eşleşir.
{{ Cssxref(":only-of-type") }}Türdeş kardeşi olmayan bir öğeyle eşleşir.
{{ Cssxref(":optional") }}Örnek girişlerin gösterildiği öğeler ile eşleşir.
{{ Cssxref(":out-of-range") }}Girilen değerin belirtilen aralığın dışında olduğu öğelerle eşleşir.
{{ Cssxref(":past") }}Geçerli öğeden önceki öğelerle eşleşir.
{{ Cssxref(":placeholder-shown") }}Tanımlayıcı bilgileri gösteren öğeler ile eşleşir.
{{ Cssxref(":playing") }}Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile oynatıldığında eşleşir..
{{ Cssxref(":paused") }}Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile duraklatıldığında eşleşir.
{{ Cssxref(":read-only") }}Kullanıcı tarafından değeri değiştirilemeyen bir öğe ile eşleşir.
{{ Cssxref(":read-write") }}Kulanıcı tarafından değeri değiştirilebilen bir öğe ile eşleşir.
{{ Cssxref(":required") }}Kullanıcı tarafından bir değer girilmesi gereken öğelerle eşleşir.
{{ Cssxref(":right") }}Basılı Medya, sağ sayfalarla eşleşir.
{{ Cssxref(":root") }}Belgenin kök öğesiyle eşleşir.
{{ Cssxref(":scope") }}scope öğesi olan herhangi öğeyle eşleşir.
{{ Cssxref(":valid") }}Geçerli bir değer girilmiş <input> öğesiyle eşleşir.
{{ Cssxref(":target") }}Geçerli bir URL'yi hedefleyen öğeyle eşleşir.
{{ Cssxref(":visited") }}Daha önceden ziyaret edilmiş bağlantılarla öşleşir.
- -

Sözde öğeler

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SeçiciAçıklama
{{ Cssxref("::after") }}Kaynak öğenin gerçek içeriğinden sonra görünen biçimlendirilebilir bir öğeyle eşleşir.
{{ Cssxref("::before") }}Kaynak öğenin gerçek içeriğinden önce görünen biçimlendirilebilir bir öğeyle eşleşir.
{{ Cssxref("::first-letter") }}Öğe içeriğinin ilk harfiyle eşleşir.
{{ Cssxref("::first-line") }}Öğe içeriğinin ilk satırıyla eşleşir.
{{ Cssxref("::grammar-error") }}HTML sayfasında tarafıyıcı tarafından işaretlenen bir gramer hatasıyla eşleşir .
{{ Cssxref("::marker") }}Genellikle bir madde işareti veya numara içeren bir liste öğesinin işaret kutusuyla eşleşir.
{{ Cssxref("::selection") }}Belgenin seçilen kısmıyla eşleşir.
{{ Cssxref("::spelling-error") }}HTML sayfasında tarayıcı tarafından işaretlenen yazım hatasıyla eşleşir.
- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html deleted file mode 100644 index e5260643f8..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: 'Tür, sınıf ve Kimlik seçicileri' -slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors -tags: - - Başlangıç - - Beginner - - CSS - - Class - - Kimlik - - Learn - - Ogrenim - - Selectors - - id - - seçiciler - - sınıf -translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

Bu derste, muhtemelen çalışmalarında en sık kullanacağın en basit seçicilerden bazılarını inceleyeceğiz.

- - - - - - - - - - - - -
Ö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ç:Farklı CSS seçicileri hakkında bilgi edinmek.
- -

Tür seçiciler

- -

Bir tür seçici, belgende bir HTML öğesini seçtiği için bazen etiket seçici veya  öğe seçici olarak anılır. Aşağıdaki örnekte, span, em ve strong seçicilerini kullandık.

- -

<h1> etiketini seçip rengini maviye dönüştüren bir CSS kuralı eklemeyi deneyin.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

- -

Evrensel seçici

- -

Evrensel seçici bir yıldız işaretiyle (*) gösterilir. Belgedeki(veya başka bir öğe ve bir alt birleştirici ile kullanmışsa ana öğenin içindekileri) her şeyi seçer. Aşağıdaki örnekte, tüm öğelerdeki kenar boşluklarını kaldırmak için evrensel seçiciyi kullanıyoruz. Bu, tarayıcının belgemizdeki başlıklara ve paragraflara varsayılan olarak eklediği kenar boşluklarını sıfırlayan bir kural ekler.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

- -

Bu tür davranışlar bazen tüm tarayıcı stilini kaldıran "stil sayfalarını sıfırlama"'da görünür. Evrensel seçici genel değişiklikler yaptığı için, onu aşağıda açıklandığı gibi çok özel durumlar için kullanıyoruz.

- -

Seçicilerinin daha kolay okunmasını sağlamak için evrensel seçiciyi kullanma

- -

Evrensel seçicinin bir kullanımı, seçicilerin daha kolay okunmasını ve ne yaptıkları açısından daha açık olmasını sağlamaktır. Örneğin,  <article> öğesinin ilk çocuğunu ve öğenin altında içindeki çocuklarınında ilk çocuklarını seçmek istersek, {{cssxref(":first-child")}} sözde sınıfını kullanabilirsin. <article> öğe seçiciyle birlikte bir alt seçici olarak Sözde sınıflar ve sözde öğeler kullanımı:

- -
article :first-child {
-  font-weight: bold;
-}
- -

Bunla birlikte, bir öğenin ilk çocuğu olan <article> öğesini  seçmek için kullanılan  article:first-child ile bu kullanım karıştırılabilinir. Aradaki beyaz boşluk kodların içerisinde gözden kaçabilir.

- -

Bu karışıklığı önlemek için, :first-child sözde sınıfından önce evrensel seçiciyi ekleyebiliriz. Bu, <article> öğesinin de dahil soyundan gelen çoçuklarının, torunlarının.... ilk çocuğunu seçmek için kullanılır.

- -
article *:first-child {
-  font-weight: bold;
-}
- -

Her ikisi de aynı şeyi yapsa da, okunabilirliği önemli ölçüde arttırmış olduk.

- -

Sınıf seçiciler

- -

Sınıf seçici bir nokta (.) karakteriyle başlar. Belgedeki sınıfın uygulandığı her şeyi seçecektir. Aşağıdaki canlı örnekte; highlight adlı bir sınıf oluşturduk ve bunu belgemdeki birkaç yere uyguladık. Böylece CSS kuralları sınıfın uygulandığı tüm öğelere vurgulanır.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

- -

Belirli unsurlara göre sınıfları hedeflemek

- -

Uygulanan sınıfla birlikte belirli öğeleri hedefleyecek bir seçici oluşturabilirsin. Bir sonraki örnekte, highlight sınıfına sahip <span> ve <h1> öğelerimize farklı stillerle vurgulayacağız.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

- -

Bu yaklaşım, bir kuralın kapsamını azaltır. Kural, yalnızca o belirli öğe ve sınıf kombinasyonu için geçerli olacaktır. Kuralın diğer öğeler için de geçerli olması gerektiğine karar verirsen, başka bir seçici eklemen gerekir.

- -

Birden fazla sınıf uygulanmış bir öğeyi hedeflemek

- -

Bir öğeye birden fazla sınıf uygulayabilir ve bunları ayrı ayrı hedefleyebilirsin veya yalnızca seçicideki tüm sınıflar mevcut olduğunda öğeyi seçerbilirsin. Bu, sitende farklı şekillerde birleştirilebilen bileşenler oluştururken yardımcı olabilir.

- -

Aşağıdaki örnekte, <div> içerisinde bir notumuz var. Gri kenar, kutu bir notebox sınıfına dahilse uygulanır. Kutu ayrıca warning veya danger sınıflarından birine dahilse {{cssxref("border-color")}}'unu değiştirebiliriz.

- -

Tarayıcıya, yalnızca iki sınıf uygulanmışsa, aralarında beyaz boşluk olmadan onları birbirine zincirleyerek eşleştirmek istediğimizi söyleyebiliriz. Sonuncu <div>'in sadece danger sınıfına dahil olduğu için stilin uygulanmadığını göreceksin.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

- -

Kimlik seçiciler

- -

Kimlik seçici nokta karakterinden ziyade diyez # karakteriyle başlar. Ancak sınıf seçici ile aynı şekilde kullanılır. bununla birlikte, bir kimlik her sayfada yalnızca bir kez kullanılabilir ve öğelere  tek bir kimlik(id) uygulanabilir. Kimlik uygulanmış bir öğe seçebilir ve hem öğe hem de kimlik eşleşirse öğeyi hedeflemek için kimliğin önüne bir tür seçici ekleyebilirsin. Aşağıdaki örnekte bu kullanımların her ikisini de görebilirsin.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

- -
-

Uyarı: Bir belgede aynı kimliği birden çok kez kullanmak stil oluşturma amacıyla işe yarayabilir, ancak bunu yapmayın. Geçersiz kodla sonuçlanır ve birçok yerde garip davranışlara neden olabilir.

-
- -
-

Not: Özgüllük dersinde öğrendiğimiz gibi, bir kimliğin yüksek özgüllüğü vardır. Diğer çoğu seçiciyi geçersiz kılacaktır. Çoğu durumda, bir öğeye bir kimlik yerine bir sınıf eklemek tercih edilir. Ancak, öğeyi hedeflemenin tek yolu kimliği kullanmaksa — işaretlemeye erişimin olmadığı ve onu düzenleyemediğin için — bu işe yarayacaktır.

-
- -

Sonraki derste

- -

Nitelik seçicileri inceleyerek seçicileri keşfetmeye devam edeceğiz.

- -

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

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html deleted file mode 100644 index 4794dbebae..0000000000 --- a/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: CSS'de öğeleri boyutlandırma -slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS -tags: - - Acemi - - Beginner - - CSS - - Eğitim - - Intrinsic size - - Learn - - boyutlandırma - - goruntu alanı birimleri - - maksimum boyut - - max size - - min size - - minimum boyut - - percentage - - sizing - - viewport units - - yüzde - - İç boyut -translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS -original_slug: Öğren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS ---- -

https://wiki.developer.mozilla.org/tr/docs/%C3%96%C4%9Fren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS$edit

- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
- -

Şimdiye kadar ki derslerde, CSS kullanarak bir web sayfasındaki öğeleri buyutlandırmanın çeşitli yollarıyla karşılaştık. Tasarımındaki özelliklerin ne kadar çok olacağını anlamak önemlidir ve bu derste, öğelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yollarını özetleyip, gelecekte size yardımcı olacak boyutlandırma ile ilgili birkaç terimi 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'de nesneleri boyutlandırmanın farklı yollarını anlamak.
- -

Nesnelerin doğal veya içsel boyutu

- -

HTML öğeleri, herhangi bir CSS'den etkilenmeden önce ayarlanmış doğal bir boyuta sahiptir. Görüntü buna iyi bir örnektir. Bir <image>'nin sayfaya gömdüğü görüntü dosyasında, tanımlı bir genişlik ve yükseklik vardır. Bu boyut, görüntünün kendisinden gelen gerçek boyut olarak tanımlanır.

- -

Bir sayfaya bir resim yerleştirirsen ve yüksekliğini, genişliğini <img> etiketi veya CSS üzerindeki niteklikleri kullanarak değiştirmezsen, görüntü iç boyut kullanılarak görüntülenir. Dosyanın boyutunu görebilmen için aşağıdaki örnekte görüntüyü bir çerçevenin içerisinde gösterdim.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

- -

Boş bir {{htmlelement("div")}}, kendine ait bir boyuta sahip değildir. HTML'ye içeriği olmayan bir {{htmlelement("div")}} ekleyip, buna da bir kenarlık verirsen, sayfada düz bir çizgi görürsün. Bu, öğenin daraltılmış kenarlığıdır — öğemize yükseklik verebilecek bir içerik yoktur. Aşağıdaki örneğimizde düz çizgi, içinde bulunduğu kutunun sınır genişliğine kadar uzanır, çünkü bu bir blok seviyesi öğesidir, size aşına olmaya başlaması gereken bir davranış. İçerik olmadığı için yüksekliği(veya blok boyuntunda boyutu) yoktur.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

- -

Yukarıdaki örnekte, boş öğenin içine biraz metin eklemeyi deneyin. Kenarlık şimdi bu metni içerir, çünkü öğenin yüksekliği içerik tarafından belirlenir. Dolayısıyla <div> blok boyutundaki boyutu içeriğin boyutundan gelmektedir. Yani içeriğindeki öğenin gerçek boyutuyla öğemizin boyutu belirlenir.

- -

Belirli bir boyut belirleme

- -

Elbette tasarımımızdaki öğelere belirli bir boyut verebiliriz. Bir öğenin boyutunu biz belirtirsek buna dışsal boyut denir. Yukarıdaki <div> örneğimizi ele alalım — ona belirli bir {{cssxref("width")}} ve {{cssxref("height")}} nitelikleri ile boyutunu belirttiğimizde içeriğine, ne gelirse gelsin boyut sabit kalacaktır. Taşma konusundaki dersimizde öğrendiğimiz gibi, sabit bir yüksekliğe sahip öğenin, alanına sığamayacak kadar büyük bir içerik gelirse, bu içeriğin öğenin sınırları dışına taşmasına neden olur.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

- -

Taşma sorunu nedeniyle, web tasarımı yaparken öğelere vereceğin yüksekliklere çok dikkat etmelisin.

- -

Yüzdeler kullanma

- -

Yüzdeler birçok yönden uzunluk birimleri gibi davranır ve değerler ve birimlerle ilgili derste tartıştığımız gibi, genellikle uzunluklarla birbirinin yerine kullanılabilirler. Bir yüzde kullanırken, yüzdenin neyi baz alacağını bilmen çok önemlidir. Kutu içinde kutu olması durumunda, alt kutunun genişliğini yüzde ile belirtirsen, alt kutunun genişliği üst kutunun genişliğinin yüzdesi olacaktır.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

- -

Bunun nedeni, yüzdelerin kapsayıcı bloğunun boyutuna göre çözülmesidir. <div>'e yüzde uygulanmaz ise, blok düzeyinde bir öğe olduğu için, içinde bulunduğu alanın %100'ünü kaplar. %1 genişlik verirsek, bu normalde dolduracağı alanın %1 olur.

- -

Yüzde kenar boşlukları ve dolgu

- -

Eğer margins ve padding niteliklerini yüzdelik olarak ayarlandığında, bazı garip davranışlar sergiler. Aşağıdaki örnekte bir kutumuz var. İç kutuya {{cssxref("margin")}}  %10 ve {{cssxref("padding")}} %10 değerlerini verdik. Kutunun üstündeki ve altındaki dolgu ve kenar boşluğu, sol ve sağdaki kenar boşluğuyla aynı boyuttadır.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

- -

Mesela, üst ve alt kenar boşluklarını öğenin yüksekliğinin bir yüzdesi, sol ve sağ kenar boşluklarının öğenin genişliğinin bir yüzdesi olmasını bekleyebilirsin. Ancak durum bu şekilde değildir!

- -

Yüzdelik cinsinden kenar boşluğu ve dolgu niteliğini tanımladığında, yüzdelik ebeveynin satır içi boyutundan hesaplanır — yatay bir dilde çalışırken genişlik istenilmeyen bir sonuç verecektir. Bu nedenle, tüm kenarların kenar boşlukları ve dolgu genişlikleri eşit olacaktır — tüm kenarlara %10 değeri atandığı için. Yüzdelikleri bu niteliklerde kullandığında, bu davranışa dikkat etmen gerekir.

- -

min- ve max- boyutlar

- -

Her şeye sabit bir boyut vermenin yanı sıra, CSS'de bir öğeye alabilecekleri minimum ve/veya maksimum bir boyutta tanımlayabiliriz. Değişken miktarda içerik barındırabilecek bir kutunuz varsa ve her zaman en azından belili bir yükseklikte olmasını istersen, {{cssxref("min-height")}} niteliğiyle bunu ayarlayabilirsin. Kutunun içeriği boş dahi olsa en azından bu boyuta sahip olacaktır. Fakat kutunun içeriği minimum alanın taşıyabileceğinden daha fazla içerik almaya başladığında, kutunun boyutları içeriği kapsayabileceği boyuta genişleyecektir.

- -

Aşağıdaki örnekte, her iki kutununda {{cssxref("min-height")}} niteliği 150 piksel olarak tanımlandı. Soldaki kutu 150 piksel yüksekliğindedir; sağdaki kutu daha fazla alan gerektiren içeriğe sahip olduğu için 150 pikselden daha uzundur.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

- -

Bu teknik değişken içeriğe sahip olan öğelerde taşmayı önelemek için çok kullanışlıdır.

- -

Bunun diğer bir yaygın kullanımı ise görüntüleri kendi iç genişliklerinde görüntülemek için yeterli alanın olmadığı durumlarda, görüntünün gösterilmek istenilen kutunun genişliğinden daha fazla genişleğe sahip olmasını engellemek için {{cssxref("max-width")}} niteliğini kullanmaktır.

- -

Misal; width: 100% olarak tanımladığında görüntü içinde bulunduğu kutunun genişliğinden daha fazla olmayacaktır fakat görüntü kutunun genişliğinden küçük oluduğu durumlarda görüntü ebeveyninin genişliği kadar bir genişliğe sahip olması istendiği için büyütülecekti ve bu büyüme görüntünün pikselli görünmesine sebeb olurdu.

- -

Bunun yerine max-width: 100% tanımını kullanırsan, görüntü ebeveyninin genişliğinden daha büyük olsa bile ebeveyninin genişliğinin %100'ne geldiğinde duracaktır ve ebeveyninin genişliğinden küçük olması durumunda, görüntünün boyutu ebeveyninin boyutuna genişletilmeyip içsel boyutunda görüntüleneceğinden görüntüde bir bozulma olmayacaktır.

- -

Aşağıdaki örnekte aynı resmi üç kez kullandık. İlk görüntüye width: 100% tanımlaması yaptık ve kendisinden daha büyük bir kutu içerisine yerleştirdik. Bu nedenle kutunun genişliğine genişledi ve görüntünün pikselleri görünür hale geldi. İkinci görüntü max-width: 100% tanımlası yapıldı, bu nedenle kutuyu duldurmak için genişlemiyor sadece kendi iç boyutu kadar genişliyor. üçüncü kutu yine max-width: 100% tanımlası yapıldı ve kendisinden daha küçük genişliğe sahip bir kutunun içerisine yerleştirildi; bu durumda kutuya sığmak için nasıl küçüldüğünü görebilirsin.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

- -

Bu teknik, görüntüleri duyarlı hale getirmek için kullanılır, böylece daha küçük bir kutuda görüntülendiğinde uygun bir şekle bürünür. Büyük boyutlu resimleri görüntülemek için bu tekniği kullanmayın, bunun yerine büyük resimleri tarayıcı için uygun boyutta küçültmelisin. Görsellerin, tasarımda gösterildikleri boyuttan daha büyük olması, görsellerin indirilme süresini uzatacağından sitenin yavaşlamasına neden olur ve kotalı bir bağlantıya sahip kullanıcılara daha fazla ücrete mâl olabilir.

- -
-

Not: Duyarlı görüntüleme teknikleri hakkında daha fazla bilgi edinin.

-
- -

Görüntü alanı birimleri

- -

Bir siteyi görüntülemek için kullandığın tarayıcının, web sayfasını görüntülediği pencerenin de bir boyutu vardır. CSS'de, bu alanla da ilgili birimlerimiz de vardır — görüntüleme alanı genişliği(vw) ve görüntüleme alanı yüksekliği(vh) birimi. Bu birimleri kullanarak, kullanıcının görüntüleme alanına göre herhangi bir öğeyi boyutlandırabilirsin.

- -

1vw görüntüleme alanının genişliğinin %1'ine, 1vh'de görüntüleme alanının yüksekliğinin %1'ine eşittir. Bu birimleri kutuları, metinleri boyutlandırmak için kullanabilirsin. Aşağıdaki örnekte 20vh ve 20vw boyutlarında bir kutumuz var. Kutu içerisinde font-size'ı 10vh olan bir "A" harfi var.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

- -

Eğer vh ve vw değerlerini değiştirirsen, kutunun ve yazı tipinin boyutuda değişecektir. Ayrıca görüntüleme alanının boyutunuda değiştirilmesi, kutu ve yazı tipinin boyutunun görüntüleme alanına bağladığımız için bunlarında boyutu değişecektir. Görüntüleme alanın değiştirildiğinde örnekteki boyutlarında değişmesini istiyorsan örneği yeni bir pencerede açın(yukarıdaki örnek <iframe> içerisinde gömülü olduğu için görüntüleme alanı olarak gömülü olduğu pencerenin değerlerine göre hareket edecektir)

- -

Nesneleri görüntüleme alanına göre boyutlandırmak tasarımlarında faydalı olabilir. Örneğin, içeriğinin geri kalanından önce tam sayfa görüntülemek istediğin bir bölümün olmasını istiyorsan, sayfanın bu bölümünün yüksekliği 100vh olarak tanımlarsan,  içeriğin geri kalanı sayfanın altına itilir ve sayfan açıldığında sadece istediğin bölüm gözükür. Diğer içerikler için sayfanın kaydırılması gerekir.

- -

Becerilerini test et!

- -

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test et: Boyutlandırma.

- -

Özet

- -

Bu ders de web'deki öğeleri boyutlandırırken karşılaşabileceğin bazı temel sorunların bir özetini anlattım. CSS Düzenine geçtiğinde, farklı düzen yöntemlerinde uzmanlaşmanda boyutlandırma çok önemli hale gelecektir, bu nedenle devam etmeden önce buradaki kavramları iyi anlamaya çalışmalısın.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/sizing_tasks/index.html b/files/tr/learn/css/building_blocks/sizing_tasks/index.html deleted file mode 100644 index a37b752372..0000000000 --- a/files/tr/learn/css/building_blocks/sizing_tasks/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Boyutlandırma' -slug: Learn/CSS/Building_blocks/Sizing_tasks -tags: - - Acemi - - Beginner - - CSS - - Example - - Örnek -translation_of: Learn/CSS/Building_blocks/Sizing_tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Sizing_tasks ---- -
{{LearnSidebar}}
- -
- -

Bu görevin amacı CSS'de Öğeleri Boyutlandırma dersinde incelediğimiz bazı bazı değerler ve birimler hakkındaki öğrendiklerinizi kontrol etmenize yardımcı olmaktır.

- -
-

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

- -

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.

-
- -

Birinci Görev

- -

Bu görevde iki kutunuz var. İlki, yüksekliğin en az 100 piksel olacak şekilde boyutlandırılmalıdır, kutu, içerik alanına sığabilecek miktardan daha az içeriğe sahip olsada bile bu boyutu korumalıdır. Ayrıca kutunun içerik alanına sığabilecek miktardan daha fazla içerik girildiğinde, içerik kutunun sınırlarını aşmamalıdır. Taşma engellenecek.

- -

İkinci kutu 100 piksel yüksekliğinde sabitlenmelidir, böylelikle içeriğinin alabileceğinden fazla içerik alırsa taşma gerçekleşecektir.

- -

Two boxes one with overflowing content

- -

Aşağıdaki örneği resimdeki gibi görünebilemesi için kodu düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin Kaynak Kodu, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

İkinci Görev

- -

Bu görevde başka bir kutu içeren bir kutu vardır. Sizin göreviniz, iç kutuyu dış kutunun geniliğinin %60'ı kapsacak şekilde tanımlamaktır. {{cssxref("box-sizing")}} niteliği {{cssxref("border-box")}}olarak ayarlanmıştır; bu dolgu ve kenarlığın toplam genişliğe dahil edildiği anlamına gelmektedir. Ayrıca, bu yüzdenin hesaplanacağı boyut olarak genişliği (veya satır iyi boyutu) kullanarak iç kutu dolgusunu %10 olarak tanımlamalısınız.A box with another box nested inside

- -

Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin kaynak kodu, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

Görev Üç

- -

Bu görevde, kutularda iki resim var. Bir görüntü kutudan daha küçük, diğeri daha büyük ve kutudan taşmış durumda. Kutunun duyarlı olduğunu ve bu nedenle büyüyüp küçülebileceğini hayal ederseniz, küçük ve büyük görüntünün kutularına göre boyutlandırılması ve küçük görüntünün gerilmemesi için gerekli kodları yazın.

- -

Two boxes with images in

- -

Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin kaynak kodu, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

Değerlendirme veya daha fazla yardım

- -

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

- -

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

- -
    -
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. -
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: -
      -
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • -
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • -
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • -
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • -
    -
    3. -
diff --git a/files/tr/learn/css/building_blocks/styling_tables/index.html b/files/tr/learn/css/building_blocks/styling_tables/index.html deleted file mode 100644 index d6983c73f9..0000000000 --- a/files/tr/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Tabloları şekillendirme -slug: Learn/CSS/Building_blocks/Styling_tables -tags: - - Acemi - - Article - - Beginner - - CSS - - CodingScripting - - Guide - - Komut Dosyası - - Makale - - NeedsUpdate - - Rehber - - Stil - - Styling - - Tables - - Tablo -translation_of: Learn/CSS/Building_blocks/Styling_tables -original_slug: Öğren/CSS/CSS_yapi_taslari/Styling_tables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
- -

Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı iş değildir, ancak bazen bunu hepimiz yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin vurgulanmasıyla HTML tablolarının güzel görünmesi için bir rehber sağlar.

- - - - - - - - - - - - -
Ö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ç:HTML tablolarının nasıl etkili bir şekilde biçimlendirileceğini öğrenmek.
- -

Standart bir HTML tablosu

- -

Standart bir HTML tablosuna bakarak başlayalım. HTML tablo örneklerinin çoğu ayakkabılar, hava durumu veya çalışanlarlar hakkındadır. Aşağıda İngiltere'nin ünlü punk gruplarının bulunduğu bir tablo bulunmakta. Biçimlendirme şöyle görünür.

- -
<table>
-  <caption>A summary of the UK's most famous punk bands</caption>
-  <thead>
-    <tr>
-      <th scope="col">Band</th>
-      <th scope="col">Year formed</th>
-      <th scope="col">No. of Albums</th>
-      <th scope="col">Most famous song</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Buzzcocks</th>
-      <td>1976</td>
-      <td>9</td>
-      <td>Ever fallen in love (with someone you shouldn't've)</td>
-    </tr>
-    <tr>
-      <th scope="row">The Clash</th>
-      <td>1976</td>
-      <td>6</td>
-      <td>London Calling</td>
-    </tr>
-
-      ... some rows removed for brevity
-
-    <tr>
-      <th scope="row">The Stranglers</th>
-      <td>1974</td>
-      <td>17</td>
-      <td>No More Heroes</td>
-    </tr>
-  </tbody>
-  <tfoot>
-    <tr>
-      <th scope="row" colspan="2">Total albums</th>
-      <td colspan="2">77</td>
-    </tr>
-  </tfoot>
-</table>
- -

Tabloyu güzelce {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, vb. öğe ve niteliklerle işaretledikten sonra ne yazık ki pek iyi görünmüyor.(Tablonun HTML versiyonunu görmek için punk-bands-unstyled.html sayfasına bakın.):

- -

- -

Yalnızca varsayılan tarayıcı stili ile sıkışık, okunması zor ve sıkıcı görünüyor. Bunu düzeltmek için biraz CSS kullanmamız gerekiyor.

- -

Tablomuzu şekillendirmek

- -

Tablo örneğimizi birlikte şekillendirmeye çalışalım.

- -
    -
  1. Başlangıç olarak, kaynak kodları ve iki adet resmi(noise ve leopardskin) bilgisayarınıza indirin. İndirmiş olduğunuz üç dosyayıda bilgisayarınıza bir klasöre kopyalayın.
    2. -
  2. Ardından, adı style.css olan bir dosya oluşturun ve diğer indirmiş olduğunuz dosyalarla aynı klasörün içerisine kaydedin.
    3. -
  3. Aşağıdaki HTML satırını sayfanızın içine yerleştirerek CSS'i {{htmlelement("head")}} etiketi içerisinde HTML'ye bağlayın. - 
    <link href="style.css" rel="stylesheet" type="text/css">
    -
    4. -
- -

Aralık ve düzen

- -

Yapmamız gereken ilk şey, tablonun düzenini ve hücreler arasındaki aralığı tanımlamak - varsayılan tablo stili çok sıkışık! Bunu yapmak için aşağıdaki CSS'yi style.css dosyasına eklemelisin:

- -
/* spacing */
-
-table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
-  border: 3px solid purple;
-}
-
-thead th:nth-child(1) {
-  width: 30%;
-}
-
-thead th:nth-child(2) {
-  width: 20%;
-}
-
-thead th:nth-child(3) {
-  width: 15%;
-}
-
-thead th:nth-child(4) {
-  width: 35%;
-}
-
-th, td {
-  padding: 20px;
-}
- -

Dikkat edilmesi gereken en önemli kısımlar aşağıdaki gibidir:

- -
    -
  • Bir {{cssxref("table-layout")}} niteliğine atanan fixed değeri tablonun daha öngürülebilir davranmasına sağlayarak çalışma alanımızda daha iyi bir ortam oluşturmuş oluruz. Normalde, tablo sütunları içerdikleri içeriğe göre boyutlandırılma eğilimindedirler ve bu da bazı garip sonuçlar doğurabilir. Biz de tablo-layout: fixed ile sütunlarımızı başlıkların genişliğine göre boyutlandırmış oluruz. Bu sāyede içeriklerle uygun şekilde ilgilenebiliriz. Daha sonra thead th:nth-child(n) bildirmiyle {{htmlelement("thead")}} öğemizin {{htmlelement("th")}} çocuklarını sırasıyla seçebilmek için {{cssxref(":nth-child")}} sözde öğe seçimizle başlıklarımızın genişliklerini yüzdelik olarak belirliyoruz. Sütun genişliklerinin tamamı başlıkların genişliklerine göre ayarlamak tablo sütunlarını boyutlandırmanın güzel bir yoludur. Chris Coyier bu tekniği daha ayrıntılı olarak ele aldığı Fixed Table Layouts makâlesinin çevirisine bakabilirsiniz.
    • -
  • Tablo genişliğini {{cssxref("width")}} niteliğine 100% uzunluk değeri vererek tablonun içinde bulunduğu kutunun genişliği kadar genişlik alması sağlandı(Her ne kadar dar ekranlarda genişliğin üzerinde biraz daha ek çalışmaya ihtiyaç duysa da)
    • -
  • {{cssxref("border-collapse")}} niteliğine collapse değeri atayarak tablonun sınır çizgisi tek çizgi olacak şekilde ayarlanıyor. Varsayılan olarak, tablo öğelerinde kenarlık ayarladığınızda, aşağıdaki resimde gösterildiği gibi, çizgilerin arasında boşuklar olacaktır: Bu hoş bir görüntü oluşturmuyor(belgide istediğin bu görüntü olabilir, benimki bu değildi) border-collapse: collapse; bildirimi kenarlıkları teke indiriyor ve bu çok daha iyi görünüyor:
    • -
- -

- -
    -
  • {{cssxref("border")}} niteliğimizle tablonun etrafına bir kenarlık koyduk, çünkü daha sonra tablo başlığının ve altbilginin etrafına bazı kenarlıklar koyacağız — etrafını çevreleyen bir sınır olmadığında gerçekten tuhaf ve kopu görünür.
    • -
- -

Bu noktada, tablomuz biraz daha iyi görünür:

- -

- -

Basit bir tipografi

- -

Şimdi metnimizi biraz şekillendirelim.

- -

Google Fonts'da punk gruplarına uygun bir yazı tipi bulduk. İstersen oraya gidip farklı bir tane bulabilirsin; bunun için {{htmlelement("link")}} etiketinin {{cssxref("font-family")}} beyanına Google Fonts'un verdiği tanımını eklemelisin.

- -

Öncelikle, aşağıdaki {{htmlelement("link")}} etiketini HTML başlığınıza, css dosya <link> tanımının hemen üstüne eklemelisin:

- -
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
- -

Şimdi, aşağıdaki CSS'i style.css dosyasının önceki eklemenin altına eklemelisin:

- -
/* typography */
-
-html {
-  font-family: 'helvetica neue', helvetica, arial, sans-serif;
-}
-
-thead th, tfoot th {
-  font-family: 'Rock Salt', cursive;
-}
-
-th {
-  letter-spacing: 2px;
-}
-
-td {
-  letter-spacing: 1px;
-}
-
-tbody td {
-  text-align: center;
-}
-
-tfoot th {
-  text-align: right;
-}
- -

Bu son tanımda tablolara özgü birşey yok; genelde yazı tipi stilini okumayı kolaylaştırmak için değiştiriyoruz.

- -
    -
  • Genel bir sans-serif yazı tipi kümesi belirledik; bu tamamen biçimsel bir seçimdir. Ayrıca hoş bir eski/serseri bir görünüm için özel yazı tipimizi {{htmlelement("thead")}} ve {{htmlelement("tfoot")}} etiketleri içindeki başlıklara tanımladım.
    • -
  • {{cssxref("letter-spacing")}} niteliğimizi okunabilirliliğe yardımcı olduğunu düşündüğüm için başlıklara ve hücrelere tanımladım. Bu da stilistik bir seçim.
    • -
  • Tablodaki {{htmlelement("tbody")}} etiketi içerisindeki hücrelerin içeriklerini, başlıklarla aynı hizaya gelecek şekilde ortaladım. Varsayılan olarak hücrelerin {{cssxref("text-align")}} nitelik değeri left olarak gelir. Ancak başlıkların varsayılan değerleri center olarak gelmektedir. Genellikle hizalamaların her ikisi için de aynı olması daha iyi görünür. Başlık yazı tiplerindeki varsayılan kalınlık görünümlerinin farklılaştırmak için yeterlidir. Bunun için ayrı bir tanım yapma ihtiyacımız bu örnek için bulunmamakta.
    • -
  • {{htmlelement("tfoot")}} etiketimizdeki veri hücresiyle başlığın daha iyi ilişkilendirilmesi için başlığı sağa hizaladım. Veri hücresi varsayılan olarak zaten sola dayalı.
    • -
- -

Sonuç biraz daha düzgün görünüyor:

- - - -

- -

Grafikler ve renler

- -

Sıra grafikler ve renkler de! Tablomuz serseri bir tavırla dolu olduğu için, ona uyması için parlak, heybetli bir stil vermemiz gerekiyor. Endişelenmeyin, tablolarını bu kadar gürültülü yapmak zorunda değilsin — daha sade  ve zevkli bir tasarım tercik edebilirsin.

- -

Aşağıdaki CSS'i style.css dosyanıza eklemelisin:

- -
/* graphics and colors */
-
-thead, tfoot {
-  background: url(leopardskin.jpg);
-  color: white;
-  text-shadow: 1px 1px 1px black;
-}
-
-thead th, tfoot th, tfoot td {
-  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
-  border: 3px solid purple;
-}
-
- -

Burada da tablolara özgü bir tanım yok, ancak birkaç noktayı not etmeye değer.

- -

{{htmlelement("thead")}} ve {{htmlelement("tfoot")}} özelerimize, {{cssxref("background-image")}} niteliği ile bir arka plan resmi ekledim, ayrıca okunabilirliliğin daha iyi olması için üst ve alt bilgi alanlarındaki tüm metinlerin rengini beyaz yapıp, {{cssxref("text-shadow")}} ile gölgelendirme verdim ({{cssxref("text-shadow")}}. Metninizin her zaman arka planla kontrastı iyi olduğundan emin olmalısınki okunabilsin.

- -

Zebra çizgisi

- -

Zebra çizgilerinin nasıl oluşturulup uygulanacağını göstermek için ayrı bir bölüm ayırmak istedim — tablonuzdaki farklı veri satırlarının ayrıştırılmasını ve okunmasını kolaylaştıran alternatif renk satırları. Aşağıdaki CSS'i sytle.css dosyasına eklemelisin:

- -
/* zebra striping */
-
-tbody tr:nth-child(odd) {
-  background-color: #ff33cc;
-}
-
-tbody tr:nth-child(even) {
-  background-color: #e495e4;
-}
-
-tbody tr {
-  background-image: url(noise.png);
-}
-
-table {
-  background-color: #ff33cc;
-}
- -
    -
  • Daha önce, {{cssxref(":nth-child")}} seçicinin belirli alt öğeleri seçmek için kullanıldığını gördün. Parametre olarak bir formül de verilerek bir dizi öğe seçebilir. Formül 2n-1 ile tüm tek sayılı çocukları (1, 3, 5, vb), 2n formülü ilede tüm çift sayılı çocukları (2, 4, 6, vb) seçer. Fakat kodumuzda odd(tek) ve even(çift) anahtar kelimelerini kullandık, yukarıda belirtilen formüllerle aynı işlemi yaparak, tek ve çift sıralara farklı renkler veriyoruz.
    • -
  • Ayrıca, tüm gövde sıralarına tekrar eden bir arka plan döşemesi ekledim, bu şekilde tablomuza yarı saydam bir doku kazandırmış oldum.
    • -
  • Son olarak, tüm tabloya düz bir arka plan rengi verdim ki :nth-child seçicisini desteklemeyen tarayıcılarda tablomuzun halen bir arka plan rengi olabilsin.
    • -
- -

Bu renk cümbüşü aşağıdaki görünüme neden olur:

- -

- -

Bu biraz abartılı gelebilir ve zevkine göre olmayabilir. Ama burada değinmeye çalıştığımız nokta, tabloların sıkıcı ve akademik olmak zorunda olmadığıdır.

- -

Başlığın stilini ayarlamak

- -

Tablomuzda yapmamız gereken son bir şey daha var — başlık stili vermek. Bunu yapmak için aşağıdakileri style.css dosyasına eklemelisin.

- -
/* caption */
-
-caption {
-  font-family: 'Rock Salt', cursive;
-  padding: 20px;
-  font-style: italic;
-  caption-side: bottom;
-  color: #666;
-  text-align: right;
-  letter-spacing: 1px;
-}
- -

Burada bottom değeri verilen {{cssxref("caption-side")}} niteliği başlığın tablonun nesinde olacağını tanımlamamıza yardımcı olur. Bu bildirim, başlığın tablonun altına yerleştirilmesine neden olur ve bu da diğer bildirimlerle birlikte bize bu son görünümü verir(punk-bands-complete.html görmek için bakın):

- -

- -

Tablo şekillendirme için hızlı ipuçları

- -

Devam etmeden önce, size yukarıda gösterilen en yarlı noktaların hızlı bir listesini vermem gerektiğini düşümdüm:

- -
    -
  • Tablo işaretlemeni olabildiğince basit hale getirmelisin; örneğin yüzdeleri kullanarak işleri esnek tutmalısın, böylece tasarımın daha duyarlı olsun.
    • -
  • {{cssxref("table-layout")}}: fixed; bildirimini kullanarak sütun genişliklerini({{cssxref("width")}}) başlıklarının({{htmlelement("th")}}) genişliğine ayarlanmasını sağlayarak daha tahmin edilebilir bir tablo düzeni oluşturabilirsin.
    • -
  • {{cssxref("border-collapse")}}: collapse; kullanarak daha sāde kenarlıklar eklemelisin.
    • -
  • {{htmlelement("thead")}}, {{htmlelement("tbody")}}, ve {{htmlelement("tfoot")}} etiketlerini kullanarak ve böylece mantıksal alanlara bölerek oluşturduğun tablo üzerinde daha fazla CSS uygulamak için imkan sağlamış olursun.
    • -
  • Satırların birbirinden ayrılıp daha rahat okunabilemesi için zebra çizgisini kullanın.
    • -
  • {{htmlelement("th")}} and {{htmlelement("td")}} öğelerinde takip etmeyi kolaylaştırmak için {{cssxref("text-align")}} niteliğini kullanmaktan çekinmemelisin.
    • -
- -

Becerilerini test et!

- -

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test et: Tablolar.

- -

Sıradaki

- -

Artık tabloları şekillendirmeyi de öğrenmişken, zamanımızı işga ledecek başka bir şeye ihtiyacımız var. Sonraki dersimizde, CSS'de hata ayıtlamayı araştırıyor olacağız — olması gerektiği gibi görünmeyen düzenler veya olması gerektiğini düşündüğünüzde uygulanmayan özellikler gibi sorunların nasıl çözüleceği. Bu, sorunlarınıza çözüm bulmak için tarayıcı DevTools'u kullanma hakkındaki bilgileri içerir.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin 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/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html b/files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html deleted file mode 100644 index 94fca5a5ce..0000000000 --- a/files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Arka Planlar ve Kenarlıklar' -slug: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders -tags: - - Arka Plan - - Assessment - - Başlangıç - - Beginner - - Değerlendirme - - Eğitim - - Kenarlık - - Learn - - Skill test - - backgrounds - - beceri testi - - borders -translation_of: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders -original_slug: Öğren/CSS/CSS_yapi_taslari/Test_your_skills_backgrounds_and_borders ---- -

Bu beceri testinin amacı, önceki derste öğrendiğiniz becerileri kullanarak, CSS arka planları ve kenarlıklar üzerinde çalışmanızı sağlamaktır.

- -
-

Not: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ancak kodu indirip ve görevler üzerinde çalışmak için CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması yararlı olabilir.

- -

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve daha fazla yardım")}} bölümüne bakın.

-
- -

Arka Planlar ve Kenarlıklar 1

- -

Bu görevde, sayfa başlığına bir arka plan, kenarlık ve bazı basit stil eklemenizi istiyoruz:

- -
    -
  1. Kutuya 10 piksellik yuvarlatılmış köşeleri olan 5 piksellik siyah düz bir kenarlık verin.
    2. -
  2. Bir arka plan resmi ekleyin (balloons.jpg'yi kullanın) ve kutuyu kaplayacak şekillde boyutlandırın.
    3. -
  3. <h2> yarı saydam bir siyah arka plan rengi verin ve metni beyaz yapın.
    4. -
- -

Bitmiş örnek aşağıdaki gibi görünmelidir.

- -

Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background.

- -

Birmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}

- -
-

Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin kaynak kodunu indirin.

-
- -

Arka Planlar ve Kenarlıklar 2

- -

Bu görevde, dekoratif bir kutuya arka plan resimleri, kenarlık ve diğer bazı stilleri eklemenizi istiyoruz:

- -
    -
  • Kutuya 5 piksellik açık mavi bir kenarlık verin ve sol üst köşesyi 20 piksel ve sağ alt köşeyi 40 piksel yuvarlayın.
    • -
  • Arka plan resmi olarak, solda ortalanmış bir yıldız, sağda tekrar eden bir yıldız deseni oluşturun. Resim olarak star.png kullanın.
    • -
  • Başlık metninin resmin üzerine gelmediğinden ve ortalanmış olduğundan emin olun — bunları yapabilmek için önceki derslerde kullandığınız teknikleri kullanmanız gerekecektir.
    • -
- -

İşin sonunda örneğiniz aşağıdaki resimdeki gibi gözükmelidir:

- -

Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars.

- -

Örneğinizi oluşturabilimeniz için aşağıdaki canlı kodu düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}

- -
-

Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin Kaynak kodunu indirin.

-
- -

Değerlendirme veya daha fazla yardım

- -

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

- -

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

- -
    -
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. -
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: -
      -
    • "Flexbox düzen 1 beceri testi için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • -
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • -
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • -
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • -
    -
    3. -
diff --git a/files/tr/learn/css/building_blocks/the_box_model/index.html b/files/tr/learn/css/building_blocks/the_box_model/index.html deleted file mode 100644 index 38ac0e3b37..0000000000 --- a/files/tr/learn/css/building_blocks/the_box_model/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: Kutu Modeli -slug: Learn/CSS/Building_blocks/The_box_model -tags: - - Başlangıç - - Beginner - - CSS - - Dolgu - - Eğitim - - Gorüntü - - Kenar payı - - Kutu Modeli - - Learn - - Sınır - - border - - box model - - display - - margin - - padding -translation_of: Learn/CSS/Building_blocks/The_box_model -original_slug: Öğren/CSS/CSS_yapi_taslari/The_box_model ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
- -

CSS'deki her nesnenin etrafında bir kutu vardır ve kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Bu derste, CSS Kutu Modeline giriş yapacağız, böylece nasıl çalıştığı ve bununla ilgili terminolojiyi anlayarak daha karmaşık düzen görevleri oluşturabilirsin.

- - - - - - - - - - - - -
Ö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 Kutu Modeli hakkında bilgi edinmek için, kutu modelini oluşturan unsurlar ve alternatif model geçileceği ile ilgili bilgi sahibi olmak.
- -

Blok ve satır içi kutular

- -

CSS'de genel olarak iki tür kutuya sahibiz — blok kutular ve satır içi kurular. Bu ayrım kutunun sayfa akışı açısından ve sayfadaki diğer kutularla ilişkili olarak nasıl davranacağını ifade etmek için yapılır.

- -

Bir kutunun türü blok(block) olarak tanımlanmışsa, aşağıdaki şekilde davranacaktır:

- -
    -
  • Kutu yeni bir satıra geçer.
    • -
  • Kutu, içinde bulunduğu satırın genişliği kadar uzar. Bu kutunun satırdaki mevcut alanın %100'ünü dolduracağı anlamına gelir.
    • -
  • {{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olacaktır.
    • -
  • Dolgu (padding), kenar boşluğu (margin) ve kenarlık (border) diğer öğelerin kutudan uzağa itilmesine neden olur. Kendisinden sonraki öğelerin konumları etkilenir, önceki öğelere göre kendi konumunu belirler.
    • -
- -

Görüntü türünü satır içi olarak değiştirmez isek, başlıklar ve paragraflar varsayılan görüntüleme türü blok(block) olan öğelere örnektir.

- -

Eğer kutunun görüntüleme türü satır içi(inline) olacak şekilde tanımlanmışsa:

- -
    -
  • Kutu yeni bir satıra geçmeyecektir.
    • -
  • {{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olmayacaktır.
    • -
  • Dikey yöndeki; dolgu, kenar boşlukları ve kenarlıklar uygulanacak ve diğer kutuların kutudan uzaklaşmasına neden olmayacaktır.
    • -
  • Yatay yöndeki, dolgu, kenar boşlukları ve kenarlıkları uygulanacak ve diğer satır içi kutuların kutudan uzaklaşmasına neden olacaktır.
    • -
- -

Bağlantılar için kullanılan <a>  öğesi, <span>, <em> ve <strong> varsayılan tür olarak satır içi(inline) görüntülenecek öğelere örnektir.

- -

Bir öğenin kutu türünü tanımlayabilmek için {{cssxref("display")}} niteliğine block ve inline değerleri kullanılır.

- -

Ayrıca: İç ve dış görüntüleme türleri

- -

Bu noktada iç ve dış gösterim türlerini de açıklamamız yerinde olur. Yukarıda belirtildiği gibi, CSS'deki kutular, kutunun blok mu satır içi mi olduğunu ayrıntılarıyla anlatan bir dış gösterim türüne sahiptir.

- -

Kutular ayrıca, bu kutunun içindeki öğeleri nasıl yerleştirileceğini belirleyen bir iç gösterim türünede sahiptir. Varsayılan olarak, bir kutunun içindeki öğeler normal aşkışta düzenlenir, bu da diğer tüm öğelerin blok ve satır içi öğeler gibi davrandıkları anlamına gelir (yukarıda açıklandığı gibi).

- -

Bu özellikler sayesinde, bir öğenin display niteliğine flex değerini tanımlayarak iç ekran türünü değiştirebiliriz. Öğeyi display: flex şeklinde tanımlarsak, öğenin dış görünümü block olur, fakat öğenin içindeki diğer öğelerin görüntüleme türü flex olarak değişir. Böylece bu tanım, kutunun alt öğelerini esnek öğeler haline getirir ve iç öğeler daha sonra ele alacağımız Flexbox özelliklerinde belirtilen kurallara göre düzenlenir.

- -
-

Not: Görüntüleme değerleri ve kutuların blok ve satır içi düzende nasıl çalıştığı hakkında daha fazla bilgi edinmek için, MDN kılavuzundaki Blok ve Satır İçi Düzen'e bir göz at.

-
- -

CSS Mizanpajı hakkında daha ayrıntılı bilgi edinmeye devam ettiğinde, flex'siyi ve kutularının sahip olabileceği çeşitli değerlerle karşılaşaksınn. Örneğin grid.

- -

Blok ve satır için görüntülüme türleri, HTML'deki öğelerin varsayılan davranış şeklidir — yukarıda da dillendirdiğimiz gibi normal akış olarak anılır, çünkü başka bir talimat olmadan, kutularımız varsayılan blok veya satır içi değerlerine göre düzenlenirler.

- -

Farklı görüntüleme türlerine örnekler

- -

Konumuza devam edelim ve bazı örneklere bir göz atalım. Aşağıda, hepsinin dış görüntüleme türü block olan öğenelerimiz var. İlki CSS'le eklenmiş bir kenarlığa sahip olan paragraftır. Tarayıcı bunu bir blok kutu olarak işler, böylece paragraf yeni bir satırda başlar ve mevcut tüm genişliğe sahip olur.

- -

İkincisi, görüntüleme türü olarak display: flex tanımlanmış bir listemiz var. Bu, ul etiketi içindeki öğeler için esnek bir düzen oluşturur, ancak listenin kendisi bir blok kutudur ve blok kutu gibi davranır — paragraf gibi. Yeni bir satırda başlar ve satırın sahip olduğu genişliğe kadar genişler.

- -

Bununda altında, içinde iki adet <span> öğe bulunan blok türünde bir paragrafımız var. Ancak bu iki öğe normalde inline türüne sahipler, içlerinden bir tanesini .block sınıfına dahil edip görüntü türünü display: block olarak tanımlıyoruz ve inline türüne sahip bir öğe block türüne sahip bir öğe gibi davranmaya başlıyor.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 

- -

Bir sonraki örnekte, inline görüntüleme türüne sahip öğelerin nasıl davrandığını görebilirsin. ilk paragrafın içindeki <span> öğeleri varsayılan olarak satır içi görüntüleme türüne sahip oldukları için bir önceki örnekte olduğu gibi yeni bir satır için tasarımı zorlamaz.

- -

Bir de <ul> öğemiz var. Bu öğemisin görüntüleme türünü display:inline-flex tanımı ile; öğemizin içindeki öğelere esnek bir tasarım ve kendisine de satır içi kutu gibi davranmasını söylemiş oluruz.

- -

Son olarak, iki adet paragrafımız var. Bu paragraflarımızın görüntüleme türünü display: inline olarak tanımladığımızda, sahip oldukları varsıyalan tür olan blok kutu gibi değil de satır içi kutu gibi davranmaya başlarlar ve aşağıdaki örnekte de görüldüğü gibi iki paragrafımız normal davranışları olan yeni bir satırdan başlamak yerine aynı satırda diğer öğelerle birlikte görüntülenmeye başlarlar.

- -

Değiştirin! sizde farklılıkları daha iyi görebilmek için display: inline tanımını display: block ve display: inline-flex tanımını da display: flex olarak değiştirin.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} 

- -

İlerleyen derslerde esnek düzen gibi kavramlarla karşılaşacaksın; şimdilik hatırlanması gereken en önemli şey, display niteliğinin değerinin değiştirilmesi, bir kutunun dış görüntüleme türünün blok mu yoksa satır içi mi olduğunu belirlediğini ve bunun da mizanpajdaki diğer öğelerle birlikte nasıl görüntüleneceğini tanımlamasıdır.

- -

Dersin geri kalanında, dış ekran türüne odaklanacağız.

- -

CSS kutu modeli nedir?

- -

CSS kutu modelleri tanımlarının tümü sadece blok kutular için geçerlidir. Satır içi kutular kutu modelinde tanımlanan davranışların bir kısmını kullanır. Model, bir kutunun farklı bölümlerinin (Kenar boşluğu, kenarlık, dolgu ve içerik) kutuyu oluştururken birlikte nasıl çalıştırklarını tanımlar. Biraz daha karmaşıklık ekleyecek ama bir standart, birde alternatif olmak üzere iki adet kutu modeli vardır.

- -

Bir kutunun parçaları

- -

Bir blok kutu oluşturabilmek için, CSS'in bize verdikleri:

- -
    -
  • İçerik(Content): İçeriğin görüntülendiği alandır. {{cssxref("width")}} ve {{cssxref("height")}} gibi nitelikler kullanılarak boyutlandırılabilir.
    • -
  • Dolgu(Padding): İçeriği saran bir boşluktur. boyutu {{cssxref("padding")}} ve ilişkili niteliklerle belirlenir.
    • -
  • Kenarlık(Border): İçeriği ve dolguyu sarar. Boyutu ve stili {{cssxref("border")}} ve ilişkili niteliklerle belirlenir.
    • -
  • Kenar boşluğu(Margin): İçeriği, dolguyu ve kenarlığı saran, ayrıca diğer öğeler ile arasına mesafe koyan en dış katmandır. {{cssxref("margin")}} ve ilişkili niteliklerle belirlenir.
    • -
- -

Aşağıdaki şema bu katmanları göstermektedir:

- -

Diagram of the box model

- -

Standart CSS kutu modeli

- -

Standart kutu modelinde, bir kutuya width ve height niteliklerine değer verirsen, bu içeriğin genişliğini ve yüksekliğini tanımlar. Kutunun kapladığı toplam boyutu elde etmek için daha sonra bu genişliğe ve yüksekliğe, eğer varsa dolgu ve kenarlık eklenir. Hesaplama aşağıda gösterilmiştir.

- -

Aşağıda bir kutunun modelini tanımlayan width, height, margin, border, ve padding niteliklerini CSS kodu bulunmakta:

- -
.box {
-  width: 350px;
-  height: 150px;
-  margin: 10px;
-  padding: 25px;
-  border: 5px solid black;
-}
-
- -

Standart kutu modelini kullanan kutumuzun kapladığı gerçek alan, dolgu ve kenarlıkta hesaba katıldığında, genişliği 410px(350 + 25 + 25 + 5 + 5) ve yüksekliği 210px(150 + 25 + 25 + 5 + 5) olacaktır.

- -

Showing the size of the box when the standard box model is being used.

- -
-

Not: Kenar boşluğu, kutunun gerçek boyutuna dahil edilmez. Elbette kutunun sayfada kaplayacağı alanı etkileyecektir fakat yalnızca kutunun dışındaki alanı etkiler. Kutunun alanı kenarlıkta durur, kenar boşluğuna uzamaz. Daha iyi anlaşılabilmesi için: Bir odaya koyacağımız 35cm genişliğinde ve 15cm uzunluğunda kolilerimizin olduğunu düşünelim. Bu kolileri odanın zeminine sıralarken aralarında 1mt mesafe bıraktığımızı düşünelim. Kolilerin arasında bıraktığımız 1mt'lik boşluk kolimizin genişliğini ve uzunluğunu etkilemez fakat odanın alacağı koli adedini etkiler.

-
- -

Alternatif CSS kutu modeli

- -

Kutunun gerçek boyutunu elde etmek için dolgu ve kenarlığı eklemenin oldukça sakıncalı olduğunu düşünebilirsin ve bunda da haklısın! Bu nedenle CSS, standart kutu modelinden bir süre sonra alternatif bir kutu modeli tanıttı. Bu modeli kullandığında, kutunun genişlik  ve yüksekliği sayfada görünür kutunun genişliği ve yüksekliğidir. Bu nedenle içerik alanının genişliği ve yüksekliği, dolgu ve kenarlık ölçülerinin belirtilen değerden çıkartılmasıyla hesaplanır.Yukarıda kullanılan CSS, aşağıdaki sonucu verecektir. (Genişlik: 350px, yükseklik=150px)

- -

Showing the size of the box when the alternate box model is being used.

- -

Varsayılan olarak, tarayıcılar standart kutu modelini kullanır. Bir öğeye alternatif modeli tanımlayabilmen için  box-sizing: border-box tanımını yapman gerekmektedir. Bu sayede tarayıcıya, belirlediğin herhangi bir boyut için, kenarlığı dikkate almasını söylemiş olursun.

- -
.box {
-  box-sizing: border-box;
-}
- -

Tüm öğelerinin alternatif kutu modelini kullanmasını istiyorsan box-sizing özelliğini <html> öğesinin üzerinde tanımlayın, ardından aşağıdaki önernekteki gibi tüm diğer öğelerin bu değeri miras alacak şekilde ayarlayın. Bunun arkasındaki püf noktasını anlayabilmen için,CSS'de Kutu Boyutlandırma Hakkındaki Püf Noktalar'a bakın.

- -
html {
-  box-sizing: border-box;
-}
-*, *::before, *::after {
-  box-sizing: inherit;
-}
- -
-

Not: Geçmişten ilginç bir bilgi — Internet Explorer varsayılan olarak alternatif kutu modelini kullanıyordu ve geçiş için herhangi bir mekanizması mevcut değildi.

-
- -

Kutu modelleriyle oynamak

- -

Aşağıda iki kutu görüyorsun. Bu kutular aynı .box sınıfına dahiller ve bu sınıf ikisinede aynı  width, height, margin, border, ve padding özelliklerin atamasını yapar. Tek fark, ikinci kutu aynı zamanda alternatif kutu modelini kullanacak şekilde ayarlanmış olmasıdır.

- -

İkinci kutunun boyutunu(.alternate sınıfına ekleyerek) ilk kutuyla eşleşecek şekilde değiştirebilir misin?

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

- -
-

Not: Burada, bu görev için bir çözüm bulabilirsin..

-
- -

Kutu modelini görüntüleyebilmek için tarayıcı DevTools'u kullanın

- -

Tarayıcı geliştirme araçlarıyla(developer tools) kutu modelini daha rahat anlayabilirsin. Firefox'un geliştirme araçlarında bir öğeyi incelersen, öğenin boyutunun yanı sıra, kenar boşluğunun, dolgusunun, kenarlığınında özelliklerini görebilirsin. Bir öğeyi bu şekilde incelemek, kutunun gerçekten düşündüğün boyutta olup olmadığını görmenin harika bir yoludur.

- -

Inspecting the box model of an element using Firefox DevTools

- -

Kenar boşluğu, dolgu ve kenarlıklar

- -

Yukarıda zaten {{cssxref("margin")}}, {{cssxref("padding")}}, ve {{cssxref("border")}}'ın ne şekilde kullanıldıklarını gördün. Bu örneklerde kullanılan nitelikler kısayollardır ve kutunun dört kenarını da aynı anda ayarlamana olanak sağlar. Bu kısayolların aynı zamanda, kutunun farklı tarafları üzerinde ayrı ayrı kontrol sağlayan eşdeğer nitelikleri de vardır.

- -

Şimdi bu nitelikleri daha detaylı inceleyelim.

- -

Kenar boşluğu(margin)

- -

Kenar boşluğu, kutunun etrafındaki görünmez bir alandır. Diğer öğeleri kutudan uzaklaştırır. Kenar boşluklarının pozitif ve negatif değerleri olabilir. Kutunun bir tarafına, negatif bir kenar boşluğu ayarlamak, kutunun sayfadaki diğer öğelerle çakışmasına neden olabilir. İster standart ister alternatif kutu modelini kullanıyor olun, kenar boşluğu her zaman görünür kutunun boyutu hesaplandıktan sonra eklenir.

- -

{{cssxref("margin")}} niteliğini kullanarak bir öğenin tüm kenar boşluklarını tek seferde veya eşdeğer nitelikleri kullanarak her bir tarafı tek tek de kontrol edebilirsin:

- -
    -
  • {{cssxref("margin-top")}}
    • -
  • {{cssxref("margin-right")}}
    • -
  • {{cssxref("margin-bottom")}}
    • -
  • {{cssxref("margin-left")}}
    • -
- -

Aşağıdaki örnekte, İçerideki kutunun sahip olduğu kenar boşlukları üzerinde ki negatif değerlerin ne şekilde etki ettiğini, kutunun ne şekilde itildiğini ve dışarıdaki kutuyu nasıl etkilediğini görebilmek için kenar boşluğu değerlerini değiştirin.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

- -

Kenar boşluğunun daralması

- -

Kenar boşlukları hakkında anlaşılması gereken önemli bir konu daha vardır, kenar boşluğunun daralma kavramı. Kenar boşlukları birbirine temas eden iki öğen varsa ve her iki kenar boşluğu da pozitif ise, bu kenar boşlukları birleşerek, en büyük kenar boşluğuna sahip öğenin kenar boşluğu kadar birbirlerinden uzaklaşırlar. Kenar boşluklarından biri veya ikisi de negatifse, negatif değer, sayısal değeri büyük olan değerden çıkartılarak çıkan sonuç kenar boşluğu olarak belirlenir.

- -

Aşağıdaki örnekte iki paragrafımız var. Üst paragrafta margin-bottom: 50px olarak tanımlanmış. İkinci paragraf ise margin-top: 30px olarak tanımlanmıştır. Kenar boşluğu daralması gerçekleşmiş ve ikisi arasında iki değerin toplamı kadar değilde en büyük değer olan 50px kadar boşluk oluşmuştur.

- -

margin-top niteliğine 0 değerini atayarakta bunu test edebilirsin. Bu tür bir tanımlamada iki paragraf arasındaki görünür kenar boşluğu değişmez. Birinci paragrafta tanımlanan bottom-margin: 50px değeri korunur. Eğer margin-top: -10px olarak tanımlarsan aradaki boşluğun 40px olduğunu görürsün. 50px - 10px = 40px.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 

- -

Kenar boşluklarının ne zaman azalacağını ve ne zaman kapanmayacağını belirleyen birkaç kural vardır. Daha fazla bilgi için, kenar boşluğu daraltmayla ilgili sayfaya bakın. Şimdilik hatırlaman gereken en önemli şey, kenar daralmasının gerçekleşen bir durum olduğudur. Kenar boşluklu alan yaratıyorsan ve beklediğin alanı alamıyorsan, muhtemelen olan budur.

- -
-

Not: Aslında bu mantıksız bir davranış değildir. Daha önce kenar boşluğunun kutunun boyutuna dahil edilmediğinden bahsetmiştik. Pozitif bir kenar boşluğu verdiğimizde, tarayıcıya bu kutu ile diğer kutular arasında en az bu kadar boşluk olacak diyoruz. Yukarıdaki örnekte ikinci kutunun diğer kutudan 30piksel uzakta olması gerekiyor fakat ilk kutu zaten 50piksel bir mesafe koymuş. Bu yüzden ikinci kutunun sahip olması gereken mesafe fazlasıyla sağlandığından bir işlem yapılması gerekmiyor.

-
- -

Kenarlık

- -

Kenarlık, kenar boşluğu ile kutunun dolgusu arasına çizilir. Standart kutu modelini kullanıyorsan, sınırın boyutu kutunun width ve heigh niteliklerinin değerlerine eklenir. Alternatif kutu modelini kullanıyorsan, kenarlığın boyutu, mevcut alanın bir kısmını kapladığı için içerik kısmını küçültür.

- -

Kenarlıkları şekillendirmek için çok sayıda özellik vardır — dört kenarlık vardır ve her kenarlığın üzerinde değişiklik yapmak isteyebileceğin stil, renk ve genişlik özellikleri vardır.

- -

{{cssxref("border")}} niteliği ile bu dört kenarlığın stilini, rengi ve genişliğini aynı anda ayarlayabilirsin.

- -

Her bir kenarın özelliklerini ayrı ayrı tanımlamak için şunları kullanabilirsin:

- -
    -
  • {{cssxref("border-top")}}
    • -
  • {{cssxref("border-right")}}
    • -
  • {{cssxref("border-bottom")}}
    • -
  • {{cssxref("border-left")}}
    • -
- -

Her kenarın stilini, rengini ve genişliğini ayarlamak için şunları kullanabilirsin:

- -
    -
  • {{cssxref("border-width")}}
    • -
  • {{cssxref("border-style")}}
    • -
  • {{cssxref("border-color")}}
    • -
- -

Her bir kenarın stil, renk ve genişlik ayarlarını ayrı ayrı yapmak istediğinde aşağıdaki nitelikleri kullanabilirsin:

- -
    -
  • {{cssxref("border-top-width")}}
    • -
  • {{cssxref("border-top-style")}}
    • -
  • {{cssxref("border-top-color")}}
    • -
  • {{cssxref("border-right-width")}}
    • -
  • {{cssxref("border-right-style")}}
    • -
  • {{cssxref("border-right-color")}}
    • -
  • {{cssxref("border-bottom-width")}}
    • -
  • {{cssxref("border-bottom-style")}}
    • -
  • {{cssxref("border-bottom-color")}}
    • -
  • {{cssxref("border-left-width")}}
    • -
  • {{cssxref("border-left-style")}}
    • -
  • {{cssxref("border-left-color")}}
    • -
- -

Aşağıdaki örnekte, çeşitli kenarlıklar oluşturabilmek için kenarlık özelliğinin çeşitli niteliklerinden bazılarını kullandık. Nasıl çalıştıklarını daha iyi anlayabilmek için bazı niteliklerin değerlerini değiştirin yada yeni nitelikler ekleyin. Kenarlık özellikleri için MDN sayfaları, aralarında seçim yapabileceğin farklı kenarlık stilleri hakkında bilgi verir.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 

- -

Dolgu

- -

Dolgu, Kenarlık ve içerik arasında bulur. Kenar boşluklarının aksine, negatif değer alamazlar. bu nedenle değri 0 yada pozitif bir değer olmalıdır. Öğene uygulanan herhengi bir arka plan, dolgunun arkasında görüntülenir ve genellikle içeriği sınırdan uzaklaştırmak için kullanır.

- -

{{cssxref("padding")}} niteliği ile bir öğenin dolgusunu bir seferde tanımlayabilirsin yada her tarafın dolgusunu ayrı ayrı tanımlamak için aşağıdaki nitelikleri kullanabilirsin.

- -
    -
  • {{cssxref("padding-top")}}
    • -
  • {{cssxref("padding-right")}}
    • -
  • {{cssxref("padding-bottom")}}
    • -
  • {{cssxref("padding-left")}}
    • -
- -

Aşağıdaki örnekte bulunan .box sınıfındaki dolgu niteliklerinin değerlerini değiştirerek içerideki kutunun içindeki metnin kutuya göre yerleşimindeki değişimleri gözlemleyebilirsin.

- -

Ayrıca .container sınıfı ile, birinci kutu ile ikinci kutu arasındaki bulunan boşluğu değiştirebilirsin. Dolgu herhangi bir öğe üzerinde uygulanabilir ve kenarlık ile içerik kısmında ne varsa onunla arasına mesafe bırakılmasını sağlar.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 

- -

Kutu modeli ve satır içi kutular

- -

Yukarıdakilerin tümü tamamen blok kutuları için geçerlidir. <span> gibi bazı satır içi kutulara sahip öğelere de kutu modeli uygulanabilir.

- -

Aşağıdaki örnekte, paragraf içerisinde bir adet <span> var. Bu satır içi kutuya width, height, margin, border, ve padding uyguladık. Genişlik ve yüksekliğin göz ardı edildiğini görebilirsin. Dikey; kenar boşlukları, dolgu ve kenarlıklar uygulanır, ancak bunlar diğer içeriğin satır içi kutumuzla ilişkisini değiştirmez ve bu nedenle dolgu ve kenarlık, paragraftaki diğer kelimelerle çakışır. Yatay; dolgu, kenar boşlukları ve kenarlıklara uyulur ve içeriğin kutudan uzakşamasına neden olur.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 

- -
-

Satır içi kutular içinde bulundukları satırı etkileyebilirler. Kendilerinden önceki veya sonraki satırları ve satırların içeriğini etkileyemezler.

-
- -

display: inline-block kullanımı

- -

display niteliğinin özel bir değeri vardır. Bu değer, bir öğenin yeni bir satıra geçmesini istemediğimiz, ayrıca yukarıdaki örnekte olduğu gibi bir çakışmanın da olmasını istemediğimiz durumlarda kullanışlıdır.

- -

display: inline-block bir öğeye zaten bildiğimiz blok kutuların davranışlarından bazılarını kazandırır:

- -
    -
  • width ve height nitelikleri uygulanır.
    • -
  • padding, margin, ve border nitelikleri diğer öğelerin kutudan uzağa itilmesine neden olur.
    • -
- -

Bunlarla birlikte, yeni bir satıra bölünmez ve sadece,  width ve height nitelikleri belirtilirse içeriğinden daha büyük hale gelir.

- -

Bu sonraki örnekte, <span> öğesine eklediğimiz display: inline-block  komutunu display: block olarak değiştirmeyi veya satırı tamamen kaldırmayı deneyin.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} 

- -

Bunun yararının görülebileceği bir örnek vermek gerekirse; padding uygulayarak daha büyük isabet alanına sahip bağlantı öğeleri eklemek isteyebiliriz. oysa <a> öğesi <span> gibi bir satır içi öğesidir ve padding istediğimiz gibi davranmayacaktır. Bunun için, display: inline-block tanımını kullanarak dolgunun diğer öğelerle daha iyi izalanmasını izin vererek kullanıcının bağlantıya tıklamasını kolaylaştırırız.

- -

Bunu gezinme çubuklarında oldukça sık görüyorsun. Aşağıdaki navigasyonda flexbox kullanılarak bağlantıların yatay görüntülenmesini sağladık. <a> bağlantı öğesinin isabet alanını genişletmek için dolgu ve görünebilir olması için öğemize bir arkaplan rengi tanımladık. Örneğimizde de görebileceğin gibi dolgu, <ul> öğesinin üzerindeki kenarlık ile çakışıyor. Bunun nedeni, <a>'nın bir satır içi öğe olmasıdır.

- -

.links-list a seçicisine display: inline-block kuralını eklediğin de, dolgunun diğer öğeler tarafından dikkate alındığını ve bu sorunun giderildiğini göreceksin.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} 

- -

Becerilerini test et!

- -

Bu dersimizde çok şey ela aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testler hazırladım — Becerilerini test et: Kutu Modeli.

- -

Özet

- -

Kutu modeli hakkında bilmen gerekenlerin çoğu bu. İleride çok fazla kutu ile çalışmaya başladığında kafan karışırsa, bu derse geri dönmek isteyebilirisn.

- -

Bir sonraki derste, düz kutularının daha ilginç görünmesini sağlama için arka planların ve kenarlıkların nasıl kullanılabileceğine bir göz atacağız.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

- -

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 öğelerin boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/values_and_units/index.html b/files/tr/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 50ce4de9f7..0000000000 --- a/files/tr/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: CSS değerleri ve birimleri -slug: Learn/CSS/Building_blocks/Values_and_units -tags: - - Acemi - - Beginner - - CSS - - Durum - - Eğitim - - Function - - Image - - Learn - - Number - - Position - - Renk - - Resim - - birimler - - color - - değerler - - fonksiyon - - length - - numara - - percentage - - units - - uzunluk - - values - - yüzde -translation_of: Learn/CSS/Building_blocks/Values_and_units -original_slug: Öğren/CSS/CSS_yapi_taslari/Values_and_units ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
- -

CSS'de kullanılan her niteliğin, o nitelik için izin verilen değer kümesini tanımlayan bir değer türü vardır. Bu derste en sık kullanılan değer türlerinden bazılarına ve bunların en yaygın değerlerine ve birimlerine bir göz atacağız. Ayrıca MDN'deki nitelik sayfalarındaki açıklamalara göz atman, belirli bir nitelik için geçerli olan değer türüyle ilişkili değerleri anlamana yardımcı olacaktır.

- - - - - - - - - - - - -
Ö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 niteliklerinde kullanılan farklı değer ve birimler hakkında bilgi edinmek
- -

CSS değeri nedir?

- -

CSS eğitiminde ve MDN'deki nitelik sayfalarında, değer türlerini açılı parantezlerle çevrili olarak göreceksin, <color> veya <length> gibi. <color>  veri türünün herhangi bir nitelik için kullanılabilir olduğunu gördüğünüzde; <color> referans sayfasında listelenen değerin, bu niteliğe uygulanabilir olduğu anlamına gelir.

- -
-

Note: Veri türleri olarak adlandırılan CSS değerlerini de görürsünüz. Terimler temelde birbirinin yerine kullanılabilir. CSS'de veri türü olarak adlandırılan bir terim gördüğünüzde, bu değer türünü söylemenin süslü bir yoludur. Veri türü kullanılmak istenilen, değer türü tarafından desteklenen herhangi bir ifade anlamına gelir.

-
- -
-

Note: Evet, CSS değer türleri ile CSS niteliklerini (örn. {{cssxref("color")}} nitelik, <color> değer türü). ayırt edebilmek için genellikle açılı parantezler kullanılarak gösterilir. HTML öğeleri ile CSS değer türlerinin ikiside açılı parantezler kullanılarak gösterildiklerinden, kafan karışabilir ancak işlev olarak aynı değillerdir — çok farklı kavramlar için kullanılırlar.

-
- -

Aşağıdaki örnekte, bir anahtar kelime kullanarak başlığımızın ve arka plan rengimizi rgb() fonksiyonunu kullanarak ayarladık:

- -
h1 {
-  color: black;
-  background-color: rgb(197,93,161);
-} 
-
- -

CSS'de bir öğeye değer türüyle, izin verilen değerler kümesinin içinden değer atamanın tek yoludur. <color> renk değer türünün farklı şekillerde kullanıldığını gördüğünde telaşlanmana gerek yok — Anahtar kelimeler, onaltılık(hex) değerler, rgb() fonksiyounu, gibi. Ayrıca tarayıcılar tarafından desteklenen tüm <color> değerlerini kullanabilirsin. İstersen her değer için MDN sayfasında tarayıcı desteği hakkında bilgi edinebilirsin. Örn, <color> sayfasına bakarsan tarayıcı uyumluluğu bölümünün, farklı renk veri türlerinin listelediğini ve bunların hangi sürümler tarafından desteklendiği hakkında bilgi verdiğini göreceksin(rgba(), hsla(),vb).

- -

Sıklıkla karşılaşabileceğin bazı değer ve birim türlerine örneklerle birlikte bir göz atalım, böylece farklı olası değerleri deneyebilirisin.

- -

Sayılar, uzunluklar ve yüzdeler

- -

CSS'de, kullanabileceğin çeşitli sayısal değer türleri vardır. Aşağıdakilerin tümü sayısal olarak sınıflandırılmıştır:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Veri tipiAçıklama
<integer><integer> bir tamsayıyı temsil eder, 1024 veya -55 gibi.
<number><number> ondalıklı bir sayıyı temsil eder — kesirli bileşeni olan bir ondalık basamağa sahip olabilir veya olmayabilir. Örn, 0.255, 128 veya -1.2.
<dimension> <dimension> bir birime bağlı olan <number> tipinde bir sayıdır. Örn., 45deg, 5s, or 10px. <dimension>; <length>, <angle>, <time>, ve <resolution> değer türlerini içeren bir kapsayıcı kategoridir.
<percentage><percentage> başka bir değerin bir kısmını temsil eder. Örn., 50%. Yüzde değeri her zaman başka bir miktara bağlıdır. Örn., bir öğenin uzunluğunun, üst değerin uzunluğuna bağlı olması gibi.
- -

Uzunluklar

- -

En sık karşılaşacağın sayısal tür <length>'dir. Örn. 10px (pixels) veya 30em. CSS'de kullanılan iki tür uzunluk vardır — bağıl ve mutlak. işlerin ne kadar karışabileceğini anlamak için farkı bilmek önemlidir.

- -

Mutlak uzunluk birimleri

- -

Aşağıdakilerin tümü mutlak uzunluk birimleridir — başka hiçbir şeye bağlı değildirler ve genellikle her zaman aynı boyutta kabul edilirler.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BirimİsimEşittir
cmSantimetre1cm = 96px/2.54
mmMilimetre1mm = 1/10th of 1cm
QÇeyrek milimetre1Q = 1/40th of 1cm
inİnç1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoint1pt = 1/72th of 1in
pxPiksel1px = 1/96th of 1in
- -

Bu birimlerin çoğu, ekran yerine baskı için kullanıldığında daha kullanışlıdır. Örn., genellike ekrandacm(santimetre) kullanmayız. Yaygın olarak kullanacağın tek değer px(piksel)'dir.

- -

Bağıl uzunluk birimleri

- -

Bağıl uzunluk birimleri başka bir şeye, belki de ana öğenin yazı tipinin boyutuna veya görünüm alanının boyutuna bağlıdır. Bağıl birimleri kullanmanın yararı, dikkatli bir planlama ile, metnin veya diğer öğelerin boyutunu sayfadaki diğer her şeye göre ölçeklenmesini sağlabilmendir.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BirimBağıl
emÖğenin veya ebeveyninin yazı tipi boyutuna.
exmevcut yazı tipinin x harfinin yüksekliğine.
chÖğenin yazı tipinin "0"(sıfır) karakterinin ilerleme ölçüsü(genişliği).
remKök(root) öğenin yazı tipi boyutu.
lhÖğenin satır yüksekliği.
vwGörüntü alanı genişliğinin %1'i.
vhGörüntü alanı yüksekliğinin %1'i.
vminGörüntü alanında küçük olan değerin %1'i.
vmaxGörüntü alanının büyük olan değerin %1!i
- -

Bir örnekle keşfedelim

- -

Aşağıdaki örnekte, bazı göreli ve mutlak uzunluk birimlerinin nasıl davrandığını görebilirsin. İlk kutunun {{cssxref("width")}} niteliği piksel cinsinden bir değeri vardır. Mutlak bir birim olarak, bu genişlik başka ne değişirse değişsin aynı kalacaktır.

- -

İkinci kutu, vw(görüntü alanı genişliği) birimlerinde ayarlanmış bir genişliğe sahiptir. Bu değer, görüntü alanı genişliğine bağlıdır ve bu nedenle 10vw, görüntü alanının genişliğinin yüzde 10'udur. Tarayıcı pencerenin genişliğini değiştirirsen, kutunun boyutu değişmelidir. Ancak bu örnek, bir <iframe> kullanılarak sayfaya gömüldüğü için tarayıcının genişliğinin değiştirilmesi işe yaramaz. Bunu çalışır bir şekilde görebilmek için, örneği kendi tarayıcı sekmesinde açtıktan sonra denemen gerekir.

- -

Üçücü kutu em birimi kullanır. Bunlar yazı tipi boyutuna bağlıdır. .wrapper sınıfının yazı tipi boyutunu 1em olarak ayarladım. Bu değeri değiştirdiğinde tüm öğelerin yazı tipi boyutunun değiştiğini göreceksin, ancak genişliği yazı tipi boyutuna bağlı olan sadece son öğe olduğu için birtek onun genişliği değişecektir.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

- -

ems ve rems

- -

em ve rem kutulardan metne kadar herhangi bir öğeyi boyutlandırırken en sık karşılaşacağın iki göreceli uzunluktur. Bunların nasıl çalıştıklarını ve aralarındaki farkları anlamak önemlidir, özellikle de stil metni veya CSS düzeni gibi daha karmaşık konulara geçmeye başladığında. Aşağıdaki örnek anlayabilmen için bir sunum sunar.

- -

HTML, iç içe geçmiş bir dizi listeden oluşur — Toplamda üç listemiz var ve her iki örnekte de aynı HTML kodları mevcut. Tek fark, ilkinin bir ems sınıfına ve ikicinin bir rems sınıfına sahip olmasıdır.

- -

Başlangıç olarak, <html> öğenin yazı tipi boyutu olarak 16px ayarladık.

- -

Özetlemek gerekirse, tipografi durumunda em birimi "ana öğenin yazı tipi boyutu" anlamına gelir. {{htmlelement("li")}} İçindeki {{htmlelement("ul")}} öğeleri ems sınıfına dahil olan ebeveynlerinden boyutlandırma alır. Böylece, her bir ardışık iç içe geçme düzeyi giderek büyür, çünkü her birinin yazı tiği boyutu 1.3em'dir, ebeveyninin yazı tiği boyutunun 1,3 katıdır.

- -

Özetlemek gerekirse, rem birimi "Kök(root) öğenin yazı tipi boyutu" anlamına gelir (rem "kök em" anlamına gelir). {{htmlelement("li")}} öğesinin içindeki {{htmlelement("ul")}} öğeleri, boyutlarını rems sınıfındaki rem tanımından dolayı kök öğenin<html> yazı tipi boyutundan alır. Birbirini izleyen her yuvada, kök öğenin yazı tipi değişmediğinden, bu öğelerdeki yazı tipi boyutlarıda sabit kalır.

- -

Bununla birlikte, <html> öğesinin font-size niteliğini CSS'de değiştirirsen, diğer her şeyin ona göre değiştiğini göreceksin — hem rem, hemde em buyutlu metinler.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

- -

Yüzdeler

- -

Çoğu durumda, bir yüzde, uzunlukla aynı şekilde ele alınır. Yüzde olan değer, her zaman başka bir değere göre ayarlanmış olmaktadır. Örneğin, bir öğeyi font-size yüzde olarak ayarlarsan, bu öğenin üst öğesinin font-size nitelik değerinin bir yüzdesi olacaktır. Bir width değer için yüzde kullanırsan, üst öğenin width nitelik değerinin yüzdesi olacaktır.

- -

Aşağıdaki örnekte, yüzde boyutlu iki kutu ve iki piksel boyutlu kutu aynı sınıf adlarına sahiptir. Her iki set de sırasıyla 200 piksel ve %40 genişliğindedir.

- -

Aradaki fark, iki kutudan oluşan ikinci setin 400 piksel genişliğinde bir çerçevenin içinde olmasıdır. İkinci 200 piksel genişliğindeki kutu birincisi ile aynı genişliktedir. ancak ikinci %40'lık kutu şimdi 400 pikselin %40'na sahip olduğundan ilkinden daha dardır!

- -

Bunun nasıl çalıştığını görmek için çerçevenin genişliğini veya yüzde değerini değiştirmeyi dene.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

- -

Sonraki örnekte yazı tipi boyutları yüzde olarak belirlenmiştir. <li> öğesinin font-size nitelik değeri %80'lik bir paya sahip olduğu ve iç içe yerleştirilmiş liste öğelerinin, boyutlarını üstlerinden devraldığından her bir basamakta giderek küçülür.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

- -

Birçok değer türü bir uzunluk veya yüzdeyi kabul ederken, yalnızca uzunluğu kabul eden değer türlerinin de olduğunu unutmayın. MDN nitelik referans sayfalarında hangi değerlerin kabul edilip/edilmediğini öğrenebilirsin. İzin verilen değerler <length-percentage>'ri içeriyorsa, bir uzunluk veya yüzde kullanılabilir. izin verilen değer yalnızca <length> içeriyorsa, yüzde kullanmak mümkün değildir.

- -

Sayılar

- -

Bazı değer türleri, herhangi bir birim eklenmeden sayıları kabul eder. Birimsiz bir sayıyı kabul eden bir niteliğe örnek, opacity bir öğenin opaklığını(ne kadar şeffaf olduğunu) kontrol eden özelliktir. Bu özellik 0(tamamen şeffaf) ve 1(şeffaflık yok) arasında bir sayıyı kabul eder.

- -

Aşağıdaki örnekte, opacity değerini değiştirmeyi deneyin. 0 ve 1 arasında çeşitli ondalık değerler vererek kutunun şeffaflığının nasıl değiştiğine dikkat edin.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

- -
-

Not:CSS'de değer olarak bir sayı kullandığında, bu sayı tırnak içine alınmamalıdır.

-
- -

Renk

- -

CSS'de rengi belirlemenin birçok yolu vardır ve bunlardan bazıları yeni yeni desteklenmeye başlamıştır. Metin rengini, arka plan rengini veya başka herhangi bir öğeyi belirtirken aynı rengi kullanabilirsin.

- -

Modern bilgisayarlarda bulunan standart renk sistemi 24bit olup, kanal başına 256 farklı değerde kırmızı, yeşil ve mavi kombinasyonu aracılığıyla yaklaşık 16,7 milyon farklı rengin görüntülenmesini sağlar (256 x 256 x 256 = 16.777.216.) CSS'de renkleri belirlemenin bazı yollarına bir göz atalım.

- -
-

Not: Bu eğitimde, iyi bir tarayıcı desteğine sahip olan renkleri belirlemenin yaygın yöntemlerine bakacağız, başkaları da var ama anlatacaklarım kadar iyi desteğe sahip değiller ve daha az yaygınlardır.

-
- -

Anahtar kelime renkleri

- -

Renk belirtmenin basit ve anlaşılır bir yolu oldukları için, buradaki ve MDN'nin başka bir yerindeki örneklerde sıklıkla kullanıldıklarını göreceksin. Bu anahtar kelimelerinin bazıları oldukça eğlenceli isimlere sahip! <color> değer türü için sayfada tam bir liste görebilirsin.

- -

Nasıl çalıştıklarını hakkında daha fazla fikir edinmek için aşağıdaki canlı örneklerde farklı renk değerleriyle oynamayı deneyebilirsin.

- -

Onaltılık RGB değerleri

- -

Karşılaşacağın sonraki renk veri türü değeri onaltılık kodlardır. Her bir onaltılık değer, bir karma/pound sembolünden(#) ve ardından altı onaltılık sayıdan oluşur; bunların her biri 0 ile f(15'şi temsil eder) arasında 16 değerden birini alabilir. yani 0123456789abcdef. Her bir değer çifti, kanallardan birini (kırmızı, yeşil ve mavi) temsil eder ve her biri için mevcut 256 değerden herhangi birini belirlememize olanak tanır (16 x 16 = 256).

- -

Bu değerler biraz daha karmaşık ve anlaşılması daha zordur, ancak anahtar kelimelerden çok daha yönlüdürler — renk düzeninde kullanmak istediğin herhangi bir rengi temsil etmek için onaltılık değerleri kullanabilirsin.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

- -

Renklerin nasıl değiştiğini görmek için değerleri değiştirmeyi deneyin.

- -

RGB ve RGBA deperleri

- -

Burada bahsedeceğimiz üçüncü şema RGB'dir. RGB değeri, kırmızı, yeşil ve mavi renklerinin kanal değerlerini, onaltılık değerlerle hemen hemen aynı şekilde temsil eden üç parametre verilen bir fonsiyondur — rgb(). onaltılık sistemle arasındaki fark, her kanalın iki onaltılık rakamla değil, 0 ile 255 arasında bir sayıyla temsil edilmesidir — anlaşılması biraz daha kolaydır.

- -

RGB renklerini kullanmak için son örneğimizi yeniden yazalım:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

- -

Ayrıca RGBA veri türünü de kullanabilirsin — bunlar RGB renkleriyle tamamen aynı şekilde çalışır ve herhangi bir RGB değerini kullanabilirsin. Sadece, şeffaflığı kontrol eden rengin alfa kanalını temsil eden dördüncü bir değeri vardır. Bu değeri 0 olarak ayarlarsan rengi tamamen şeffaf hale getirir, 1 olarak ayarlarsan tamamen opak hale getirir. Ara değerler farklı şeffaflık düzeyi verir.

- -
-

Not:  Bir renk üzerinde bir alfa kanalı ayarlamanın, daha önce baktığımız {{cssxref("opacity")}} niteliğini kullanmaktan önemli bir farkı vardır. Opaklığı kullandığında, öğeyi ve içindeki her şeyi opak yaparsın, RGBA renklerini kullanmak ise yalnızca belirttiğin rengi opak yapar.

-
- -

Aşağıdaki örnekte, renkli kutularımızın bulunduğu bloğa bir arka plan resmi ekledim. Daha sonra kutuları farklı opaklık değerlerine sahip olacak şekilde ayarladım — alfa kanalı değeri daha küçük olduğunda arka planın nasıl daha fazla göründüğüne dikkat edin.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

- -

Bu örnekte, renk çıktısını nasıl etkilediğini görmek için alfa kanalı değerlerini değiştirmeyi deneyin.

- -
-

Not: rgba() ile rgb()  ve hsl() ile hsla()(aşağıya bakın) birbirinden saf takma ad ile ayrılan ve aynı şekilde hareket edecek şekilde tarayıcılar tarafından güncellendi. Yani, örneğin hem rgba(), hemde rgb() ile alfa kanalı değerleri olmadan renkleri oluşturabiliyoruz. Yukarıdaki örneğin rgba() fonksiyonunu rgb() olarak değiştirin ve renklerin hala çalışıp çalışmadığını görün! Hangi stili kullanacağın size bağlıdır, ancak farklı işlevleri kullanmak, şeffaf olmayan ve şeffaf olan renk tanımlarını ayırmak için daha iyi tarayıcı desteği sağlar ve kodunuzda şeffaf renklerin nerede tanımlandığının görsel bir göstergesi olarak işlev görebilir.

-
- -

HSL ve HSLA değeri

- -

RGB'den biraz daha az desteklenen HSL renk modelidir(IE'nin eski sürümlerinde desteklenmez) ve tasarımcıların büyük ilgisinden sonra uygulanmıştır. hsl() fonksiyonu, kırmızı, yeşil ve mavi değerleri yerine 16,7 milyon rengi ayırt etmek için kullanılan ton, doygunluk ve açıklık değerlerini kabul eder, ancak farklı bir şekilde:

- -
    -
  • Ton: Rengin temel tonudur. Bu, renk tekerleği etrafındaki açıları temsil eden, 0 ile 360 arasında bir değer alır.
    • -
  • Doygunluk: Renk ne kadar doygun? Bu, 0'ın renk olmadığı (gri gölgesi olarak görünecektir) ve %100'ün tam renk doygunluğu olduğu %0 ile %100 arasında bir değer alır.
    • -
  • Hafiflik: Renk ne kadar açık veya parlak? Bu, 0'ın ışık olmadığı (tamamen siyah görünür) ve %100'ü tam ışık olduğu(tamamen beyaz görünür) %0 ile %100 arasında bir değer alır
    • -
- -

HSL renklerini şu şekilde kullanmak için RGB örneğini güncelleyebiliriz:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

- -

RGB'nin RGBA'ya sahip olması gibi, HSL'nin de bir HSLA tipinde bir eşdeğeri vardır, bu da alfa kanalını belirtmen için size aynı yeteneği verir. Bunu aşağıda RGBA örneğimi HSLA renklerini kullanacak şekilde değiştirerek gösterdim.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

- -

Bu renk değerlerinden herhangi birini projelerinde kullanabilirsin. Çoğu proje için bir renk paletine karar vermen ve ardından bu renkleri — ve seçtiğin rengi belirleme yöntemini — tüm proje boyunca aynı modeli kullanman muhtemeldir. Renk modellerini karıştırıp kullanabilirsin, ancak tutarlılık için genellikle en iyisi projenin bütününde, aynı modeli kullanmandır!

- -

Görüntüler

- -

<image> değer türü kullanıldığı herhangi bir yerde geçerli bir görüntü değeri taşır. Bu, bir url() fonksiyonu ile işaret edilen gerçek bir görüntü dosyası veya bir gradyan olabilir.

- -

Aşağıdaki örnekte, CSS background-image niteliğine tanımlanan bir görüntü ve gradyanı gösterdik.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

- -
-

Not: <image> için olası başka veri türleri de vardır, ancak bunlar daha yenidir ve şu anda daha az tarayıcı desteğine sahiptir. Daha fazla bilgi edinmek istiyorsan, MDN'deki <image> sayfasına bakabilirsin.

-
- -

Konum

- -

<position> değer türü, arka plan görüntüsünü, 2 Boyutlu koordinat sistemine göre öğeye konumlandırmak(background-position üzerinden) için kullanılan bir değerdir. Değer türü, top, left, bottom, right, ve center gibi anahtar kelimeleri alabilir, kutunun üst ve sol kenarından uzaklıkları temsil eden 2 boyutlu bir koordinatlamayı da kullanabilir.

- -

Tipik bir konum değeri iki değerden oluşur — birincisi konumu yatay, ikincisi dikey olarak ayarlar. Yalnızca bir eksen için değerler belirtirsen, diğeri varsayılan olacaktır: center.

- -

Aşağıdaki örnekte, bir anahtar kelime kullanarak kabın üstünden 40 piksel uzaklıkta, sağ tarafa dayalı bir arka plan yerleştirdik:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

- -

Görüntünün nasıl hareket ettirebileceğini görebilmek içn bu değerlerle oynayabilirsin.

- -

Dizeler ve tanımlayıcılar

- -

Daha önceki örneklerde, anahtar kelimelerin nerede ve nasıl kullanıldıklarını gördük(Örn., <color> değer türünde kullandığımız red, black, rebeccapurple, ve goldenrod  anahtar kelimeleri gibi). Bu anahtar kelimeler, tanımlayıcılar olarak ifade edilir ve CSS'de onların özel değer olduklarını anlar. Bu nedenle, alıntı yapılmaz — dizeler olarak değerlendirilmezler.

- -

CSS'de dizeleri kullandığımız yerler de var. örneğin oluşturulan içeriği belirtirken. Bu durumda, değer bir dizge olduğunu göstemek için tırnak içine alınır. Aşağıdaki örnekte, tırnak içinde oluşturulmuş bir içerik dizesi ile birlikte alıntılanmamış renk anahtar sözcükleri kullanıyoruz.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

- -

Fonksiyonlar

- -

Bakacağımız son değer türü, fonksiyonlar olarak bilinen değerler grubudur. Programlamada, bir fonksiyon, hem geliştirici hem de bilgisayar tarafından minimum çabayla tekrar eden bir görevi tamamlamak için birden çok kez çalıştırılabilen ve yeniden kullanılabilir olan kod bölümüdür. Fonksiyonlar genellikle JavaScript, Python veya C++ gibi dillerle ilişkilendirilir, ancak nitelik değerleri olarak CSS'de de bulunurlar. Zaten renkler bölümünde eylem fonksiyonlarını gördük — rgb(), hsl() ve bir dosyadan görüntüyü döndürmek için kullanılan url() gibi.

- -

calc() geneneksel bir programlama dilinde bulabileceğin fonksiyonlara benzeyen bir CSS fonksiyonudur. Bu fonksiyon, basit hesaplamalar yapabilmeni sağlar. Projen için CSS'i yazarken tanımlayamadığın değerleri hesaplamak istiyorsan ve tarayıcının çalışma zamanında sizin için hesaplama yapmasını istediğin durumlarda yararlıdır.

- -

Örneğin, aşağıda calc() fonksiyonunu kutunun genişliğini %20 + 100px yapmak için kullanıyoruz. %20, ebeveyn öğesinin genişliğinden hesaplanır. .wrapper sınıfında tanımlanan genişlik değeri değişirse oğul öğenin genişliğide değişir. Bu hesaplamayı önceden yapamayız çünkü ebeveynin %20'sinin ne olacağını bilmiyoruz, bu yüzden calc() fonksiyonunu kullanarak tarayıcıya bunu bizim için yapmasını söyleyebiliriz.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

- -

Becerilerini test et!

- -

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test et: Değerler ve birimler.

- -

Özet

- -

Bu, karşlaşabileceğin en yaygın değer ve birim türlerinin hızlı bir şekilde gözden geçerilmesi olmuştur. CSS Değerleri ve birimleri referans sayfasındaki tüm farklı türlere göz atabilirsin; bu derslerde çalışırken bunların çoğuyla karşılaşacaksın.

- -

Unutulmaması gereken en önemli konu, her özelliğin izin verilen değer türlerinin tanımlanmış bir listesine sahip olması ve her değer türünün değelerinin ne olduğunu açıklayan bir tanıma sahip olmasıdır. Daha sonra MDN'de ayrıntılara bakabilirsin.

- -

Örneğin <image>  bir renk gradyanı oluşturmana da izin veren yaklaşımı yararlıdır, ancak yazılışından bu yaklaşıma sahip olduğunun anlaşılması zordur.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

- -

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'ini düzenleme
    13. -
diff --git a/files/tr/learn/css/building_blocks/values_tasks/index.html b/files/tr/learn/css/building_blocks/values_tasks/index.html deleted file mode 100644 index 50d9bac560..0000000000 --- a/files/tr/learn/css/building_blocks/values_tasks/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 'Becerilerinizi test edin: değerler ve birimler' -slug: Learn/CSS/Building_blocks/Values_tasks -tags: - - Acemi - - Beginner - - CSS - - Example - - Örnek -translation_of: Learn/CSS/Building_blocks/Values_tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Values_tasks ---- -
{{LearnSidebar}}
- -
- -

Bu görevin amacı, CSS Değerleri ve Birimleri dersinde incelediğimiz bazı değerler ve birimler hakkındaki anlayışınızı kontrol etmenize yardımcı olmaktır.

- -
-

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

- -

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.

-
- -

Birinci Görev

- -

bu görevde, ilk liste öğesine onaltılık renk kodları kullanılarak bir arka plan rengi verilmiştir. Göreviniz, aynı rengi farklı formatlarda kullanarak CSS'i tamamlamak ve ayrıca arka planı yarı saydam yapmanız gereken son bir liste öğeniz var.

- -
    -
  • İkinci liste öğesini RGB rengini kullanmalıdır.
    • -
  • üçüncüsü HSL rengini kullanmalıdır.
    • -
  • Dördüncüsü RGB rengini kullanmalı ancak alfa kanalı 0.2 olarak ayarlanmalıdır.
    • -
- -

Onaltılık renk için dönüşümleri Bu bağlantıda bulabilirsiniz.CSS'deki değerleri nasıl kullanağınızı bulmanız gerekir.

- -

Four list items. The first three with the same background color and the last with a lighter background.

- -

Bitmiş öreği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/values/color.html", '100%', 1000)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

İkinci görev

- -

Bu görevde çeşitli metin öğelerinin boyutunu ayarlamanız gerekir.

- -
    -
  • {{HTMLElement("h1")}} 50 piksel olmalıdır.
    • -
  • {{HTMLElement("h2")}} 2em olmalıdır.
    • -
  • {{HTMLElement("p")}} 16 piksel olmalıdır.
    • -
  • {{HTMLElement("h1")}}'in ilk kardeşi olan {{HTMLElement("p")}}, {{HTMLElement("h1")}} %120'si olmalıdır.
    • -
- -

Some text at varying sizes.

- -

Örneği resimde gösterildiği gibi yeniden oluşturmak için canlı kodu düzenlemeyi deneyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

Üçüncü görev

- -

Bu görevde, arka plan resmini yatay olarak ortalayacak şekilde ve kutunun üstünden %20 oranında hareket ettirmeniz gerekir.

- -

A stat centered horizontally in a box and a short distance from the top of the box.

- -

Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu güncellemeyi deneyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarını editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

Değerlendirme veya daha fazla yardım

- -

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

- -

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

- -
    -
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. -
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: -
      -
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • -
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • -
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • -
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • -
    -
    3. -
diff --git a/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html b/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html deleted file mode 100644 index 63c0f98f36..0000000000 --- a/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Yazma Modları ve Mantıksal Özellikler' -slug: Learn/CSS/Building_blocks/Writing_Modes_Tasks -tags: - - Başlangıç - - Beginner - - CSS -translation_of: Learn/CSS/Building_blocks/Writing_Modes_Tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Writing_Modes_Tasks ---- -
{{LearnSidebar}}
- -
- -

Bu görevin amacı, Yazma Modları ve Mantıksal özellikler konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır. Bu görevleri tamamlamak için bilmeniz gerekenler, Farklı metin yönlerini kullanma dersinde ele alınmaktadır.

- -
-

Not: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması da yararlı olabilir.

- -

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.

-
- -

1. Görev

- -

Örnekteki kutu, yatay bir yazma modu ile görüntülenir. Sağdan sola dikey yazma modunu kullanması için CSS satırı ekleyebilir misiniz? Öreneğiniz aşağıdaki resme benzemelidir.

- -

A box with a vertical writing mode

- -

Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.html", '100%', 800)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarının editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

2. Görev

- -

Aşağıdaki örnekte, dikey olarak döndürüldüğünde kutunun en boy oranını korumak için width ve height nitelikleri yerine mantıksal nitelikleri kullanın. Nihai sonucunuz resimdeki gibi görünmelidir.

- -

Two boxes one horizontal the other vertical

- -

Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarının editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

3. Görev

- -

Kenar boşluğu, kenarlık ve dolgu özelliklerinin tanımlanması için top, left, bottom ve right yerine mantıksal sürümlerini kullanın. Bunun nasıl görünmesi gerektiğini ağaşıdaki resimde görebilirsiniz.

- -

Use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right. You can see how this should look in the image below.

- -

Two boxes one horizontal one vertical with different margin, border and padding

- -

Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}

- -
-

Değerlendirme ve daha ileri çalışma için bu görevin, kaynak kodlarının editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.

-
- -

Değerlendirme veya daha fazla yardım

- -

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

- -

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

- -
    -
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. -
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: -
      -
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • -
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • -
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • -
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • -
    -
    3. -
diff --git a/files/tr/learn/css/css_layout/index.html b/files/tr/learn/css/css_layout/index.html deleted file mode 100644 index a255fa9a34..0000000000 --- a/files/tr/learn/css/css_layout/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: CSS layout -slug: Learn/CSS/CSS_layout -tags: - - Beginner - - CSS - - Floating - - Grids - - Guide - - Landing - - Layout - - Learn - - Module - - Multiple column - - NeedsTranslation - - Positioning - - TopicStub - - flexbox - - float -translation_of: Learn/CSS/CSS_layout -original_slug: Öğren/CSS/CSS_layout ---- -
{{LearnSidebar}}
- -

Bu noktaya kadar CSS'in temellerini, metnin nasıl şekillendirileceğini ve içeriğinizin iiçnde bulunduğu kutualrı nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanına ve birbirlerine göre doğru yere nasıl yerleştiriceğinize bakacağız. CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bir göz atacağız.

- -
-

Bir Web ön-uç(front-end)  geliştiricisi mi olmak istiyorsun?

- -

Hedefinize ulaşmak için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.

- -

Başlayın

-
- -

Ön koşullar

- -

Bu üniteye başlamdan önce şunları yapmalısınız:

- -
    -
  1. HTML'ye Giriş ünitesinde anlatıldığı gibi temel HTML bilgisine sahip olun.
    2. -
  2. CSS'e Giriş bölümünde anlatıldığı gibi, temel CSS bilgisine sahip olun.
    3. -
  3. Kutuları şekillendirme hakkında bilgi sahibi olun.
    4. -
- -
-

Not: Kendi dosayalrınızı oluşturma yeteneğinizin olmadığı bir bilgisayar/table/başka bir cihaz üzerinde çalışıyorsanız, JSBin veya Glitch gibi bir çevrim içi kodlama programıyla okd örnelerinin çoğunu deneyebilirsiniz.

-
- -

Dersler

- -

Bu dersler, CSS'de bulunan temel düzen araçları ve teknikleri hakkında talimat sağlayacaktır. Derslerin sonunda, bir web sayfası düzenleyerek düzen yöntemlerini anlamanıza yardımcı olacak değerlendirmelerimiz mevcuttur.

- -
-
CSS mizanpajına giriş
-
bu derste, önceki derslerde değindiğimiz bazı CSS mizanpaj özelliklerini — farklı {{cssxref("display")}} nitelik değerleri gibi — özetleyecek ve  bu ünite boyunca ele alacağımız bazı kavramları tanıtacağız.
-
Normal akış(Normal Flow)
-
Web sayfalarındaki öğeler, biz bunu değiştirmek için bir şeyler yapana kadar kendilerini normal akışa göre düzenler. Bu derste, nasıl değiştirileceğini öğrenmek için normal akışın temellerini  açıklayacağız.
-
Esnek kutular (Flexbox)
-
Flexbox, öğelerin satırlar veya sütunlar halinde yerleştirmek için tek boyutlu bir yerleşim yöntemidir. Öğeler ek alanı doldurmak için esner ve daha küçük alanlara sığacak şekilde küçülür. Bu derste tüm temelleri açıklayacağız. Bu dersi inceledikten sonra, devam etmeden önce anlayıp anlamadığınızı kontrol etmek için flexbox becerilerinizi test edebilirsiniz.
-
Izgaralar(Grids)
-
CSS Izgara(Grid) düzeni, web için iki boyutlu bir düzen sistemidir. içeriği satırlar ve sütunlar halinde yerleştirmenize olanak tanır ve karmaşık düzenler oluşturmayı kolaylaştıran birçok özelliğe sahiptir. Bu derste size sayfa düzenine başlamak için bilmeniz gereken her şeyi verecek, ardından devam etmeden önce ızgara(grid) becerilerinizi test edecektir.
-
Yüzen nesneler (Floats)
-
Başlangıçta metin blokları içerisindeki görüntüleri konumlandırmak için kullanılan {{cssxref("float")}} niteliği, tüm öğelerin konumlandırılması ve web sayfalarıda sütunlar oluşturmak için kullanılan en yaygın araçlardan biri haline geldi. Fakat Flexbox ve Grid'in kullanıma sokulmasıyla, bu derste açıklandığı gibi asıl kullanım amacına geri döndü.
-
Konumlandırma(Positioning)
-
Konumlandırma, öğeleri normal belge mizanpajı akışından çıkarmanıza ve bunların farklı şekilde davranmasını sağlar. örn öğelerin birbirinin üstüne durabilmesini ve/veya taryıcı görünüm alanı içinde her zaman aynı konumda kalmasını sağlar. Bu derste farklı {{cssxref("position")}} değerlerinin nasıl kullanılacağını açıklamaktadır.
-
Birden çok sütun düzeni
-
Çok sütunlu düzen özelliği, bir gazetede görebileceğiniz gibi, içeriği sütunlar halinde yerleştirmek için bir yöntem sunar. Bu derste, bu özelliğin nasıl kullanılacağını açıklamaktadır.
-
Duyarlı tasarım
-
Web özellikli cihazlarda daha çeşitli ekran boyutları ortaya çıktıkça, duyarlı web tasarımı (RWD) kavramı ortaya çıkmıştır: web sayfalarının düzenlerini ve görünümlerini farklı ekran genişliklerine, çözünürlüklerine vb. uyacak şekilde değiştirmesine izin veren bir dizi uygulama. Bir web sayfasının farklı cihazlarda tasarım şeklimizi değiştiren bir fikirdir ve bu derste, bu konuda uzmanlaşmak için bilmeniz gereken ana teknikleri anlamanıza yardımcı olacağız.
-
Acemiler için medya sorguları klavuzu
-
CSS Medya Sorugusu size, tarayıcı ve cihaz ortamının genişliğinin belirttiğiniz kural ile eşleştiğinde uygulamak istediğiniz CSS tanımlarını uygulamanıza olanak tanır. Ortam sorguları, görüntü alanının boyutuna bağlı olarak farklı düzenler oluşturmanıza olanak sağladığından, duyarlı web tasarımının önemli bir parçasıdır, ayrıca sitenizin üzerinde çalıştığı ortamla ilgili diğer bilgileride size sağlayabilir, örneğin kullanıcı fare yerine dokunmatik ekran kullanıyor. Bu derste önce medya sorgualraında kullanılan sözdizimi hakkında bilgi edinecek ve ardından bunları basit bir tasarımın nasıl duyarlı hale getirilebileceğini gösteren işlenmiş bir örnekte kullanmayı deneyeceksiniz.
-
Eski düzen yönetmleri
-
Izgara sistemleri, CSS mizanpajlarında kullanılan çok yaygın bir özelliktir ve CSS Grid Layout'tan önce kayan öğeler veya diğer mizanpaj özelliklerinde kullanılmaktaydılar. Düzeninizi belirli sayıda sütun (örneğin 4, 6 veya 12) olarak hayal edin ve ardından içerik sütunlarınızı bu hayali sütunların içine sığdırın. Bu derste, daha eski bir projede çalışıyorsanız nasıl kullanıldığını anlamanız için bu eski yöntemlerin nasıl çalıştığını inceleyceğiz.
-
Eski tarayıcıları desteklemek
-
Bu derste, tasarımlarınız için ana yerleşim yöntemleri olarak Flexbox ve Grid'i kullanmanızı öneririz. Bununla birlikte, sitenize, kullandığınız yöntemleri desteklemeyen eski  tarayıcıları kulllanan ziyaretçiler olacaktır. Bu, web'de her zaman geçerli olacaktır — yani özellikler geliştirildikçe, farklı tarayıcılar farklı şeylere öncelik verecektir. Bu derste, eski teknoloji kullanıcılarını engellemeden modern web tekniklerinin nasıl kullanılacağını açıklamaktadır.
-
Değerlendirme: Temel düzeni anlama
-
Bir web sayfası düzenleyerek farklı düzen yöntemlerini hakkındaki bilginizi test etmek için bir değerlendirme.
-
- -

Ayrıca bakınız

- -
-
Pratik konumlandırma örnekleri
-
Bu derst, konumlandırmayla ne tür şeyler yapabilceğinizi göstermek için bazı gerçek dünya örneklerini nasıl oluşturacağınızı gösterir.
-
diff --git a/files/tr/learn/css/css_layout/introduction/index.html b/files/tr/learn/css/css_layout/introduction/index.html deleted file mode 100644 index ba84909907..0000000000 --- a/files/tr/learn/css/css_layout/introduction/index.html +++ /dev/null @@ -1,708 +0,0 @@ ---- -title: CSS mizanpajına giriş -slug: Learn/CSS/CSS_layout/Introduction -translation_of: Learn/CSS/CSS_layout/Introduction -original_slug: Öğren/CSS/CSS_layout/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
- -

This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.

- - - - - - - - - - - - -
Prerequisites:The basics of HTML (study Introduction to HTML), and an idea of How CSS works (study Introduction to CSS.)
Objective:To give you an overview of CSS page layout techniques. Each technique can be learned in greater detail in subsequent tutorials.
- -

CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.  The page layout techniques we'll be covering in more detail in this module are

- -
    -
  • Normal flow
    • -
  • The {{cssxref("display")}} property
    • -
  • Flexbox
    • -
  • Grid
    • -
  • Floats
    • -
  • Positioning
    • -
  • Table layout
    • -
  • Multiple-column layout
    • -
- -

Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.

- -

Normal flow

- -

Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout. Let's look at a quick HTML example:

- -
<p>I love my cat.</p>
-
-<ul>
-  <li>Buy cat food</li>
-  <li>Exercise</li>
-  <li>Cheer up friend</li>
-</ul>
-
-<p>The end!</p>
- -

By default, the browser will display this code as follows:

- -

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

- -

Note here how the HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.

- -

The elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph.

- -
-

Note: The direction in which block element contents are laid out is described as the Block Direction. The Block Direction runs vertically in a language such as English, which has a horizontal writing mode. It would run horizontally in any language with a Vertical Writing Mode, such as Japanese. The corresponding Inline Direction is the direction in which inline contents (such as a sentence) would run.

-
- -

For many of the elements on your page the normal flow will create exactly the layout you need, however for more complex layouts you will need to alter this default behavior using some of the tools available to you in CSS. Starting with a well-structured HTML document is very important, as you can then work with the way things are laid out by default rather than fighting against it.

- -

The methods that can change how elements are laid out in CSS are as follows:

- -
    -
  • The {{cssxref("display")}} property — Standard values such as block, inline or inline-block can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see Types of CSS boxes for more information). We also have entire layout methods that are switched on via specific display values, for example CSS Grid and Flexbox, which alter how elements inside the element they are set on are laid out.
    • -
  • Floats — Applying a {{cssxref("float")}} value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.
    • -
  • The {{cssxref("position")}} property — Allows you to precisely control the placement of boxes inside other boxes. static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewport.
    • -
  • Table layout — features designed for styling the parts of an HTML table can be used on non-table elements using display: table and associated properties.
    • -
  • Multi-column layout — The Multi-column layout properties can cause the content of a block to layout in columns, as you might see in a newspaper.
    • -
- -

The display property

- -

The main methods of achieving page layout in CSS are all values of the display property. This property allows us to change the default way something displays. Everything in normal flow has a value of display, used as the default way that elements they are set on behave. For example, the fact that paragraphs in English display one below the other is due to the fact that they are styled with display: block. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line. This is because the {{htmlelement("a")}} element is display: inline by default.

- -

You can change this default display behavior. For example, the {{htmlelement("li")}} element is display: block by default, meaning that list items display one below the other in our English document. If we change the display value to inline they now display next to each other, as words would do in a sentence. The fact that you can change the value of display for any element means that you can pick HTML elements for their semantic meaning, without being concerned about how they will look. The way they look is something that you can change.

- -

In addition to being able to change the default presentation by turning an item from block to inline and vice versa, there are some bigger layout methods that start out as a value of display. However, when using these, you will generally need to invoke additional properties. The two values most important for our purposes when discussing layout are display: flex and display: grid.

- -

Flexbox

- -

Flexbox is the short name for the Flexible Box Layout Module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply display: flex to the parent element of the elements you want to lay out; all its direct children then become flex items. We can see this in a simple example.

- -

The HTML markup below gives us a containing element, with a class of wrapper, inside which are three {{htmlelement("div")}} elements. By default these would display as block elements, below one another, in our English language document.

- -

However, if we add display: flex to the parent, the three items now arrange themselves into columns. This is due to them becoming flex items and being affected by some initial values that flexbox sets on the flex container. They are displayed in a row, because the initial value of {{cssxref("flex-direction")}} set on their parent is row. They all appear to stretch to the height of the tallest item, because the initial value of the {{cssxref("align-items")}} property set on their parent is stretch. This means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. The items all line up at the start of the container, leaving any extra space at the end of the row.

- -
- - -
.wrapper {
-  display: flex;
-}
-
- -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
-
- -

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

- -

In addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. These properties, among other things, can change the way that the items flex, enabling them to expand and contract to fit into the available space.

- -

As a simple example of this, we can add the {{cssxref("flex")}} property to all of our child items, with a value of 1. This will cause all of the items to grow and fill the container, rather than leaving space at the end. If there is more space then the items will become wider; if there is less space they will become narrower. In addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust size to take up the same amount of space, whatever that is.

- -
- - -
.wrapper {
-    display: flex;
-}
-
-.wrapper > div {
-    flex: 1;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-</div>
-
-
- -

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

- -
-

Note: This has been a very short introduction to what is possible in Flexbox, to find out more, see our Flexbox article.

-
- -

Grid Layout

- -

While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.

- -

Once again, you can switch on Grid Layout with a specific value of display — display: grid. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using display: grid, we are also defining some row and column tracks on the parent using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties respectively. We've defined three columns each of 1fr and two rows of 100px. I don’t need to put any rules on the child elements; they are automatically placed into the cells our grid has created.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-    <div class="box4">Four</div>
-    <div class="box5">Five</div>
-    <div class="box6">Six</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_1', '300', '330') }}

- -

Once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above. In the second example below we have defined the same grid, but this time with three child items. We've set the start and end line of each item using the {{cssxref("grid-column")}} and {{cssxref("grid-row")}} properties. This causes the items to span multiple tracks.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
-.box1 {
-    grid-column: 2 / 4;
-    grid-row: 1;
-}
-
-.box2 {
-    grid-column: 1;
-    grid-row: 1 / 3;
-}
-
-.box3 {
-    grid-row: 2;
-    grid-column: 3;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_2', '300', '330') }}

- -
-

Note: These two examples are just a small part of the power of Grid layout; to find out more see our Grid Layout article.

-
- -

The rest of this guide covers other layout methods, which are less important for the main layout structures of your page but can still help you achieve specific tasks. By understanding the nature of each layout task, you will soon find that when you look at a particular component of your design the type of layout best suited to it will often be clear.

- -

Floats

- -

Floating an element changes the behavior of that element and the block level elements that follow it in normal flow. The element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item.

- -

The {{cssxref("float")}} property has four possible values:

- -
    -
  • left — Floats the element to the left.
    • -
  • right — Floats the element to the right.
    • -
  • none — Specifies no floating at all. This is the default value.
    • -
  • inherit — Specifies that the value of the float property should be inherited from the element's parent element.
    • -
- -

In the example below we float a <div> left, and give it a {{cssxref("margin")}} on the right to push the text away from the element. This gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern web design.

- -
- - -
<h1>Simple float example</h1>
-
-<div class="box">Float</div>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-
- -
-.box {
-    float: left;
-    width: 150px;
-    height: 150px;
-    margin-right: 30px;
-}
-
-
- -

{{ EmbedLiveSample('Float_1', '100%', 600) }}

- -
-

Note: Floats are fully explained in our lesson on the float and clear properties. Prior to techniques such as Flexbox and Grid Layout floats were used as a method of creating column layouts. You may still come across these methods on the web; we will cover these in the lesson on legacy layout methods.

-
- -

Positioning techniques

- -

Positioning allows you to move an element from where it would be placed when in normal flow to another location. Positioning isn’t a method for creating your main page layouts, it is more about managing and fine-tuning the position of specific items on the page.

- -

There are however useful techniques for certain layout patterns that rely on the {{cssxref("position")}} property. Understanding positioning also helps in understanding normal flow, and what it is to move an item out of normal flow.

- -

There are five types of positioning you should know about:

- -
    -
  • Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here".
    • -
  • Relative positioning allows you to modify an element's position on the page, moving it relative to its position in normal flow — including making it overlap other elements on the page.
    • -
  • Absolute positioning moves an element completely out of the page's normal layout flow, like it is sitting on its own separate layer. From there, you can fix it in a position relative to the edges of the page's <html> element (or its nearest positioned ancestor element). This is useful for creating complex layout effects such as tabbed boxes where different content panels sit on top of one another and are shown and hidden as desired, or information panels that sit off screen by default, but can be made to slide on screen using a control button.
    • -
  • Fixed positioning is very similar to absolute positioning, except that it fixes an element relative to the browser viewport, not another element. This is useful for creating effects such as a persistent navigation menu that always stays in the same place on the screen as the rest of the content scrolls.
    • -
  • Sticky positioning is a newer positioning method which makes an element act like position: static until it hits a defined offset from the viewport, at which point it acts like position: fixed.
    • -
- -

Simple positioning example

- -

To provide familiarity with these page layout techniques, we'll show you a couple of quick examples. Our examples will all feature the same HTML, which is as follows:

- -
<h1>Positioning</h1>
-
-<p>I am a basic block level element.</p>
-<p class="positioned">I am a basic block level element.</p>
-<p>I am a basic block level element.</p>
- -

This HTML will be styled by default using the following CSS:

- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
-}
-
- -

The rendered output is as follows:

- -

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

- -

Relative positioning

- -

Relative positioning allows you to offset an item from the position in normal flow it would have by default. This means you could achieve a task such as moving an icon down a bit so it lines up with a text label. To do this, we could add the following rule to add relative positioning:

- -
.positioned {
-  position: relative;
-  top: 30px;
-  left: 30px;
-}
- -

Here we give our middle paragraph a {{cssxref("position")}} value of relative — this doesn't do anything on its own, so we also add {{cssxref("top")}} and {{cssxref("left")}} properties. These serve to move the affected element down and to the right — this might seem like the opposite of what you were expecting, but you need to think of it as the element being pushed on its left and top sides, which result in it moving right and down.

- -

Adding this code will give the following result:

- -
- - -
.positioned {
-  position: relative;
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

- -

Absolute positioning

- -

Absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.

- -

Going back to our original non-positioned example, we could add the following CSS rule to implement absolute positioning:

- -
.positioned {
-  position: absolute;
-  top: 30px;
-  left: 30px;
-}
- -

Here we give our middle paragraph a {{cssxref("position")}} value of absolute, and the same {{cssxref("top")}} and {{cssxref("left")}} properties as before. Adding this code, however, will give the following result:

- -
- - -
.positioned {
-    position: absolute;
-    background: rgba(255,84,104,.3);
-    border: 2px solid rgb(255,84,104);
-    top: 30px;
-    left: 30px;
-}
-
- -

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

- -

This is very different! The positioned element has now been completely separated from the rest of the page layout and sits over the top of it. The other two paragraphs now sit together as if their positioned sibling doesn't exist. The {{cssxref("top")}} and {{cssxref("left")}} properties have a different effect on absolutely positioned elements than they do on relatively positioned elements. In this case the offsets have been calculated from the top and left of the page. It is possible to change the parent element that becomes this container and we will take a look at that in the lesson on positioning.

- -

Fixed positioning

- -

Fixed positioning removes our element from document flow in the same way as absolute positioning. However, instead of the offsets being applied from the container, they are applied from the viewport. As the item remains fixed in relation to the viewport we can create effects such as a menu which remains fixed as the page scrolls beneath it.

- -

For this example our HTML is three paragraphs of text, in order that we can cause the page to scroll, and a box to which we will give position: fixed.

- -
<h1>Fixed positioning</h1>
-
-<div class="positioned">Fixed</div>
-
-<p>Paragraph 1.</p>
-<p>Paragraph 2.</p>
-<p>Paragraph 3.</p>
-
- -
- - -
.positioned {
-    position: fixed;
-    top: 30px;
-    left: 30px;
-}
-
- -

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

- -

Sticky positioning

- -

Sticky positioning is the final positioning method that we have at our disposal. It mixes the default static positioning with fixed positioning. When an item has position: sticky it will scroll in normal flow until it hits offsets from the viewport that we have defined. At that point it becomes "stuck" as if it had position: fixed applied.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

- -
-

Note: to find more out about positioning, see our Positioning article.

-
- -

Table layout

- -

HTML tables are fine for displaying tabular data, but many years ago — before even basic CSS was supported reliably across browsers — web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns. This worked at the time, but it has many problems — table layouts are inflexible, very heavy on markup, difficult to debug, and semantically wrong (e.g., screen reader users have problems navigating table layouts).

- -

The way that a table looks on a webpage when you use table markup is due to a set of CSS properties that define table layout. These properties can be used to lay out elements that are not tables, a use which is sometimes described as "using CSS tables".

- -

The example below shows one such use; using CSS tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for Flexbox or Grid.

- -

Let's look at an example. First, some simple markup that creates an HTML form. Each input element has a label, and we've also included a caption inside a paragraph. Each label/input pair is wrapped in a {{htmlelement("div")}}, for layout purposes.

- -
<form>
-  <p>First of all, tell us your name and age.</p>
-  <div>
-    <label for="fname">First name:</label>
-    <input type="text" id="fname">
-  </div>
-  <div>
-    <label for="lname">Last name:</label>
-    <input type="text" id="lname">
-  </div>
-  <div>
-    <label for="age">Age:</label>
-    <input type="text" id="age">
-  </div>
-</form>
- -

Now, the CSS for our example. Most of the CSS is fairly ordinary, except for the uses of the {{cssxref("display")}} property. The {{htmlelement("form")}}, {{htmlelement("div")}}s, and {{htmlelement("label")}}s and {{htmlelement("input")}}s have been told to display like a table, table rows, and table cells respectively — basically, they'll act like HTML table markup, causing the labels and inputs to line up nicely by default. All we then have to do is add a bit of sizing, margin, etc. to make everything look a bit nicer and we're done.

- -

You'll notice that the caption paragraph has been given display: table-caption; — which makes it act like a table {{htmlelement("caption")}} — and caption-side: bottom; to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the <input> elements in the source. This allows for a nice bit of flexibility.

- -
html {
-  font-family: sans-serif;
-}
-
-form {
-  display: table;
-  margin: 0 auto;
-}
-
-form div {
-  display: table-row;
-}
-
-form label, form input {
-  display: table-cell;
-  margin-bottom: 10px;
-}
-
-form label {
-  width: 200px;
-  padding-right: 5%;
-  text-align: right;
-}
-
-form input {
-  width: 300px;
-}
-
-form p {
-  display: table-caption;
-  caption-side: bottom;
-  width: 300px;
-  color: #999;
-  font-style: italic;
-}
- -

This gives us the following result:

- -

{{ EmbedLiveSample('Table_layout', '100%', '170') }}

- -

You can also see this example live at css-tables-example.html (see the source code too.)

- -

Multi-column layout

- -

The multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper. While reading up and down columns is less useful in a web context as you don’t want to force users to scroll up and down, arranging content into columns can be a useful technique.

- -

To turn a block into a multicol container we use either the {{cssxref("column-count")}} property, which tells the browser how many columns we would like to have, or the {{cssxref("column-width")}} property, which tells the browser to fill the container with as many columns of at least that width.

- -

In the below example we start with a block of HTML inside a containing <div> element with a class of container.

- -
<div class="container">
-    <h1>Multi-column layout</h1>
-
-    <p>Paragraph 1.</p>
-    <p>Paragraph 2.</p>
-
-</div>
-
- -

We are using a column-width of 200 pixels on that container, causing the browser to create as many 200-pixel columns as will fit in the container and then share the remaining space between the created columns.

- -
- - -
    .container {
-        column-width: 200px;
-    }
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

- -

Summary

- -

This article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology!

- -

{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/tr/learn/css/first_steps/getting_started/index.html b/files/tr/learn/css/first_steps/getting_started/index.html deleted file mode 100644 index 440bbd4f79..0000000000 --- a/files/tr/learn/css/first_steps/getting_started/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: CSS'e başlarken -slug: Learn/CSS/First_steps/Getting_started -tags: - - Acemi - - Beginner - - CSS - - Classes - - Durum - - Elements - - Example - - Learn - - Ogeler - - Ornekler - - Selectors - - Sozdizimi - - Syntax - - Sınıflar - - oğrenin - - seçiciler - - state -translation_of: Learn/CSS/First_steps/Getting_started -original_slug: Öğren/CSS/Ilk_adimlar/Getting_started ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
- -

Bu derste, basit bir HTML belgesi alıp ona CSS uygulayacağız. Bu sırada dil hakkında bazı pratik bilgiler öğreneceksini.

- - - - - - - - - - - - -
Ö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ü incele)
Amaç:Bir CSS belgesini bir HTML doyasına bağlamanın temellerini anlamak ve CSS ile basit metin biçimlendirme yapabilmek.
- -

HTML ile başlayalım

- -

Başlangıç noktamız bir HTML belgesidir. Kendi bilgisayarında çalışmak istiyorsan şağıdaki kodu kopyalayabilirsin(Yeniden yazmak pratik için daha iyi olacaktır). Aşağıdaki kodu dosya adı index.html olacak şekilde bir klasöre kaydedin.

- -
<!doctype html>
-<html lang="tr">
-<head>
-    <meta charset="utf-8">
-    <title>CSS'ye başlarken</title>
-</head>
-
-<body>
-
-    <h1>Ben birinci seviye bir başlığım</h1>
-
-    <p>Bu bir paragraf metnidir. Metinde bir <span>span etiketi</span>
-ve ayrıca bir <a href="http://example.com">bağlantı</a> var.</p>
-
-    <p>Bu ikinci paragraftır. <em>vurgulanan</em> bir metin içerir.</p>
-
-    <ul>
-        <li>Öğe bir</li>
-        <li>Öğe iki</li>
-        <li>Öğe <em>üç</em></li>
-    </ul>
-
-</body>
-
-</html>
-
- -
-

Not: Bunu bir cihazda veya kolayca dosya oluşturamadığın bir ortamda okuyorsan endişelenme. Burada, doğrudan web sayfasında örnek kod yazmana izin veren canlı kod düzenleyicileri aşağıda verilmiştir. Fakat bu çalışmaları; kullanmayı planladığın bir editörde çalışman, editörünüzü tanımana ve onu daha etkili kullanmana olanak sağlar.

-
- -

Belgene CSS eklemek

- -

Yapman gereken ilk şey, HTML belgesine, kullanmasını istediğimiz bazı CSS kurallarımız olduğunu söylemektir. Sıklıkla karşılaşacağın bir HTML belgesine CSS'si eklemenin üç farklı yolu vardır. Ancak şimdilik bunu yapmanın en olağan ve kullanışlı yoluna bakacağız — CSS'i belgemizin başından bağlamak.

- -

HTML belgenle aynı klasörde adı styles.css bir dosya oluşturun. .css dosya uzantısı bu dosyanın bir css dosyası olduğunu belirtir.

- -

index.html belgesindeki {{htmlelement("head")}} etiketinin içinde styles.css dosyasına bağlantı oluşturmak için:

- -
<link rel="stylesheet" href="styles.css">
- -

Bu {{htmlelement("link")}} etiketi tarayıcıya,  rel niteliği ile bu dosyanın bir stil sayfası olduğunu ve href niteliğiylede dosyanın bulunduğu konumu söyler. styles.css dosyası içerisine bir kural ekleyerek CSS'in çalışıp çalışmadığını kontrol edebilirsin.

- -
h1 {
-  color: red;
-}
- -

HTML ve CSS dosyalarını kaydedin ve index.html dosyasını bir web tarayıcısında yükle. Belgenin üst kısmındaki birinci düzey başlık şimdi kırmızı olmalıdır. Eğer öyleyse tebrik ederim — bir HTML belgesine bir miktar CSS'i başarıyla uyguladın. Doğru görünmüyorsa, her şeyi doğru yazdığını kontrol edin.

- -

styles.css yerel olarak çalışmaya devam edebilir veya bu eğiticiye devam etmek için aşağıdaki etkilşimli düzenleyiciyi kullanabilirsin. Etkileşimli düzenleyici, yukarıdaki belgemizde olduğu gibi ilk paneldeki CSS'i HTML belgesine bağlıymış gibi davranır.

- -

HTML öğelerini şekillendirme

- -

Başlığımızı kırmızı yaparak, bir HTML öğesini seçebileceğimizi ve biçimlendirebileceğimizi göstermiş olduk. Bunu, bir öğe seçiciyle yaptık — bu HTML öğe etiketiyle doğrudan eşleşen bir seçicidir. Belgedeki tüm paragrafları seçebilmek için p seçiciyi kullanırsın. Tüm paragrafları yeşile çevirmek için:

- -
p {
-  color: green;
-}
- -

seçicileri virgülle ayırarak birden çok seçiciyi aynı anda seçebilirsin. Tüm paragrafları ve tüm liste öğelerinin yeşil olmasını istersek, kural şöyle görünür:

- -
p, li {
-    color: green;
-}
- -

Bunu aşağıdaki etkileşimli düzenleyicide veya yerel uygulamanda dene.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

- -

Öğelerin varsayılan davranışlarını değiştirme

- -

İyi işaretlenmiş bir HTML belgesine baktığımızda, örneğimiz kadar basit bile olsa, tarayıcının bazı varsayılan stil ekleyerek HTML'yi nasıl okunabilir hale getirdiğini görebilirz. Başlıklar büyük ve kalın ve listemizde madde işaretleri var. Bunun nedeni, tarayıcların varsayılan olarak tüm sayfalara uyguladıkları vasayılan stilleri içeren dahili stil sayfalarına sahip olmasıdır. Onlar olmadan tüm metin bir yığın halinde bir araya gelir ve her şeyi sıfırdan şekillendirmemiz gerekirdi. Tüm modern tarayıcılar, varsayılan olarak HTML içeriğini hemen hemen aynı şekilde görüntüler.

- -

Ancak, bir web geliştiricisi tarayıcının yapmış olduğu tercihlerden farklı tercihleri olacaktır(yoksa tüm web sayfaları aynı gözükürdü). Bunu, görünüşünü veya davranışını değiştirmek istediğin HTML öğesini seçerek ona yeni bir CSS kuralı tanımlayarak yapabiliriz. Buna, sırasız listemiz <ul> iyi bir örnektir. Listemizde noktalar var ve bu noktaları istemediğime karar verirsem onları şu şekilde kaldırabilirim.

- -
li {
-  list-style-type: none;
-}
- -

Örneği CSS'e ekleme.

- -

list-style-type niteliğinin desteklediği değerleri görmek için MDN içerisindeki list-style-type sayfasına bakabilirsin. Sayfanın üst kısmında bazı farklı değerleri denemek için etkileşimli bir örnek bulacaksın ve izin verilen tüm değerler sayfanın altında ayrıntılı olarak verilmiştir. 

- -

Bu referans sayfasına baktığında, listenin madde işaretlerini kaldırmanın yanı sıra bunları değiştirebileceğini göreceksin — square değerini kullanarak bunları kare madde imlerine dönüştürmeyi dene.

- -

Bir sınıf eklemek

- -

Şimdiye kadar öğeleri HTML etiket adlarına göre biçimlendirdik. Bunu, belgendeki o türdeki tüm öğelerin aynı görünmesini istediğimizde kullanırız. Bazı durumlarda belgedeki aynı türdeki tüm öğelerin yerine belirli öğeleri seçmek isteyebilirsin. Bunu yapmanın en yaygın yolu da, HTML öğelerini bir sınıfa eklemek ve bu sınıfı seçmektir.

- -

HTML belgende, ikinci liste(<ul>) öğeni bir sınıf etiketi ekle. Listeni oluşturan kodlar artık böyle gözükmeli:

- -
<ul>
-  <li>Öğe bir</li>
-  <li class="special">Öğe iki</li>
-  <li>Öğe <em>üç</em></li>
-</ul>
- -

CSS'nde nokta ile başlayan special seçici kullanarak sınıfı seçebilirsin. Aşağıdakileri CSS kurallarını dosyana ekle:

- -
.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Sonucun ne olduğunu görmek için kaydedin ve yenile.

- -

special sınıfını bu liste öğesiyle aynı görünüme sahip olmasını istediğin herhangi bir öğeye uygulayabilirsin. Örn; <span> öğesinin içeriğininde turuncu ve kalın olmasını isteyebilirsin. bu öğeyenin class niteliğine special değerini ekle ve sayfayı yenile. Amacına ulaştığını göreceksin.

- -

Bazen, sınıfla birlikte HTML öğelerinin birlikte kullanıldığı kurallar görürsünüz:

- -
li.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Bu sözdizimi, "special sınıfana dahil bir li öğesi seç" anlamına gelir. Bu şekilde bir kural tanımladığında, bu kuralı <span> veya başka bir öğeye yalnızca sınıf ekleyerek uygulayamazsın. Bu öğe veya öğeler içinde kural tanımlaman gerekir:

- -
li.special,
-span.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Bu şekilde kısıtlayıcı bir tanımlamada bulunursan, aynı kuralların uygulanmasını istediğin yeni bir öğe eklediğinde, CSS'ini yeniden düzenlemek veya yeni bir kural eklemek zorunda kalabilirsin. Bu nedenle, bir öğeye özel kural oluşturman gerektiğinden emin değilsen veya başka öğelerede bu kuralları uygulanıp uygulanmayacağından emin değilsen, bu kullanım yerine öğe seçicileri kullanmadan sınıfa kural oluşturmak en iyisidir.

- -

Belgedeki konumlarına göre öğeleri şekillendirme

- -

Belgede bulundukları yere bağlı olarak bir öğenin farklı görünmesini isteyeceğin zamanlar da olacaktır. Burada size yardımcı olabilecek bir dizi seçici var, ancak şimdilik sadece birkaç tanesine bakacağız. Belgemizdeki iki <em> öğesi vardır — biri bir paragrafın içinde, diğeri bir listenin içinde. Yalnızca <li> öğesinin içerisine yerleştirilen <em> öğesini seçmek için, diğer  seçiciyle arasına boşluk karakterini koyarak, soy birleştirici adı verilen bir seçici kullanabilirim.

- -

Aşağıdaki kuralı stil sayfana ekle.

- -
li em {
-  color: rebeccapurple;
-}
- -

Bu seçici <li> içindeki (soyundan gelen) <em> öğesini seçecektir. Dolayısıyla, örnek belgemizde, <em> içerisindeki üçüncü listedeki ifadenin mor olduğunu, ancak dışında kalan ifadenin değişmediğini görmelisin. 

- -

Denemek isteyebileceğin başka bir şeyde, HTML'den aynı hiyerarşi düzeyindeki bir başlıktan hemen sonra gelen bir paragfarın stilini belirlemektir. Bunu yapmak için seçiciler arasına bir + (Komşu kardeş birleştirici) yerleştirin.

- -

Bu kuralı stil sayfana eklemeyi dene:

- -
h1 + p {
-  font-size: 200%;
-}
- -

Aşağıdaki etkileşimli örnekte, yukarıdaki iki kuralı içerir. Sizde bir paragrafın içindeki <span> öğesinin içeriğinin kırmızı olmasını sağlayan kuralı ekle. İlk paragraftaki kapsam içeriğinin kırmızı olduğunu ve birinci liste öğesinin içerisindeki kapsam içeriğinin renginin değişmediğini görmek kuralın doğru yazıldığını doğrulayacaktır.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

- -
-

Not: Gördünüz gibi, CSS bize öğeleri hedeflememiz için birkaç yol sunuyor ve şimdiye kadar sadece yüzeyi gördük! Konumuzun ilerleyen bölümlerinde Seçiciler dersimizde bu seçicilerin tümüne ve çok daha fazlasına düzgün bir şekilde göz atacağız.

-
- -

Öğeleri durumuna göre şekillendirme

- -

Bu derste inceleyeceğimiz son stil türü, öğelerin durumlarına göre şekillendirme yeteneğidir. Örn. bağlantıların şekillendirilmesi. Bir bağlantıya şekil verdiğimizde <a> (anchor) öğesini seçmemiz gerekir. Bu, ziyaret edilmeme, ziyaret edilme, üzerine gelme, klavye aracılığıyla odaklanma veya tıklanma sürecine bağlı olarak farklı durumlara sahiptir. Bu farklı durumları seçmek için CSS'i kullanabiliriz — aşağıdaki CSS kuralında, ziyaret edilmeyen bağlantıların pembe ve ziyaret edilen bağlantıların ise yeşil gözükmesini sağlar.

- -
a:link {
-  color: pink;
-}
-
-a:visited {
-  color: green;
-}
- -

Kullanıcı fareyle üzerine geldiğinde bağlantının görünümünü de değiştirebilirsin. Örneğimizde farenin imleciyle bir bağlantının üzerine gelindiğinde bağlantının altında bulunan çizgi kaldırılır.

- -
a:hover {
-  text-decoration: none;
-}
- -

Aşağıdaki etkileşimli örnekte, bir bağlantı öğesinin farklı durumlarını şekillendirmek için kullanılan kuralların, değerleriyle oynamayı deneyiz. Size örnek olması için yukarıdaki kuralları sizin için ekledim ve pembe renginin oldukça açık olduğunu ve okunmasının zor olduğunu farkettim — daha iyi bir okunurluk için bu rengi neden değiştirmeyesin ki? Bunu yapmışken bağlantıların metinlerini kalın yapabilir misin?

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

- -

Bağlantımızın üzerine fareyle gelindiğinde altındaki çizginin kaldırılmasını sağladık. Alt çizgiyi bir bağlantının tüm durumlarından kaldırabilirsin. Fakat gerçek bir sitede, ziyaretçilerin bir bağlantının bir bağlantı olduğunu bilmesini istediğini hatırlatmakta fayda var. Alt çizgiyi yerinde bırakmak, insanların bir paragrafın içindeki bir metnin tıklanabileceğini fark etmeleri için önemli bir ipucu olabilir — alıştıkları davranış budur. Tasarımında, CSS'de dökümanı daha az erişilebilir hale getirme potansiyeli vardır — uygun yerlerde olası tuzakları vurgulamayı hedefleyeceğiz.

- -
-

Not: Bu derslerde ve MDN genelinde erişilebilirlilikten sık sık bahsedildiğini göreceksin. Erişilebilirlik hakkında konuştuğumuzda, web sayfalarımızın herkes tarafından anlaşılabilir ve kullanılabilir olması gerektiğinden bahsetmiş olacağız.

- -

Ziyaretcin, faresi yada izleme panali olan bir bilgisayarda veya dokunmatik ekranlı bir telefonda olabilir. Ya da belgenin içeriğini okuyan bir ekran okuyucu kullanıyor olabilirler, ayrıca çok daha büyük metinler kullanmaları yada sadece klavyeyi kullanarak gezinmeleri gerekebilir.

- -

Düz bir HTML belgesine genel olarak herkes erişebilir — bu belgeyi biçimlendirmeye başladığında onu daha az erişilebilir hale getirmemen önemlidir.

-
- -

Seçicileri ve birleştiricileri birleştirmek

- -

Birden çok seçici ve birleştiriciyi bir araya getirebileceğini belirtmekte fayda var. Örneğin:

- -
/* <article> içinde bulunan <p>'nin içndeki <span> seçer  */
-article p span { ... }
-
-/* <h1>'den sonra gelen <ul>'den sonraki <p>'yi seçer.  */
-h1 + ul + p { ... }
- -

Birden çok türü bir arada da birleştirebilirsin. Aşağıdakileri koduna eklemeyi dene:

- -
body h1 + p .special {
-  color: yellow;
-  background-color: black;
-  padding: 5px;
-}
- -

Bu kural, <body> öğesinin içerisinde bulunan <h1> öğesinden sonra ilk gelen special sınıfına dahil <p> öğesini seçer. Vay be!

- -

Orjinal HTML'de şekil verilmeyen tek öğe <span class="special">dir.

- -

Şu anda bu size karmaşık geliyorsa endişelenme — daha fazla CSS yazdıkça buna anlamaya başlayacaksın.

- -

Özet

- -

Bu derste, CSS kullanarak bir belgeye şekil uygulamanın birkaç yolunu inceledik. Konunun ilerleyen bölümlerinde bu bilgiyi geliştireceğiz. Şu anda metne şekil vermeyi, öğeleri seçmenin farklı yollarıyla kurallar oluşturmayı ve MDN belgelerinde nitelikleri ve atanabilen değerler hakkında araştırma yapabilecek kadar bilgiye sahipsin.

- -

Bir sonraki derste CSS'in nasıl yapılandırıldığına bir göz atacağız.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

- -

Bu kısımda

- -
    -
  1. CSS Nedir?
    2. -
  2. CSS'e başlarken
    3. -
  3. CSS nasıl yapılandırılır
    4. -
  4. CSS nasıl çalışır?
    5. -
  5. Öğrendiklerimizi uygulamak
    6. -
diff --git a/files/tr/learn/css/first_steps/how_css_is_structured/index.html b/files/tr/learn/css/first_steps/how_css_is_structured/index.html deleted file mode 100644 index c0bea7bf98..0000000000 --- a/files/tr/learn/css/first_steps/how_css_is_structured/index.html +++ /dev/null @@ -1,552 +0,0 @@ ---- -title: CSS nasıl yapılandırılır -slug: Learn/CSS/First_steps/How_CSS_is_structured -tags: - - Acemi - - Beginner - - CSS - - HTML - - Learn - - Ogrenim - - Ozellikler - - Selectors - - Structure - - Yapı - - beyaz boşluk - - comments - - değerler - - kısaltmalar - - nitelikler - - properties - - seçiciler - - shorthand - - values - - whitespace - - yorumlar -translation_of: Learn/CSS/First_steps/How_CSS_is_structured -original_slug: Öğren/CSS/Ilk_adimlar/How_CSS_is_structured ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
- -

Artık CSS'in amacını ve kullanımını anlamaya başladığına göre, CSS'in yapısını inceleyelim.

- - - - - - - - - - - - -
Önkoşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler,  HTML temelleri (IHTML'ye Giriş bölümünü incele) ve CSS'in nasıl çalıştığı hakkın bilgi.
Amaç:CSS'in temel sözdizimi yapılarını ayrıntılı olarak öğrenmek.
- -

CSS'i HTML'ye uygulama

- -

İlk olarak, bir belgeye CSS uygulamak için üç yöntemi inceleyelim: harici bir stil sayfasıyla, dahili bir stil sayfasıyla ve satır içi stillerle.

- -

Harici stil sayfası

- -

Harici bir stil sayfası, .css uzantısına sahip, içerisinde CSS kurallarını içeren ayrı bir dosyadır. Bu, CSS'i bir HTML belgesine getirmenin en yaygın ve kullanışlı yöntemidir. Tek bir CSS dosyasını birden çok web sayfasına bağlayarak hepsini aynı CSS stil sayfasıyla şekillendirebilirsin. CSS'e Başlarken bölümünde harici bir stil sayfasını web sayfamıza bağlamıştık.

- -

Bir HTML <link> etiketi ile harici bir CSS stil sayfası dosyasına başvuruyoruz :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS deneyimim</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <h1>Merhaba Dünya!</h1>
-    <p>Bu benim ilk CSS örneğim</p>
-  </body>
-</html>
- -

CSS stil sayfası dosyası aşağıdaki şekilde görünebilir:

- -
h1 {
-  color: blue;
-  background-color: yellow;
-  border: 1px solid black;
-}
-
-p {
-  color: red;
-}
- -

{{htmlelement("link")}} etiketi href niteliğinde belirtilen yokdaki bir dosyaya işaret ediyor. Yukarıdaki örnekte, CSS dosyası HTML belgesiyle aynı klasördeydi, ancak dosya farklı bir klasöre de yerleştirilip yolu belirtebiliriz. İşte üç tane örnek:

- -
<!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerisinde  -->
-<link rel="stylesheet" href="styles/style.css">
-
-<!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerindeki 'general' alt klasörünün içinde-->
-<link rel="stylesheet" href="styles/general/style.css">
-
-<!-- CSS dosyası geçerli dizinin bir üst klasöründe bulunan 'styles' klasörünün içinde -->
-<link rel="stylesheet" href="../styles/style.css">
- -

Dahili stil sayfası

- -

Dahili bir stil sayfası, HTML belgesinin içinde bulur. Dahili bir stil sayfası oluşturmak için, CSS'i  HTML içindeki {{htmlelement("head")}} etiketi içerisinde ki, {{htmlelement("style")}} etiketi içerisinde yetleştirmeliyiz.

- -

Dahili bir stil sayfasının HTML'si şöyle görünebilir:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS deneyimim</title>
-    <style>
-      h1 {
-        color: blue;
-        background-color: yellow;
-        border: 1px solid black;
-      }
-
-      p {
-        color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Merhaba Dünya!</h1>
-    <p>Bu benim ilk CSS örneğim</p>
-  </body>
-</html>
- -

Bazı durumlarda, dahili stil sayfaları faydalı olabilir. Örneğin, harici CSS dosyalarını değiştirmenin engellendiği bir içerik yönetim sistemiyle çalşıyorsundur.

- -

Ancak birden fazla sayfası olan siteler için dahili stil sayfası daha az verimli bir çalışma yöntemi haline gelir. Dahili stil sayfalarını kullanarak, birden çok sayfaya tek bir CSS stili uygulamak için, stili kullanacak her web sayfaya dahili CSS sayfalarını eklemen gerekmektedir. Verimlilik kaybı site bakımınada yansır, çünkü dahili stil sayfalarında ki CSS içerisinde basit bir stil değişikliğini bile birden çok web sayfasında düzenlemek zorunda kalırsın.

- -

Satır içi stiller

- -

Satır içi stiller, bir style niteliği içinde bulunan tek bir HTML öğesini etkileyen CSS bildirimleridir. Bir HTML belgesinde satır içi stilin uygulanması şu şekilde görünebilir:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS deneyimim</title>
-  </head>
-  <body>
-    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Merhaba Dünya!</h1>
-    <p style="color:red;">Benim ilk CSS örneğim</p>
-  </body>
-</html>
- -

Mümkünse CSS'i bu şekilde kullanmaktan sakının. En iyi uygulamanın tam tersidir. Birincisi, bakım için CSS'in en az verimli uygulamasıdır. Bir stil değişikliği, tek bir web sayfasında birden fazla düzenleme gerektirebilir. İkincisi, satır içi CSS kodlarıyla HTML içeriklerini karıştırarak her şeyin okunmasını ve anlaşılmasını zorlaştırır. Kodu ve içeriği ayırmak, web sitesinde çalışan herkes için bakımı kolaylaştırır.

- -

Satır içi stillerin daha yaygın olduğu birkaç durum vardır. Çalışma ortamın çok kısıtlayıcıysa, satır içi stilleri kullanmaya başvurman gerekebilir. Örn; belki bir CMS'n yalnca HTML gövdesini düzenlemene izin verir. Ayrıca, olabildiğince çok e-posta istemcisiyle uyumluluk sağlamak için, e-posta içindeki HTML'de çok sayıda satır içi stil kullanabilirsin.

- -

CSS ile oynamak

- -

Aşağıdaki alıştırma için bilgisayarında bir klasör oluşturun. Klasörü istediğin gibi adlandırabilirsin. Klasörün içinde, iki dosya oluşturmak için aşağıdaki metni kopyalayın:

- -

index.html:

- -
<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>CSS deneyimim</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-
-    <p>Test HTML'ni burada oluşturun</p>
-
-  </body>
-</html>
- -

styles.css:

- -
/* Create your test CSS here */
-
-p {
-  color: red;
-}
- -

Denemek ve değişiklik yapmak için hem HTML dosyandaki <body> etiketi arasına hemde CSS stil sayfana öğeler ve kurallar ekle.

- -

Aşağıdaki etkileşimle düzenleyiciyi de kullanabilirsin..

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

- -

Oku ve eğlen!

- -

Seçiciler

- -

Bir seçici, stil uygulayacağı içerik için HTML'yi hedefler. CSS'e başlarken dersinde çeşitli seçiciler keşfetmiştik. Eğer CSS içeriğe istenildiği gibi uygulanmıyorsa, seçicin istediğin şekilde eşleşmiyor olabilir.

- -

Her CSS kuralı, tarayıcıya kuralların hangi öğe veya öğelere uygulanması gerektiğini söylemek için bir seçici veya seçici listesi ile başlar. Aşağıdaki tüm örnekler geçerli seçicilerdir.

- -
h1                   /*seçici*/
-a:link               /*seçici*/
-.manythings          /*seçici*/
-#onething            /*seçici*/
-*                    /*genel seçici*/
-.box p               /*seçici*/
-.box p:first-child   /*seçici*/
-h1, h2, .intro       /*seçici listesi*/
- -

Yukarıdaki seçicileri kullanan bazı CSS kuralları oluşturmayı dene. Seçiciler tarafından şekillendirilecek HTML öğeleri ekle. Yukarıdaki sözdiziminden herhangi birine aşina değilsen, MDN'yi aramayı dene.

- -
-

Not: bir sonraki kısımda seçiciler hakkında daha fazla bilgi edineceksini CSS seçicileri.

-
- -

Özgüllük

- -

İki seçicinin aynı HTML öğesini hedeflediği senaryolarla karşılaşabilirsin. Paragraf <p> metnini maviye ayarlayan ayrıca tanımlandığı öğenin rengini kırmızıya ayarlayan bir sınıf kuralı olan stil sayfasını düşünün

- -
.special {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

HTML belgemizde de bir special sınıfına ait paragrafımız olduğunu varsayalım. Her iki kural da uygulanır. Fakat hangi kural baskındır? Mavi veya kırmızı paragraf menini görmeyi bekliyor musun?

- -
<p class="special">Benim rengim nedir?</p>
- -

CSS dili, bir çakışma durumunda hangi seçicinin daha güçlü olduğunu kontrol etmek için bazı kurallara sahiptir. Bu kurallara art arda denetim ve özgüllük denir. Aşağıdaki kod bloğunda, seçici için iki kural tamınlarız. Ancak <p> paragraf metni mavi olacaktır. Bunun nedeni, paragraf metnini mavi olarak ayarlayan bildirimin diğer bildirimden daha sonra tanımlanmış olması. Seçimlerin çakışması durumunda sonraki stiller, kendilerinden önce tanımlanmış stil kurallarını geçersiz kılıp yerlerine geçerler. Bu art arda denetim kuralıdır.

- -
p {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Bununla birlikte, sınıf seçicisi ile öğe seçicisi arasındaki çakışmaya sahip bir önceki örneğimizde, sınıf seçici kırmızı paragraf metnini oluşturarak baskın seçici olduğunu kanıtlar. Peki çakışan bir stil daha sonraki satırlada görünen bir seçiçiye nasıl baskın olabilir? Bir sınıf, öğe seçiciden daha fazla özgüllüğe sahip olduğu gibi daha karakteristik olarak derecelendirilir, bu nedenle diğer çakışan stil bildirimini iptal eder.

- -

Kendin için bunu dene! Bir HTML ekle ve ardından bu iki kuralı stil sayfana ekle. Ardından p.special kuralının p{....} kuralına baskın geldiğini izle.

- -

Özgüllük ve art arda denetim kuralları ilk bakışta karmaşık görünebilir. CSS'e aşına oldukça bu kuralları anlamak daha kolay olcak. Bir sonraki kısımda Ard arda denetim ve miras bölümü özgüllüğün nasıl hesaplanacağı da dahil olmak üzere bunu ayrıntılı olarak açıklamaktadır.

- -

Şimdilik, özgüllüğün var olduğunu unutmayın. Bazen, stil sayfasındaki başka bir şeyin daha karakteristik olması nedeniyle CSS beklediğin gibi uygulanmayabilir. Bir öğeye birden fazla kuralın uygulanabileceğini anlamak, bu tür sorunları çözmenin ilk adımıdır.

- -

Nitelikler ve değerler

- -

En basit düzeyinde, CSS iki bileşenden oluşur:

- -
    -
  • Nitelik: Bunlar, değiştirmek istediğin stilin niteliklerini gösteren, okunabilir tanımlayacılardır. Örn; font-size, width, background-color.
    • -
  • Değer: Her niteliğe bir değer atanır. Bu değer, niteliğin nasıl biçimlendirileceğini gösterir.
    • -
- -

Aşağıdaki örnek, tek bir niteliği ve değeri vurgulamaktadır. Nitelik adı color ve değeri blue.

- -

A declaration highlighted in the CSS

- -

Bir nitelik bir değerle eşleştirildiğinde, bu eşlemeye CSS bildirimi adı verilir. CSS bildirimleri CSS Bildirim Blokları içinde bulunur. Aşağıdaki örnekte, vurgulanan CSS bildirim bloğunu tanımlar.

- -

A highlighted declaration block

- -

Son olarak, CSS kural kümeleri(veya CSS kuralları) oluşturmak için CSS bildirim blokları seçicilerle eşleştirilir. Aşağıdaki örnekte iki kural içerir: biri <p> etiketi için, diğeri <h1> etiketi için. Renkli vurgulanan CSS kuralı <h1> etiketinin stilini tanımlar.

- -

The rule for h1 highlighted

- -

CSS niteliklerini belirli değerlere ayarlamak, bir belge için düzen ve stil tanımlamanın birincil yoludur. CSS motoru, bir sayfanın her öğesi için hangi bildirimlerin geçerli olduğunu hesaplar.

- -
-

Önemli: CSS nitelikleri ve değerleri büyük/küçük harfe duyarlıdır. Her çifteki nitelik ve değer iki nokta üst üste ile ayrılır. (:)

-
- -

Aşağıda listenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kurallar yazın:

- -
    -
  • {{cssxref("font-size")}}
    • -
  • {{cssxref("width")}}
    • -
  • {{cssxref("background-color")}}
    • -
  • {{cssxref("color")}}
    • -
  • {{cssxref("border")}}
    • -
- -
-

Önemli: Bir nitelik bilinmiyorsa veya belirli bir nitelik için bir değer geçerli değilse, beyan geçersiz olarak işlenir. Tarayıcının CSS motoru tarafından tamamem yok sayılır.

-
- -
-

Önemli: CSS'de (ve diğer web standartlarında), dil varyasyonunun veya belirsizliğin olduğu yerlerde ABD yazımının standart olduğu kabul edilmiştir. 

-
- -

Fonksiyonlar

- -

Değerlerin çoğu nispeten basit anahtar kelimeler veya sayısal değerler olsa da, bir işlev biçimini alan bazı değerler vardır. calc() fonksiyonu ele alalım, CSS içinde matematiksel işlev yapabilen bir fonksiyondur.

- -
-
<div class="outer"><div class="box">İç kutu genişliği 90% - 30px.</div></div>
- -
.outer {
-  border: 5px solid black;
-}
-
-.box {
-  padding: 10px;
-  width: calc(90% - 30px);
-  background-color: rebeccapurple;
-  color: white;
-}
-
- -

Bu şu şekilde çalışır:

- -

{{EmbedLiveSample('calc_example', '100%', 200)}}

- -

Bu işlev, işlev adı ve işlevin değerlerini kapsayan parantezlerden oluşur. calc() yukarıdaki örnekte, kutunun genişliğini değerler içeren blok genişliğinin %90 eksi 30piksel olmasını tanımlar. Hesaplamanın sonucu, önceden hesaplanabilen ve sabit bir değer olarak girilebilen  değer değildir.

- -

Başka bir örnek {{cssxref("transform")}} niteliği,  rotate()fonksiyonundan dönen değerleri alabilir.

- -
-
<div class="box"></div>
- -
.box {
-  margin: 30px;
-  width: 100px;
-  height: 100px;
-  background-color: rebeccapurple;
-  transform: rotate(0.8turn)
-}
-
- -

Yukarıdaki kodun çıktısı şuna benzer:

- -

{{EmbedLiveSample('transform_example', '100%', 200)}}

- -

Aşağıdaki listelenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kuralları yazın:

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("background-image")}}, in particular gradient values
    • -
  • {{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values
    • -
- -

@rules(kurallar)

- -

CSS @rules ("et-rules" olarak teleffuz edilier), CSS'in ne yapması gerektiği ve nasıl davranması gerektiği konusunda talimatlar sağlar. Bazıları @rules sadece bir anahtar ve bir değerden ibarettir. Örn; @import bir stil sayfasını başka bir CSS stil sayfasına aktarır:

- -
@import 'styles2.css';
- -

Karşılaşabileceğin en yaygın @rule kurallarından birtanesi @media, medya sorguları oluşturmak için kullanılr. Medya sorguları, CSS stilini uygualamak için koşullu mantık kullanır.

- -

Aşağıdaki örnekte, stil sayfası <body> öğesi için pembe renkli bir arka plan tanımlayan bir medya sorgusu izler.

- -
body {
-  background-color: pink;
-}
-
-@media (min-width: 30em) {
-  body {
-    background-color: blue;
-  }
-}
- -

Eğitimler boyunda diğer @rules kurallarıyla karılaşacaksın.

- -

Görünüm genişliğine göre stilleri değiştiren bir ortam sorgusu ekleyip ekeleyemeceğini görün. Sonucu görmek için tarayıcı pencerenin genişliğini değiştirin.

- -

Kısaltmalar

- -

{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, ve {{cssxref("margin")}} gibi bazı niteliklere kısaltmalar denir. Bunun nedeni tekbir satırda birden fazla değer alabilmeleridir.

- -

Örneğin, bu tek satırlık kod:

- -
/* dolgu ve kenar boşluğu gibi 4 ayrı değer uygulanır.
-   Sırasıyla üst, sağ, alt, sol (üsten başlayarak saat
-   yönünde). Ayrıca kısaltma olarak kullanılan başka
-   niteliklerde vardır.*/
-padding: 10px 15px 15px 5px;
- -

şu dört kod satırına eşdeğerdir:

- -
padding-top: 10px;
-padding-right: 15px;
-padding-bottom: 15px;
-padding-left: 5px;
- -

Bu tek satır:

- -
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
- -

Şu beş satıra eşdeğerdir:

- -
background-color: red;
-background-image: url(bg-graphic.png);
-background-position: 10px 10px;
-background-repeat: repeat-x;
-background-attachment: fixed;
- -

Kursun ilerleyen bölümlerinde, birçok kısaltma örneğiyle karşılaşacaksın. MDN'nin CSS referensı sayfaları herhangi bir kısaltma niteliği hakkında daha fazla bilgi için iyi bir kaynaktır.

- -

Nasıl çalıştığına daha iyi aşina olmak için kendi CSS alıştırmanda yukarıdaki bildirimleri kullanmayı dene. Ayrıca farklı değerleri deneyebilirsin.

- -
-

Uyarı: CSS kısaltmasını kullanmanın dikkat edilmesi gekeren yönü, atlanan değerlerin sıfırlanmasıdır. CSS kısaltmasında belirtilmeyen bir değer, tarayacının varsayılan değerine geri döner. Bu da,  önceden ayarlanmış değeri geçersiz kılabileceği anlamına gelir.

-
- -

Açıklamalar

- -

Herhangi bir kodlama çalışmasında olduğu gibi, CSS ile birlikte açıklama yazmak iyi bir uygulamadır. Bu, daha sonra düzeltmeler veya geliştirmeler için geri döndüğünde kodun nasıl çalıştığını hatırlamana yardımcı olur. Ayrıca başkalarının da kodu anlamasına yardımcı olur.

- -

CSS açıklamaları /* ile başlar ve */ ile biter. Aşağıdaki örnekteki açıklamalar, kodun farklı bölümlerinin başlangıcını işaret etmektedir. Bu, kod tanımlamasında büyüdükçe gezinmeye yardımcı olur. Bu tür açıklamalar yerinde olduğunda, kod düzenleyicinde açıklama aramak, bir kod bölümünü verimli bir şekilde bulmanın bir yolu haline gelir.

- -
/* Temel öğe elamanını biçimlendirin. */
-/* -------------------------------------------------------------------------------------------- */
-body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  /* Genel yazı tipi boyutunu özel olarak inceleyelim. Büyük ekran
-     veya pencerede daha iyi okunabilirlilik için yazı tipi
-     boyutunu arttırıyoruz. */
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {font-size: 1.5em;}
-
-/* DOM'da yuvalanmış belili öğeleri biçimlendirin  */
-/* -------------------------------------------------------------------------------------------- */
-div p, #id:first-line {
-  background-color: red;
-  border-radius: 3px;
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
- -

"Kod açıklamaları" CSS kodunu deneme için devre dışı bırakmak için de yararlıdır. Aşağıdaki örnekte, .special sınıfı açıklama içerisine alınıp devre dışı bırakılmıştır.

- -
/*.special {
-  color: red;
-}*/
-
-p {
-  color: blue;
-}
- -

CSS'ne açıklamalar ekle!

- -

Beyaz boşluk

- -

Beyaz boşluk; gerçek boşluklar, sekmeler ve yeni satırlar(Enter) anlamına gelir. Tarayıcıların HTML'deki beyaz boşluğu yok sayması gibi, tarayıcılar da CSS içindeki beyaz boşluğu yok sayar. Beyaz boşluklar okunabilirliliği nasıl geliştirdiklerini görebilirsin.

- -

Aşağıdaki örnekte, her bildirim (Kural bağlangıcı ve bitişi) kendi satırına sahiptir. Bu da CSS yazmanın iyi bir yolur. CSS'i okumayı ve anlamayı kolaylaştırır.

- -
body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {
-  font-size: 1.5em;
-}
-
-div p,
-#id:first-line {
-  background-color: red;
-  border-radius: 3px;
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
-
- -

Aşağıdaki örnek, yukarıdaki CSS kodunun sıkıştırılmış(fazlalık boşlukların temizlenmiş) halidir. Yukarıdaki örnekle aynı işi yapmaktadır fakat okunurluluğu oldukça zordur.

- -
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
-@media (min-width: 70em) { body {font-size: 130%;} }
-
-h1 {font-size: 1.5em;}
-
-div p, #id:first-line {background-color: red; border-radius: 3px;}
-div p {margin: 0; padding: 1em;}
-div p + p {padding-top: 0;}
-/*Ve hatta*/
-body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;}
-
- -

Kendi projelerin için, kodunu kişisel tercihine göre biçimlendireceksin. Takım projeleri için, bir takımın veya projenin kendi stil rehberi olduğunu göreceğin çalışmalarında olacaktır.

- -
-

Önemli: CSS bildirimlerindeki beyaz boşuk değerleri ayırsa da, nitelik adlarında hiçbir zaman boşluk olmaz.

-
- -

Örneğin, bu geçerli bir CSS beyanıdır:

- -
margin: 0 auto;
-padding-left: 10px;
- -

Fakat bu beyanlar geçersizdir:

- -
margin: 0auto;
-padding- left: 10px;
- -

Aralık hatalarını görüyor musun? ilk olarak margin niteliği 0auto değerini geçerli bir değer olarak tanımaz. Tanımın 0auto yu iki ayrı değer olarak alması amaçlanmıştır. 0 ve auot olarak. İkinci padding- geçerli bir nitelik olarak tanınmıyor. Doğru nitelik adı (padding-left) hatalı bir boşlukla ayrılmıştır.
-
- Her zaman birbirinden farklı değerleri en az bir boşlukla ayırdığından emin olmalısın. Nitelik adlarını ve nitelik değerlerini, bölünmüş tek dizeler olarak bir arada tutun.

- -
/* bölünmüş tek dizeler */
-margin: 0 auto; /*tek dize*/
-padding-left: 10px; /*tek dize*/
-
-/* aşağıdaki kodlar çalışır fakat okuması zor*/
-margin:
-0
-auot;
-padding-left:
-10px;
-
- -

Boşluğun CSS'i nasıl bozabileceğini öğrenmek için test CSS'izin içinde boşluk bırakarak oynamayı dene.

- -

Sıradaki ne?

- -

Tarayıcının bir web sayfasını görüntülemek için HTML ve CSS'i nasıl kullandığını anlamak faydalıdır. Sonraki makale CSS nasıl çalışır, bunu açıklar.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Bu kısımda

- -
    -
  1. CSS nedir?
    2. -
  2. CSS'e başlarken
    3. -
  3. CSS nasıl yapılandırılır
    4. -
  4. CSS nasıl çalışır
    5. -
  5. Öğrendiklerini uygulama
    6. -
diff --git a/files/tr/learn/css/first_steps/how_css_works/index.html b/files/tr/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 434e8f3a84..0000000000 --- a/files/tr/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: CSS nasıl çalışır -slug: Learn/CSS/First_steps/How_CSS_works -tags: - - Başlangıç - - Beginner - - CSS - - DOM - - Eğitim - - Learn -translation_of: Learn/CSS/First_steps/How_CSS_works -original_slug: Öğren/CSS/Ilk_adimlar/CSS_nasil_calisir ---- -

{{LearnSidebar}}
- {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

CSS'in temellerini, ne için kullanıldığını ve basit stil sayfalarının nasıl yazılacağını öğrendin. Bu derste, bir tarayıcının CSS ve HTML'yi nasıl ele alıp bir web sayfasına dönüştürdüğüne bir göz atacağı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.)
Amaç:CSS ve HTML'nin tarayıcı tarafında naısl ayrıştırıldığının ve bir tarayıcı CSS ile karşılaştığında ne olduğunun temellerini anlamak.
- -

CSS gerçekten nasıl çalışır?

- -

Tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ile stil bilgisini birleştirmektedir. Bunuda aşağıda listelediğimiz birkaç aşamada işler. Bunun, tarayıcının bir web sayfasını yüklediğinde sergilediği davranışın çok basite indirgenmiş bir sürümü olduğunu ve farklı tarayıcıların işlemi farklı şekillerde ele alabileceğini unutma . Ancak kabaca olan budur.

- -
    -
  1. Tarayici HTML'yi yükler(Örn. onu ağdan alır).
    2. -
  2. {{Glossary("HTML")}}'yi bir  {{Glossary("DOM")}}'a (Belge Nesnesi Modeli) dönüştürür. DOM, bilgisayarın belleğindeki belleği temsil eder. DOM, sonraki bölümde biraz daha ayrıntılı olarak açıklanacak.
    3. -
  3. Tarayıcı daha sonra gömülü resimler ve videolar gibi HTML belgesi ile bağlantılı kaynaların çoğunu ve bağlantılı CSS'leri yükler! JavaScript süreç içinde biraz daha sonra ele alınacaktır. Ancak burada kafanda karışıklık olmaması için hakkında konuşmayacağız.
    4. -
  4. Tarayıcı, yüklenen CSS'de bulduğu seçicilere bağlı olarak kural seçici türlerine göre(örn, öğe, sınıf, kimlik vb.) kümeler. DOM'daki hangi düğümlere hangi kuralların uygualanması gerektiğini belirler ve bunlara gerektiği şekilde stil ekler(Bu ara adıma işleme ağacı denir).
    5. -
  5. Ağacı oluşturma, kurallar uygulandıktan sonra görünmesi gereken şekil yapıya yerleştirilir.
    6. -
  6. Sayfanın görsel görüntüsü ekrana getirilir(bu aşamaya boyama denir).
    7. -
- -

Aşağıdaki şema, işlemin basit bir görünümünü sunar.

- -

- -

DOM hakkında

- -

DOM'un ağaca benzer bir yapısı vardır. Biçimlendirme dilindeki her öğe, nitelik ve metin parçası ağaç yapsında bir {{Glossary("Node/DOM","DOM düğümü")}} haline gelir. Düğümler, diğer DOM düğümleriyle olan ilişkileriyle tanımlanır. Bazı öğeler, alt düğümlerin ebeveynleridir ve alt düğümlerin de kardeşleri vardır.

- -

DOM'u anlamak, CSS'ni tasarlamana, hataları ayıklamana ve bakımını yapmana yardımcı olur. Çünkü DOM, CSS'in ve belgenin buluştuğu yerdir. Tarayıcıda DevTools ile çalışmaya başladığında, hangi kuralların geçerli olduğunu görmek için öğeleri seçerken DOM'da geziyor olacaksın.

- -

Gerçek bir DOM örneği

- -

Uzun ve sıkıcı bir açıklamadan ziyade, gerçek bir HTML kesitinin DOM'a nasıl dönüştürüldüğünü görmek için bir örneğe bakalım.

- -

Aşağıdaki HTML kodunu ele alalım:

- -
<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
- -

DOM'da, <p> nesnemize karşılık gelen düğüm(P) bir ebeveyndir. Düğümümüzün çocukları bir adet metin düğümü ve üç adet <span> öğemize karşılık gelen (SPAN) düğümüdür. SPAN Düğümlerimizde kendi metin düğümlerinin ebeveynleridir.

- -
P
-├─ "Let's use:"
-├─ SPAN
-|  └─ "Cascading"
-├─ SPAN
-|  └─ "Style"
-└─ SPAN
-   └─ "Sheets"
- -

Bir tarayıcının önceki HTML kesitini nasıl yorumladığını gösterdik. Tarayıcı yukarıdaki DOM ağacını işler ve ardından bunu tarayıcıda şu şekilde görüntüler :

- -

{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}

- - - -

DOM'a CSS uygulama

- -

Diyelim ki belgemize stil vermek için biraz CSS ekledik. HTML kesitimiz aşağıdaki gibidir:

- -
<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
- -

Diyelimki ona aşağıdaki CSS'i uyguladık:

- -
span {
-  border: 1px solid black;
-  background-color: lime;
-}
- -

Tarayıcı HTML'yi çözümleyecek ve bundan bir DOM oluşturacak, ardından CSS'i çözümleyecektir. CSS'de bulunan tek kuralın bir span seçicisi olması nedeniyle, tarayıcı CSS'i çok hızlı bir şekilde sıralayabilecektir. Bu kuralı <span> öğelerinin üçünede uygulayacak ve son görseli renklendirecektir.

- -

Güncellenen çıktı aşağıdaki gibidir:

- -

{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}

- -

Bir sonraki kısımdaki CSS Hata Ayıklama dersimizde, CSS sorunlarını ayıklamak için tarayıcıda DevTools'u kullanacağız ve tarayıcının CSS'i nasıl yorumladığı hakkında daha fazla bilgi edineceğiz.

- -

Tarayıcı anlamadığı bir CSS ile karşılaşırsa ne olur?

- -

Daha önceki bir derste tarayıcıların aynı anda yeni çıkan CSS kodlarını uygulamadığından bahsetmiştim. Ayrıca, birçok kişi bir tarayıcının en son sürümünü kullanmamaktadır. CSS'in her zaman geliştirildiği ve bu nedenle tarayıcıların tanıyabileceklerinin ötesinde olduğu göz önüne alındığında, bir tarayıcı tanımadığı bir CSS seçici veya bildirimiyle karşılaştığında ne olacağını merak edebilirsin.

- -

Cevap; hiç bir şey yapmaması ve sadece bir sonraki CSS parçasına geçmesidir!

- -

Bir tarayıcı kurallarını çözümlediğinde anlamadığı bir özellik veya değerle karşılaşırsa, onu yok sayar ve bir sonraki bildirime geçer. Bir hata yaptıysan yada bir nitelik veya değer çok yeniyse ve tarayıcın bunu henüz desteklemiyorsa bildirimi veya kuralı yok sayar.

- -
-
<p> I want this text to be large, bold and blue.</p>
- -
p {
-  font-weight: bold;
-  colour: blue; /* incorrect spelling of the color property */
-  font-size: 200%;
-}
-
- -

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

- -

Tarayıcıların bu yaklaşımı çok faydalıdır. Bu, bildirimin anlaşılmadığında herhangi bir hata almayacağını bilerek, yeni CSS bildirimlerini bir geliştirme olarak kullanabileceğin anlamına gelir — tarayıcı yeni özelliği alıp almaması bizim için sorun teşkil etmez. Cascade (art arda denetimin)'ın çalışma şekli ve tarayıcıların aynı nitelikte iki kuralın olduğu bir stil sayfasıyla karşılaştıklarında son CSS'i kullanmaları gerçeğiyle birleştiğinde, yeni CSS'i desteklemeyen tarayılar için alternatifler sunabilirsin.

- -

Bu, yeni ve her tarayıcı tarafından desteklenmeyen bir nitelik/değer kullanmak istediğinde işine yarar. Örneğin, bazı eski tarayıcılar calc() fonksiyonunu bir değer olarak desteklemez. Peki bunun için ne yapabilirim? Bir kutu için piksel cinsinden genişlik verebilirim (width: 500px), sonrada calc(100% - 50px) fonksiyonuyla bir değer vermeye devam edebilirim. Eski tarayıcılar, calc() fonksiyonunu anlamadıkları için ilgili satırı yok sayarak piksel sürümünü kullanırlar. Yeni tarayıcılarda çizgiyi piksel kullanarak yorumlacak ancak daha sonraki basamakta calc() fonksiyonunu görüp bu kuraldaki değeri uygulayacaklardır. Önceki satırdaki değer geçersiz sayacaklardır.

- -
.box {
-  width: 500px;
-  width: calc(100% - 50px);
-}
- -

Sonraki derste çeşitli tarayıcıları desteklemenin daha birçok yolunu inceleyeceğiz.

- -

Ve sonunda

- -

Bu kısmı neredeyse bitirdin; yapacak sadece bir işimiz kaldı. Bir sonraki makalede  öğrendiklerini uygulacak ve bu süreçte bazı CSS'leri test edeceksin.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

Bu kısımda

- -
    -
  1. CSS Nedir?
    2. -
  2. CSS'e başlarken
    3. -
  3. CSS nasıl yapılandırılır
    4. -
  4. CSS nasıl çalışır
    5. -
  5. Öğrendiklerini uygula
    6. -
diff --git a/files/tr/learn/css/first_steps/index.html b/files/tr/learn/css/first_steps/index.html deleted file mode 100644 index 8a0dae72ad..0000000000 --- a/files/tr/learn/css/first_steps/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: CSS'e ilk adım -slug: Learn/CSS/First_steps -tags: - - Acemi - - Beginner - - CSS - - Landing - - Learn - - Modul - - Module - - first steps - - İlk Adım -translation_of: Learn/CSS/First_steps -original_slug: Öğren/CSS/Ilk_adimlar ---- -
{{LearnSidebar}}
- -

CSS (Basamaklı Stil Sayfaları), web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn., içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek; birden çok sütuna bölmek, animasyonlar ve diğer dekoratif özellikler eklemek gibi. Bu bölüm, nasıl çalıştığını, söz diziminin neye benzediğini ve bunu HTML'ye, stil ekelemek için nasıl kullanmaya başlayabileceğinle ilgili, temel bilgilerle CSS uzmanlığına doğru giden yolunda yumuşak bir başlangıç sağlar.

- -
-

Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?

- -

Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.

- -

Başla

-
- -

Önkoşullar

- -

Bu bölüme başlamadan önce sağlama gereken koşullar şunlardır:

- -
    -
  1. Bilgisayarları ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın.
    2. -
  2. Gerekli yazılımların kurulumu dersinde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem, Dosyalarla çalışma dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olmalısın.
    3. -
  3. HTML'ye Giriş  konusunda anlatıldığı gibi temel HTML bilgisi sahibi olmalısın.
    4. -
- -
-

Not: Kendi dosyalarını oluşturma yeteneğin olmayan bir bilgisayar, tablet veya başka bir cihaz üzerinde çalışıyorsan, JSBin veya Glitch gibi çevrimiçi kodlama yapabileceğin bir sitede kod örneklerini(çoğunu) deneyebilirsin.

-
- -

Bölümler

- -

Bu eğitim serisi, sizi tüm temel CSS teorilerine götürecek ve bazı becerileri test etmen için fırsatlar sunacak bölümleri içerir.

- -
-
CSS nedir?
-
CSS (Basamaklı stil sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, fakat kaputun altında nasıl çalışır? Bu bölümde, basit bir sözdizimi örneğiyle CSS'in ne olduğunu ve dil hakkındaki bazı temel terimleri açıklayacağız.
-
CSS'e başlarken
-
Bu Yazıda basit bir HTML belgesini alıp ona CSS uygulayacağız, bu sırada dil hakkında bazı pratik bilgiler öğreteceğiz.
-
CSS nasıl yapılandırılır
-
Artık CSS'in ne olduğu ve onu kullanmanın temelleri hakkında bir fikrin olduğuna göre, dilin kendi yapısına biraz daha derinlemesine bakmanın zamanı geldi. Burada tartışılan kavramların çoğuyla zaten tanıştık; daha sonraki kavramları kafa karıştırıcı bulursan, bir özet geçmek için bu bölüme geri dönebilirsin.
-
CSS nasıl çalışır?
-
CSS'in temelerini, ne için olduğunu ve basit stil sayfalarının nasıl yazılacağını öğrendik. Bu  bölümde, bir tarayıcının CSS ve HTML'yi nasıl alıp bir web sayfasına dönüştürdüğüne bir göz atacağız
-
Öğrendiklerini kullanın
-
Son birkaç derste öğrendiğin bilgilerle, basit metin belgelerini CSS kullanarak, onlara kendi stilini eklemek için biçimlendirebileceğini keşfetmelisin. Bu makale size bunu yapma şansı veriyor.
-
- -

Göz at

- -
-
Orta Düzey Web Okuryazarlığı 1:CSS'e Giriş
-
CSS'ye giriş bölümünde bahsedilen birçok beceriyi araştıran ve test eden mükemmel bir Mozilla hazırlık kursu. Bir web sayfasında, CSS seçicilerin, niteliklerin ve değerlerin bir HTML sayfasındaki öğelerin stilini belirlemesi hakkında bilgi edinin.
-
diff --git a/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html b/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index 480eb8f7c5..0000000000 --- a/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Öğrendiklerini uygula -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - Acemi - - Başlangıç - - Beginner - - CSS - - Eğitim - - Learn - - Playground - - oyun alanı -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge -original_slug: Öğren/CSS/Ilk_adimlar/Ogrendiklerinizi_Uygulayın ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Son birkaç derste öğrendiklerinle, basit bir metin belgesine CSS'i kullanarak, onlara kendi stilini uygulayabileceğini gördün. Bu makele öğrendiklerini uygulayabileceğini gösterecektir.

- - - - - - - - - - - - -
Ön Koşul:Bu makaleye geçmeden önce CSS temelleri kısmının geri kalanını çalışmış  ve HTML temellerini anlamış olman gerekir (HTML'ye Giriş).
Amaç:Biraz CSS ile oyun oynamak ve yeni öğrendiğin bilgilerini test etmek.
- -

Başlangıç noktası

- -

Aşağıdaki canlı düzenleyicide çalışabilir veya kendi düzenleyicinle çalışmak için örnek dosyayı indirebilirsin. Bu, HTML içeren tek bir dosyadır ve içerisinde "Dahili CSS" tanımları vardır. Alternatif olarak çevrimiçi(online) kod düzenleyebileceğin şu sayfalarıda kullanabilirsin: CodePen, jsFiddle, ve Glitch.

- -
-

Not: Takıldığın noktalarda bizden yardım isteyebilirsin — Değerlendirme ve daha fazlası bölümüne bakabilirsin.

-
- -

CSS ile çalışmak

- -

Aşağıdaki etkileşimli örnek, CSS kullanılarak şekillendirilmiş bir biyografiyi göstermektedir. Kullandığım CSS nitelikleri aşağıdaki gibidir — her biri MDN'deki nitelik sayfasına bağlanır, bu size kullanımıyla ilgili daha fazla örnek verecektir.

- -
    -
  • {{cssxref("font-family")}}
    • -
  • {{cssxref("color")}}
    • -
  • {{cssxref("border-bottom")}}
    • -
  • {{cssxref("font-weight")}}
    • -
  • {{cssxref("font-size")}}
    • -
  • {{cssxref("text-decoration")}}
    • -
- -

Seçicilerden, h1 ve h2 gibi stil etiketlerinin bir karışımını kullandım, ancak aynı zamanda iş başlığı için bir sınıf oluşturdum ve onu şekillendirdim.

- -

Kullandığım niteliklere farklı değerler girerek, bu biyografinin görünümünü değiştirin.

- -
    -
  1. CSS color niteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(hotpink) yap.
    2. -
  2. Birinci seviye başlığın altına {{cssxref("border-bottom")}} niteliği ile 10px boyutunda noktalı(dotted) çizgi atın ve rengini mor(purple) yap.
    3. -
  3. 2. düzey başlığı italik yap.
    4. -
  4. ul etikemizin arka plan renk {{cssxref("background-color")}}  değerini #eeeeee yap ve ayrıca mor(purple) renginde ve 5px kalınlığında çerçeve({{cssxref("border")}}) ekle. İçeriği çerçeveden uzaklaştırmak için paddin niteliğine kullan.
    5. -
  5. Linklerin üzerine gelindiğinde renginin yeşil(green) olmasını sağla.
    6. -
- -

Çıktının resimdeki gibi gözükmesi gerekmektedir.

- -

Screenshot of how the example should look after completing the assessment.

- -

MDN CSS reference safasında, burada bahsedilmeyen bazı özelliklere göz atıp maceraya atıl!

- -

Burada yanlış bir cevap olmadığını unutma — öğreniminin bu aşamasında biraz eğlenebilirsin.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

Değerlendirme ve daha fazlası

- -

Çalışmanın değerlendirilmesini veya takıldığın bir noktada yardım almak istediğinde yapman gerekenler:

- -
    -
  1. Çalışmanı CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir düzenleyiciye kaydet.
    2. -
  2. MDN Discourse forum Learning category sayfasına değerlendirme veya yardım için bir gönderi yaz. Gönderinde olması gerekenler: -
      -
    • "CSS ilk adımları için değerlendirme gerekmektedir" gibi açılayıcı bir metin.
      • -
    • Hali hazırda denediklerini ve bizden ne yapmamızı istediğinle ilgili ayrıntılar. Örneğin, bir niteliğe değer atarken sorunla karşılaşırsan veya yaptığının değerlendirilmesini istiyorsan.
      • -
    • Yukarıdaki 1. adımda bahsedilen çevrim içi düzenleyicilere kaydettiğin kodun bağlantısı. Bu, bizden istediğin değerlendirme ve yardım için gereklidir. Göremediğimiz kod üzerinden birisine yardım etmek çok zordur.
      • -
    • Yardım istediğin konunun sorusunu içeren sayfanın bağlantısı.
      • -
    -
    3. -
- -

Sıradaki ne?

- -

Bu ilk üniteyi tamamladığın için tebrikler. Artık CSS hakkında iyi bir genel anlayışa sahip olmalısın ve bir stil sayfasında olup bitenlerin çoğunu anlayabiliyorsundur. bir sonraki ünite olan CSS'in yapı taşlarında, birkaç önemli konuya derinlemesine bakmaya devam edeceğiz.

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Bu ünitede

- -
    -
  1. CSS nedir
    2. -
  2. CSS'e başlarken
    3. -
  3. CSS nasıl yapılandırılır
    4. -
  4. CSS nasıl çalışır
    5. -
  5. Öğrendiklerini uygulama
    6. -
diff --git a/files/tr/learn/css/first_steps/what_is_css/index.html b/files/tr/learn/css/first_steps/what_is_css/index.html deleted file mode 100644 index 1afe811fc0..0000000000 --- a/files/tr/learn/css/first_steps/what_is_css/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: CSS Nedir? -slug: Learn/CSS/First_steps/What_is_CSS -tags: - - Beginner - - CSS - - CSS Giriş - - Introduction to CSS - - Learn - - Modules - - Modüller - - Ogrenim - - Ozellikler - - Sozdizimi - - Specifications - - Syntax -translation_of: Learn/CSS/First_steps/What_is_CSS -original_slug: Öğren/CSS/Ilk_adimlar/CSS_Nedir ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

{{Glossary("CSS")}}(Basamaklı Stil Sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, ancak arka planda nasıl çalışır? Bu makale, basit bir sözdizimi örneğiyle CSS'in ne olduğunu açıklar ve ayrıca dil hakkında ki bazı temel terimleri ele alır.

- - - - - - - - - - - - -
Ön Koşullar:Gerekli yazılımların kurulumu dersinde ayrıntılı olarak açıklandığı gibi, gerekli yazılımların kurulu olduğu bir sistem; Dosyalarla çalışma dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceği hakkında bilgi, HTML'ye Giriş  konusunda anlatıldığı gibi temel HTML hakkında bilgi sahibi olmalısın.
Amaç:CSS'in ne olduğunu öğrenmek
- -

HTML'ye Giriş kısmında HTML'nin ne olduğu ve belgeleri oluşturmak için nasıl kullanıldığını ele aldık. Oluşturulan bu belgeler bir web tarayacısından okunabilir olacaktır. Başlıklar normal metinden daha büyük görünecek, parafraflar yeni bir satıra bölünecek ve aralarında boşluk olacaktır. Bağlantılar, onları diğer metinlerden ayırmak için renkli ve altı çizilmiş olacaktır. Sayfa üzerinde ki gördüğün farklılıklar,  sayfanın yazarı tarafından açık bir stil belirtilmemiş olsa bile sayfanın okunabilir olması için HTML'ye tarayıcının uyguladığı varsayılan stillerdir.

- -

The default styles used by a browser

- -

Ancak, tüm web siteleri böyle görünseydi web gerçekten sıkıcı bir yer olurdu. CSS kullanarak, HTML öğelerinin tarayıcıda tam olarak nasıl göründüğünü kontrol edebilir, istediğin tasarımı kullanarak sayfanı oluşturabilirisin.

- -

Tarayıcının varsayılan stilleri hakkında daha fazla bilgi için aşağıdaki videoyu izle.

- -

{{EmbedYouTube("spK_S0HfzFw")}}

- -

CSS ne içindir?

- -

Daha öncede bahsettiğimiz gibi, CSS belgelerin kullanıcılara nasıl sunulacağını, nasıl biçimlendirileceğini, nasıl yerleştirileceklerini vb. gibi şeyleri belirleyen bir dildir.

- -

Bir belge genellikle bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. — HTML en yaygın biçimlendirme dilidir, ancak SVG veya XML gibi başka biçimlendirme dilleriyle de karşılaşabilirsin.

- -

Bir dökümanı bir kullanıcıya sunmak, onu ziyaretçinin anlayabileceği bir forma dönüştürmek anlamana gelir. Tarayıcılar, sevdiğim Firefox, Chrome veya Edge, belgeleri bir bilgisayar ekranında, projektörde veya yazıcıda görsel olarak sunmak için tasarlanmıştır.

- -
-

Note: Tarayıcıya bazen {{Glossary("User agent","kullanıcı aracı")}} denir ve bu temelde bir bilgisayar sistemi içerisindeki bir kişiyi temsil eden bir bilgisayar programı anlamına gelir. Tarayıcılar, CSS hakkında konuşurken aklımıza gelen ana kullanıcı arayüzüdür, fakat sadece bunlar değildir. Kullanılabilir başka kullanıcı aracıları da vardır - HTML ve CSS belgelerini yazdırılabilen PDF'lere dönüştüren programlar gibi.

-
- -

CSS, en basit şekilde belge metninin şekillendirimesi için kullanılabilir — örn; başlıkların ve bağlantıların rengi ve boyutunu değiştirmek ve düzen oluşturmak için de kullanılabilinir — örn; tek bir metin sütununu bir düzene dönüştürmek. Animasyon gibi efektler için bile kullanılabilir. Belirli örnekler için bu paragraftaki bağlantılara bir göz atın.

- -

CSS sözdizimi

- -

CSS kural tabanlı bir dildir — web sayfandaki belirli öğelere veya öğe gruplarına uygulanmasını istediğin stilleri belirleyen kurallar tanımlarsın. Örn; "Sayfamdaki ana başlığın büyük ve kırmızı bir metin olarak gösterilmesini istiyorum".

- -

Aşağıdaki kod, yukarıda açıklanan stili elde edecek çok basit bir CSS kuralını gösterir:

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
- -

Kural, bir öğe {{Glossary("CSS Selector", "seçici")}} ile başlar. Bu, biçimlendireceğimiz HTML öğesini seçer. Bu başlangıç ile birinci seviye başlıkların stilini belirleyeceğimizi {{htmlelement("h1")}} belirtiyoruz.

- -

Daha sonra bir dizi süslü parantezimiz { }var. Bunların içinde, nitelik ve değer  çifti biçimini alan bir veya daha fazla beyan olacaktır. Her bir çift, seçtiğimiz öğelerin bir niteliğini ve ardından niteliğe vermek istediğimiz bir değeri belirtir.

- -

İlk önce niteliğimiz ve niteliğe atayacağımız değerimiz var. CSS {{Glossary("property/CSS","niteliğinin")}} kendisine bağlı olarak, atayabileceğin farklı değerlere sahip olabilir. Örneğimizde, çeşitli renk değeri alabilen color niteliğine sahibiz. Ayrıca font-size niteliğinede sahibiz. Bu nitelik, çeşitli boyut birimlerini değer olarak alabilir. Fakat color niteliğine biri uzunluk birimi atamana izin verilmez.

- -

Bir CSS stil sayfası, birbiri ardına yazılmış birçok kuralı içerecektir.

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
-
-p {
-    color: black;
-}
- -

Bazı değerleri hızlı bir şekilde öğrendiğini, bazılarını ise araştırman gerektiğini göreceksin. MDN'deki nitelik referans sayfaları, unuttuğun da veya bir değer olarak başka neleri kullanabileceğini bilmek istediğinde, nitelikler ve değerleri hakkında bulabileceğin kapsamlı bilgiler sunar.

- -
-

Not: MDN CSS referans'da listelenen tüm CSS niteliklerinin açıklama sayfalarına bağlantılar bulabilirsin. Alternatif olarak, bir CSS niteliği hakkında daha fazla bilgi edinmen gerektiğinde, favori arama motorun da "mdn css-feature-name" diye aramaya alışmalısın. Örn; "mdn color" ve "mdn font-size"!

-
- -

CSS modülleri

- -

CSS kullanarak stil verebilceğin pek çok şey olduğundan, dil modüllere bölünmüştür. MDN'yi keşfederken bu modüllere atıfta bulunacağımızı göreceksin ve belge sayfalarının çoğu belirli bir modül için düzenlenmiştir. Örn; ne için kullanıldığı ve alabileceği farklı nitelikleri görebilmek için Arka Palanlar ve Kenarlıklar modüllerine MDN refaransından bakabilirsin. Ayrıca, teknolojiyi tanımlayan CSS Spesifikasyonuna bağlantılar da bulacaksın (aşağıya bak).

- -

Bu aşamada CSS'in nasıl yapılandırıldığı konusunda çok fazla endişelenmene gerek yok, ayrıca bir niteleğin diğer öğelerde de kullanılabildiğinin farkındaysan bu aradığın bilgiye ulaşmanı kolaylaştırabilir, bir öğe için öğrendiğin nitelik bigileri, kullanılabildiği diğer öğe içinde aynı kural düzenine sahiptir.

- -

Kesin bir örnek vermek gerekirse, Arka Planlar ve Kenarlıklar modülüne geri dönelim — bu modülde tanımlacak background-color ve border-color nitelik değerlerinin aynı değerleri alabileceğini düşünebilirsin. Haklısında!

- -

CSS özellikleri

- -

Tüm web teknolojileri (HTML, CSS, JavaScript, vb.), Standardizasyon konsorsiyumları ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} veya {{glossary("Khronos")}} gibi) tarafından yayınlanan standartlar adı verilen dev dokümanlarda tanımlanır.

- -

CSS'de farklı değildir — W3C içindeki CSS Working Group adı verilen bir grup tarafından geliştirilmiştir. Bu grup; tarayıcı sağlayıcılarının, CSS ile ilgilenen diğer şirketlerin temsilcileri ve bağımsız olarak hareket eden, davetli uzmanlar olarak bilinen ve üye bir kuruluşa bağlı olmayan kişilerden oluşmaktadır.

- -

Yeni bir CSS özelliği, CSS Working Group tarafından belirlenir veya geliştirilir. Bu yenilik için bir tarayıcı bir yeteğene sahip olmak istemiş olabilir, web tasaraımcıları ve geliştiricileri bir nitelik isteğinde bulunmuş olabilirler veya çalışma grubunun kendisi bir gereksinim olduğunu düşünmüş olabilir. Bunlar gibi durumlarda organizasyondan yeni CSS niteliği için çalışma başlatır ve yeni niteliğin eski web sitelerini bozacak bir şekilde tanımlama yapılmaması için grub çok çalışmaktadır. 2000 yılında yayınlanan ve o zamanki sınırlı CSS niteliklerini kullanan bir web sayfası bugün hala kullanılabiliyor olması gerekir.

- -

CSS'e yeni başlayan biri olarak, CSS niteliklerini ezici bulman olasıdır. Bir çok deneyimli geliştirici, MDN belgelerine veya diğer eğitimlere başvurmayı tercih eder. Bu sayede, her zaman bir kaynak bulabileceğini bildiğinde, kullandığın CSS'i, tarayıcı desteğini(aşağıya bakın) ve nitelikler arasındaki ilişkiyi anlamak için zaman harcamaya değer.

- -

Tarayıcı desteği

- -

CSS belirlendikten sonra, sadece bir veya daha fazla tarayıcı tarafından desteklenmiş ise web sayfalarının geliştirilmesinde kullanılabilir. Bu, CSS dosyamızdaki talimatın ekrana çıktısı alınabilecek bir kurala dönüştürmek için desteklendiği anlamına gelir. CSS Nasıl Çalışır dersinde bu sürece daha fazla bakacağız. Tüm tarayıcıların bir niteliği aynı anda uygulaması alışılmadık bir durumdur ve bu nedenle genellikle bazı tarayıcılarda CSS'in bir kısmını kullanıp, bir kısmını da kullanamayacağız. Bu nedenle, tarayıcıların CSS'in hangi niteliklerini desteklediğini kontrol etmek faydalıdır. MDN'deki her nitelik sayfasında, ilgilendiğimiz niteliğin desteklenme durumunu görebilir ve onun her tarayıcıda çalışıp çalışmayacağını anlayabiliriz.

- -

Aşağıda, CSS  font-family niteliği için destek tablosu yer almaktadır.

- -

{{Compat("css.properties.font-family")}}

- -

Sırada ne var?

- -

Artık CSS'in ne olduğunu biraz anladığına göre, CSS'i kendin yazmaya başlabileceğin CSS ile Başlarken bölümüne geçebiliriz.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

Bu kısımda

- -
    -
  1. CSS nedir?
    2. -
  2. CSS'ye başlarken
    3. -
  3. CSS nasıl yapılandırılır
    4. -
  4. CSS nasıl çalışır
    5. -
  5. Öğrendiklerimizi uygulamak
    6. -
diff --git a/files/tr/learn/css/index.html b/files/tr/learn/css/index.html deleted file mode 100644 index 2b3cd638c9..0000000000 --- a/files/tr/learn/css/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: CSS kullanarak HTML şekillendirmeyi öğrenin -slug: Learn/CSS -tags: - - Başlangıç - - Beginner - - CSS - - CodingScripting - - Debugging - - Hata Ayıklama - - Landing - - Scrip Kodlama - - Stil - - Style - - Tema - - Topic - - başlık - - length - - specificity -translation_of: Learn/CSS -original_slug: Öğren/CSS ---- -
{{LearnSidebar}}
- -

Basamaklı Stil Sayfaları (ing. Cascading Stylesheets) — veya {{glossary("CSS")}} — {{glossary("HTML")}}'den sonra öğrenmen gereken ikinci dildir. HTML içeriğin yapısal ve şematik tanımlamasında kullanılırken; CSS, dizayn etmek ve düzenlemek için kullanılır. Örneğin: CSS'i içeriğin fontunu, rengini, büyüklüğünü ve boşluklarını değiştirmek için kullanabilir, sütunları ayırabilir ya da animasyon veyahut decoratif özellikleri ekleyebilirsin.

- -
-

Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?

- -

Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.

- -

Başla

-
- -

Önkoşullar

- -

CSS'i öğrenmeye başlamadan önce HTML'nin temellerini öğrenmelisin. Bunun için HTML'ye Giriş eğitiminden başlayabilirsin. Bu kısımda şunları öğreneceksin:

- - - -

HTML'nin temellerini anladıktan sonra, iki konu arasında gidip gelerek aynı anda HTML ve CSS öğrenmeni öneririm. Bunun nedeni, HTML'eye CSS'i uyguladığın da, öğrenmesi çok daha ilginç ve daha eğlenceli olmasıdır. Ayrıca HTML'yi bilmeden CSS'yi gerçenten öğrenemezsin.

- -

Bu konuya başlamadan önce, bilgisayarları kullanma ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın. Gerekli yazılımların kurulumu bölümünde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem ve Dosyalarla çalışma bölümünde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olman gerekir — her ikiside  Web'e başlarken eğitiminin bir parçasıdır.

- -

Web geliştirme konusunda tamamen yeniysen, bu konulara devam etmeden önce Web'e başlarken eğitimini adım adım çalışmanı öneririz. Bununla birlikte CSS'in temelleri dersinde anlatılanların çoğu, CSS'e ilk adım bölümünde daha ayrıntılı bir şekilde ele alınmaktadır.

- -

Bölümler

- -

Bu konunun daha iyi anlaşılması için öğrenmeye aşağıda belirtilen sıra ile ilerlenmesi gerekmektedir. Hakkında bilgi sahibi olduğunu düşündüğün bölümleri atlama, Sırasıyla ilerleyerek bilgilerinide pekiştirmiş olursun.

- -
-
CSS'e ilk adım
-
CSS (Cascading Style Sheets) web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn. içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için. Bu kısım, CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML'ye stil eklemek için nasıl kullanacağın hakkında temel bilgiler verecektir.
-
CSS'in yap taşları
-
-

Bu bölüm CSS'e ilk adım'ın kaldığı yerden devam ediyor- artık dile ve sözdizimine aşina oldun ve onu kullanma konusunda bazı temel bilgiler edindin, biraz daha derine dalmanın vakti geldi. Bu bölümde, art arda denetim ve mirası, tüm seçici türlerini, birimleri, boyutlandırmayı, arka planların ve kenarlıkların stilini belirlemeyi, hata ayıklamayi ve çok daha fazlasını inciler

- -

Buradaki amaç, size yetkin CSS yazmak için bir araç seti sağlamak ve  metin şekillendirme ve CSS düzeni gibi daha spesifik kurallara geçmenden önce tüm temel kavramları anlamana yardımcı olmaktır.

-
-
Metin stilini belirleme
-
CSS dilinin temelleri ele alındığında, odaklanman gereken bir sonraki CSS konusu, CSS ile yapacağın en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipini, kalınğı, italiği, satır ve harf aralığını, alt gölgeler ve diğer metin özelliklerini ayarlama da dahil olmak üzere metin stilinin temellerine bakıyoruz. Sayfana özel yazı tiplerini uygulamaya; listeleri ve bağlantıları şekillendirmeye bakarak bu bölümü tamamlıyoruz.
-
CSS düzeni
-
Bu kısma kadar CSS'in temellerini, metnin stilini ve içeriğinin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğini inceledik. Şimdi, kutularını görüntü alanına ve bir birlerine göre yerleşimlerini düzenlemeye bakma zamanı. CSS düzenine derinlemesine dalarak; farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına, ayrıca hala bilmek isteyebileceğin bazı eski tekniklerin ön koşullarını ele alacağız.
-
- -

Yaygın sorunları CSS ile çözme

- -

Yaygın sorunları çözmek için CSS kullanma; bir web sayfası oluştururken çok yaygın sorunları çözmek için CSS'in nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.

- -

Başlangıçtan itibaren, renkleri öncelikle HTML öğelerine ve arka planlarına uygula, öğelerin boyutunu, şeklini ve konumunu değiştirin ve öğeler üzerinde kenarlık ekle ve bunları tanımla. CSS'in temellerini sağlam bir şekilde anladıktan sonra yapamayacağın pek bir şey yoktur. CSS öğrenmenin en iyi yanlarından biri, temelleri öğrendikten sonra, aslında nasıl yapılacağını henüz bilmesen bile, genellikle neyin yapılabileceği ve yapılamayacağı konusunda oldukça iyi bir öngörüye sahip olmandır.

- -

"CSS tuhaf"

- -

CSS, karşılaşacağın çoğu programlama dilinden ve tasarım aracından biraz farklı çalışır. Aşağıdaki videoda, Miriam Suzanne CSS hakkında yararlı bir kaç açıklamada bulunuyor.

- -

{{EmbedYouTube("aHUtMbJw8iA")}}

- -

Göz at

- -
-
MDN'de CSS
-
CSS dilinin tüm özellikleri içn ayrıntılı kaynak belgeleri bulacağın MDN, CSS eğitimine ana giriş noktasıdır. Burası ziyaret etmek için harika bir yer.
-
diff --git a/files/tr/learn/css/styling_text/fundamentals/index.html b/files/tr/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index eba906eeca..0000000000 --- a/files/tr/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,738 +0,0 @@ ---- -title: Temel metin ve yazı tipi biçimi -slug: Learn/CSS/Styling_text/Fundamentals -tags: - - Acemi - - Aile - - Aralık - - Article - - Beginner - - CSS - - Ders - - Genişlik - - Guide - - Hizalama - - Kısa Tanım - - Metin - - Rehber - - Style - - Tarz - - Text - - Yazı Tipi - - aligment - - family - - font - - shorthand - - spacing - - weight -translation_of: Learn/CSS/Styling_text/Fundamentals -original_slug: Öğren/CSS/Styling_text/Fundamentals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

Bu derste, {{glossary("CSS")}} ile metin stilinde ustalaşma yolculuğuna başlayacağız. Burada, yazı tipi genişliğini, ailesini, yazı tipi kısa tanımını, hizlamasını, satır/harf aralığını ve diğer efektleri de dahil omak üzere metin/yazı tipi stilinin tüm temellerini ayrıntılı olarak inceleyeceğiz.

- - - - - - - - - - - - -
Ö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ç:Web sayfalarında metin biçimlendirmek için gereken temel özellikleri ve teknikleri öğrenmek.
- -

CSS'de metnin stilini belirlemeye neler dahildir?

- -

HTML ve CSS ile yaptığın çalışmalarda zaten deneyimlemiş olacağın gibi, bir öğenin içindeki metin, öğenin içerik kutusunun içine yerleştirilir. İçerik alanının sol üstünde (veya RTL metin yönünde sağ üstte) başlar ve satırın sonuna doğru akar. Kutunun sınırına ulaştığında, bir sonraki satıra iner ve tüm içerik kutuya yerleştirilinceye kadar sonraki satıra devam eder. Metin içeriği etkili bir şekilde bir dizi satır içi öğe gibi davranır. Satırlar birbirlerine bitişik olarak yerleştirilir ve satır sonuna ulaşılmadıkça  veya {{htmlelement("br")}}  etikeytiyle karşılaşmadıkça satır kesmeleri(satır başı) oluşturulmaz.

- -
-

Not: Yukarıdaki paragraf kafanızın karışmasına neden oluyorsa, devam etmeden önce Kutu Modeli dersimizi bir daha inceleyin.

-
- -

Metni bimlendirmek için kullanılan CSS özellikleri genellikle iki kategoriye ayrılır ve bunları bu derste ayrı ayrı inceleyeceğiz:

- -
    -
  • Font stilleri: Metne uygulanan fontu etkileyen, hangi fontun uygulanacağını, ne kadar büyük olduğunu, kalınlığını, italik olup olmadığını gibi özellikler.
    • -
  • Metnin mizanpaj stilleri: Metinin aralığını, satır/harf arasındaki boşluğunu ve metinin kutu içerisinde hizalanmasının ddeğiştirilmesi gibi özellikler.
    • -
- -
-

Not: Bir öğenin içindeki metnin tek bir varlık olarak etkilendiğini unutmayın. Metni {{htmlelement("span")}} veya {{htmlelement("strong")}} gibi öğelerin içine almadıkça veya ::first-letter(bir öğenin içindeki metnin ilk harfi), ::first-line(bir öğenin içindeki metnin ilk satırı) veya ::selection(imleç tarafından o anda seçilen kısmı) gibi sözde öğeleri kullanmadıkça, alt bölümleri seçemez ve bunlara stil uygulayamaz.

-
- -

Fontlar(Yazı Tipleri)

- -

Fontları şekillendirme özelliklerine bakalım. Bu örnekte, aşağıdaki gibi görünen HTML öreneğine bazı farklı CSS özellikleri uygulayacağız:

- -
<h1>Tommy the cat</h1>
-
-<p>Well I remember it as though it were a meal ago...</p>
-
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
- -

Bitmiş örneği GitHub'da bulabilirsiniz (ayrıca kaynak kodunu da görebilirsiniz).

- -

Renk

- -

{{cssxref("color")}} niteliği hedeflenen öğedeki görünen içeriğin rengini belirler(bunlar, genellikle metindir fakat metne {{cssxref("text-decoration")}} niteliğiyle uygulanan alt ve üst çizgidir).

- -

color niteliği herhangi bir CSS renk birimini kabul edebilir. Örneğin:

- -
p {
-  color: red;
-}
- -

Bu kural paragraf renginin, taryıcının varsayılan rengi olan siyah yerine kırmızı olmasına neden olur:

- - - -

{{ EmbedLiveSample('Renk', '100%', '230') }}

- -

Font ailesi

- -

Metninizde farklı bir yazı tipi ayarlamak için {{cssxref("font-family")}}  niteliği kullanılır — bu, tarayıcının hedeflenen öğelere uygulaması için bir font (veya font listesi) belirlememize olanak tanır. Tarayıcı, yalnızca web sitesine erişilen makinede mevcutsa bir yazı tipi uygular; mevcut değilse tarayıcı {{anch("Default fonts", "varsayılan fontu")}} kullanır. Basit bir örnek şöyle görünür:

- -
p {
-  font-family: arial;
-}
- -

Bu, bir sayfadaki tüm paragrafların herhangi bir bilgisayarda bulunan arial fontunu kullanmasını sağlar.

- -

Web uyumlu fontlar

- -

Font kullanılabilirliliğinden bahsetmişken, genellikle tüm işletim sistemlerinde mevcut olan ve bu sayede endişe duyulmadan kullanılabilen bir kaç font vardır. Bunlara web uyumlu font(yazı tipleri) denir.

- -

Çoğu zaman, web geliştiricileri olarak, metin içeriğimizi görüntülemek için kullanacağımız font üzerinde daha fazla kontrole sahip olmak isteriz. Bu aşamada karşımıza çıkacak sorun, web sayfasını görüntülemek için kullanılan cihazda(Bilgisayar, tablet, akıllı telefon vb) hangi fontların yüklü olduğunu bilememizdir. Bunu bilmenin bir yolu da yoktur, ancak web uyumlu fontların en çok kullanılan işletim sistemlerinde(macOS, Windows, en yaygın Linux dağıtımları, iOS ve Android) bir örneğinin mevcut olduğunu bilmeniz ilk aşamada yeterlidir.

- -

Gerçek web uyumlu fontların listesi, işletim sistemleri geliştikçe değişecektir, ancak aşağıdaki fontları şimdilik web için kullanılabilir olduklarını kabul etmek faydalıdır(bunların çoğu, 90'ların sonları ve 2000'lerin başında Microsoft Çekirde Web Fontları sayesinde popüler hale gelmiştir):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AdıGenel TipiNotlar
Arialsans-serif -

Arial'in daha fazla desteğe sahip olmasına rağmen Helvetica'yı tercih edebilirsiniz, çünkü yazı tipinin görünümü neredeyse aynı olsa da, Helvetica'nın daha güzel bir şekle sahip olduğu düşünülür. En bariz farkı iki yazı tipi arasındaki satır aralığı farkıdır. Helvetica biraz daha geniş bir satıra aralığına sahiptir.

-
Courier Newmonospace -

Bazı işletim sistemlerinde Courier New yazı tipinin muhtemelen daha eski bir sürümü olan Courier yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan Courier New'in kullanılması tavsiye edilir.

-
Georgiaserif
Times New Romanserif -

Bazı işletim sistemlerinde Times New Roman'ın muhtemelen daha eski bir sürümü olan Times yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan Times New Roman'in kullanılması tavsiye edilir.

-
Trebuchet MSsans-serif -

Bu yazı tipini kullanırken dikkatli olmalısınız — mobil işletim sistemlerinde yaygın olarak bulunmaz.

-
Verdanasans-serif
- -
-

Not: Güvenle kullanabileceğiniz yazı tipleri listesini bulabileceğiniz kaynaklar arasında,  cssfontstack.com sitesi Windows ve macOS işletim sistemlerinde bulunan yazı tiplerinin ne kadar güvenli oldukları ve sistem üzerinde bulunabilirliği hakkında size yardımcı olabilir.

-
- -
-

Not: Web sayfalarında kullanmak istediğimiz yazı tipinin kurulu olup olmadığına bakmaksızın, her hangi bir yazı tipini kullanmamıza olanak sağlayan bir seçeneğimiz de vardır:  Web yazı tipleri. Bu konu biraz daha karmaşıktır ve bu ünitenin ilerleyen bölümlerinde ayrı bir derste inceleyeceğiz.

-
- -

Varsayılan yazı tipleri

- -

CSS genel kullanım için yazı tiplerini beş farklı ad altında gruplar: serif, sans-serif, monospace, cursive ve fantasy. Bu isimler bir genellemedir ve bu adları kullanırken hangi yazı tipinin kullanılacağı tarayıcı ve tarayıcının kurulu olduğu işletim sistemine bağlıdır. Bu adları, tarayıcının belirlemiş olduğumuz yazı tipine/tiplerine uygun herhangi bir yazı tipiyle eşleştirme yapamadığı durumlarda, bu adlara tanımlanmış herhangi bir yazı tipini belirlemesi için kullanırız.

- -

Bu beş adlandırma şu şekilde guruplandırılmıştır:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AdTanımÖrnek
serif -

Serifli yazı tipleri olarak bilinirler. Harflerde okumayı kolaylaştırdığı düşünülen harflerin köşelerinde hafif çıkıntı ve süslemelerin olduğu yazı tipleridir.

- 		Ben büyük kırmızı bir filim
sans-serifSerif içermeyen yazı tipleridir. Yazı tipi düzdür ve daha modern göründüğü düşünülür.Ben büyük kırmızı bir filim
monospaceYazı tipinin her karakterinin genişliği aynı olduğu ve genellikle kodun okunurluluğunu kolaylaştırdığı için kodlamalarda kullanılır.Ben büyük kırmızı bir filim
cursiveAkıcı bir el yazısını taklit etmesi amaçlanmış yazı tipleridir.Ben büyük kırmızı bir filim
fantasyDaha çok dekoratif amaçla kullanılan süslemeli yazı tipleridir.Ben büyük kırmızı bir filim
- -

Yazı tipi listesi

- -

Web sayfalarınızda kullanmak istediğiniz yazı tiplerinin kullanılabilirliğini garanti edemeyeceğiniz için (bir web yazı tipi bile herhangi bir nedenle başarısız olabilir), tarayıcının seçim yapabileceği birden çok yazı tipini tanımlayabiliriz. Bunun için, font-family niteliğine bir birinden virgül ile ayrılmış birden çok yazı tipi adından oluşan bir yazı tipi listesi tanımlarız. örn.

- -
p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
- -

Böyle bir durumda, tarayıcı listenin başından başlar ve yazı tipinin işletim sisteminde bulunup bulunmadığına bakar. Yazı tipi varsa, var olan yazı tipini öğelere uygular. Değilse, sonraki yazı tipine geçer ve bu şekilde devam eder.

- -

Listenin sonunda uygun bir genel yazı tipi grubu adı sağlamak iyi bir yaklaşım olur. Böylece listeelenen yazı tiplerinden hiçbiri mevcut değilse, tarayıcı en azından istediğimiz yazı tipine uygun bir seçim yapmasını sağlayabiliriz. Bu noktayı vurgulamak için, eğer genel adlandırma kullanmaz isek tarayıcı paragraflara varsayılan serifli bir yazı tipi uygulayabilir — bu genellikle Times New Roman olur — sans-serif yazı tipi olmasını istediğimiz durumlar için istediğimiz bir sonuç değil.

- -
-

Not: Trebuchet MS gibi birden fazla kelimeden oluşan font isimlerini tırnak içine almak gerekir, örneğin "Trebuchet MS".

-
- -

Bir font-family örneği

- -

Paragraflara bir sans-serif yazı tipi vererek önceki örneğimize ekleyelim:

- -
p {
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

Sayfamız artık böyle görünür:

- - - -

{{ EmbedLiveSample('Bir_font-family_örneği', '100%', 220) }}

- -

Yazı Tipi Boyutu

- -

Önceki ünitede CSS değerleri ve birimleri dersimizde, uzunluk ve boyut birimlerini inceledik. Yaz tipi boyutu ({{cssxref("font-size")}} niteliği ile ayarlanır), bu nitelik birçok ölçü birimi değerini kabul eder(yüzdelikler ve diğerleri), ancak metni boyutlandırmak için kullanacağınız en yaygın birimlerse şunlardır:

- -
    -
  • px (piksel): Metnin yüksekliğini piksel adedi olarak belirler. Bu mutlak bir birimdir — Her tarayıcı ve işletim sisteminde aynı yüksekliğe sahip olur.
    • -
  • ems: 1 em, stilini belirlediğiniz mevcut öğenin üst öğesinde ayarlanan yazı tipi boyutuna eşittir(daha karakteristik olarak, ana öğenin içinde bulunan M hafinin genişliği). Farklı yazı tipi boyutlarına sahip iç içe yerleştirilmiş birçok öğenin olduğu aşağıdaki gibi bir örnekte ki tanımlamaları nasıl yapabiliriz. İşi neden zorlaştırıyoruz? Bir kez alıştığımızda em kullanımı oldukça doğal gelmeye başlayacaktır ve sadece metni değil, her şeyi boyutlandırmada kullanabiliriz. Bakımı kolay olan bir web sitesi sahibi olmak için em çok yardımcı olacaktır.
    • -
  • rems: rem hedeflediği öğenin bir üst öğesindeki değeri değilde belgenin kök öğesindeki — {{htmlelement("html")}} — değeri baz almanın dışında aynı em gibi davranır. Bu, yazı tipi boyutlarınızı hesaplamak için matematik işlemlerini çok daha kolaylaştırır, eğer eski tarayıcıları destekelemek istiyorsanız, ek bildirimlerde bulunmanız gerecektir — rem Internet Explorer 8 ve alt sürümlerinde desteklenmez.
    • -
- -

font-size nitelik değeri, ilgili öğenin ebeveyninden miras olarak alınır ve tarayıcılar arasında varsayılan {{htmlelement("html")}}  kök öğesinin font-size nitelik değeri 16px olarak tanımlanmasıyla, kök öğenin çocukları ve torunları için bir kural oluşturmadığınız sürece sayfanızdaki tüm öğelerinfont-size değeri aynı olur. Diğer bazı öğelerin tarayıcı tarafından tanımlanmış varsayılan değerleri de olabilir, meselâ {{htmlelement("h1")}}  öğesinin varsayılan font-size nitelik değeri 2em boyutundadır, bu nedenle piksel boyutu 32px olacaktır.

- -

İç içe geçmiş öğelerin yazı tipi boyutunu ayarlamaya başladığınızda işler biraz karmaşaya neden olabilir. Örn., sayfanızdaki {{htmlelement("article")}}  öğesinin yazı tipi boyutunu 1.5em olarak ayarladınız buda normal şartlarda 24px olarak hesaplanacaktır ve <article> öğesinin içerisindeki paragrafların yazı tipi boyutunuda 20px olmasını istiyorsunuz. Bu durumda hangi em değerini kullanırdınız?

- -
<!-- belgenin kök font-size değeri 16px -->
-<article> <!-- Buradaki font-size 1.5em olmasını istiyoruz -->
-  <p>My paragraph</p> <!-- tüm paragraflarımızın font-size değerininde 20px olmasını planladık? -->
-</article>
- -

Yukarıdaki hesaplama adımlarının ilkinde 16*1,5 işlemiyle <article> öğemizin yazı tipi boyutu 24px olarak hesaplanır, paragraflarımızda font-size nitelik değerini hesaplamak için baz alacağı değeri, ebeveyni olan <article> yazı tipi boyutundan alacağı için; em * 24=20, em=20/24, em=0,83333333 olarak yazmamız gerekir. Bu biraz tuhaf gelebilir, bu yüzden bir şeyleri nasıl şekillendirdiğiniz konusunda dikkatli olmalısınız. rem işleri bira daha basit tutmak  için kullanışlı olabilir.

- -

Basit bir boyutlandırma örneği

- -

Metinlerimizi boyutlandırıken, sayfamızdaki her öğenin atası olan {{htmlelement("html")}} kök öğemizin font-size nitelik değerini 10px olarak ayarlamak daha sonraki boyutlandırma hesaplamalarımız için iyi bir yaklaşım olacaktır — bu şekilde rem niteliklerimiz varsayılan 16px değeri yerine 10px değerini baz alacaklardır. Sayfamızdaki öğeler için font-size nitelik tanımlamalarımızı belli bir alanda listelemek de iyi bir fikirdir, böylece bulunmaları kolay olacaktır.

- -

Yeni yakşımımızla sayfamızın sonucu şu şekilde olacaktır:

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 5rem;
-}
-
-p {
-  font-size: 1.5rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Basit_bir_boyutlandırma_örneği', '100%', 260) }}

- -

Yazı tipi stili, yazı tipi kalınlığı, metnin BÜYÜK/küçük dönüşümü ve metnin dekorasyonu/süslemesi

- -

CSS, metnin görsel kalınlığı/vurgusunu değiştirmek için dört ortak özellik sağlar:

- -
    -
  • {{cssxref("font-style")}}: Metnin italik görünümünü açıp/kapatmak için kullanılır. Olası değerler aşağıdaki gibidir(Herhangi bir nedenle italik görünmesini istediğimizde bunu nadiren kullacaksınız — belkide web yazı tipinizin sadece italik sürümü vardır): - -
      -
    • normal: Metni normal yazı tipine ayarlar (mevcut italikleri kapatır.)
      • -
    • italic: Metni, varsa yazı tipinin italik sürümünü kullanacak şekilde ayarlar; yoksa, bunun yerine italik görünüm simüle/benzetim edilecektir.
      • -
    • oblique: Metni, normal yazı tipi sürümünün italik olarak görünmesi için simüle/benzetim edilerek görüntülenmesini sağlar.
      • -
    -
    • -
  • {{cssxref("font-weight")}}: Metnin ne kadar kalın olacağını ayarlar. Burada kullanabileceğimiz bir çok terimimiz vardır(-light, -normal, -bold, -extrabold, -black vb.). Fakat bunların içerisinden en çok kullanacaklarımız normal ve bold terimleridir: -
      -
    • normal, bold: Yazı tipi genişliğini normal and kalın olarak ayarlar.
      • -
    • lighter, bolder: Geçerli öğenin kalınlığını, ebeveynin kalınlığından bir adım daha ince ve daha kalın olacak şekilde ayarlar.
      • -
    • 100–900: yukarıdakilerden daha hassas kontol sağlayan sayısal kalınlık değerleri.
      • -
    -
    • -
  • {{cssxref("text-transform")}}: Metninizin harf dönüşümlerini kontrol etmek için kullanılır. Alabileceği değerler: -
      -
    • none: Herhangi bir dönüşümü engeller.
      • -
    • uppercase: Tüm metni BÜYÜK HARFLERE dönüştürür.
      • -
    • lowercase: tüm metni küçük harflere dönüştürür.
      • -
    • capitalize: Tüm metninizdeki kelimelerin İlk Harflerini Büyük Olacak Şekilde dönüştürür.
      • -
    • full-width: Metninizdeki tüm glifleri, tek aralıklı karakterler şeklinde sabit genişlikteki bir kutu içine yazılacak şekilde dönüştürür. Örn. latin karakterlerinin Asya dil glifleriyle (Çince, Japonca, Korece gibi) hizalanmasına izin verir.
      • -
    • full-size-kana: Ruby karakterlerinde (Çince, Japonca, Korece gibi) kullanılan küçük yazı tipi boyutlarındaki okunabilirlilik sorunlarını telefai etmek için küçük kana karakterlerini tam boyutlu KANA'ya dönüştürmek için kullanılır.
      - ぁぃぅぇぉゕゖっゃゅょゎ -> ぁぃぅぇぉゕゖっゃゅょゎ
      • -
    -
    • -
  • {{cssxref("text-decoration")}}: Metin süslemelerini ayarlar/kaldırır( bunu genelde, bağlantıların altındaki alt çizgiyi kaldımak için kullanırsınız). Mevcut değerleri şunlardır: -
      -
    • none: Mevcut olan tüm metin süslemelerini kaldırır.
      • -
    • underline: Metnin altını çizer.
      • -
    • overline: Metnin üzerine bir çizgi çizer.
      • -
    • line-through: Metnin üstüne üst çizgi çizer.
      • -
    -  {{cssxref("text-decoration")}} ile aynı anda birden fazla süsleme eklemek istiyorsanız, aynı anda birden fazla değeri kabul edebileceğiniz unutmayın. Örn. text-decoration: underline overline. Ayrıca {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} ve {{cssxref("text-decoration-color")}} nitelikleri için {{cssxref("text-decoration")}}  niteliği bir kısa tanımdır. İlginç süslemeler oluşturmak için bu nitelikleri farklı şekillerde birleştirirerek  kullanabilirsiniz text-decoration: line-through red wavy.
    • -
- -

Örneğimize bu niteliklerden birkaçını ekleyelim:

- -

Görüntünün yeni çıktısı şu şekildedir:

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 5rem;
-  text-transform: capitalize;
-}
-
-h1 + p {
-  font-weight: bold;
-}
-
-p {
-  font-size: 1.5rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Yazı_tipi_stili_yazı_tipi_kalınlığı_metnin_BÜYÜKküçük_dönüşümü_ve_metnin_dekorasyonusüslemesi', '100%', 260) }}

- -

Metnin alt gölgeleri

- -

{{cssxref("text-shadow")}} niteliğini kullanarak metninize alt gölgeler uygulayabilirsiniz. Bu şekilde metninizin altındaki görsel veya renk ile kontrastını arttırarak okunabilirliliğini yükseltmiş oluruz yada sadece görsellik için kullanırız. Aşağıdaki gibi bu özelliği kullanabilmek için niteliğe en fazla dört değer atanabilir.

- -
text-shadow: 4px 4px 5px red;
- -

Dört özellik aşağıdaki gibidir:

- -
    -
  1. -

    Gölgenin metninize olan yatay uzaklığını belirtir — CSS uzunluk ve ölçü birimlerinin çoğunu alabilir, ancak en yaygın olarak kullanacağımız px birimi olacaktır. Pozitif değer gölgelendirmeyi sağa doğru, negatif eder ise gölgelendirmeyi sola doğru hareket ettirir. Bu değerin bulunması zorunludur.

    -
    2. -
  2. -

    Gölgenin meninize olan dikey uzaklığını belirtir — CSS uzunluk ve ölçü birimlerinin çoğunu alabilir, ancak en yaygın olarak kullanacağımız px birimi olacaktır. Pozitif değer gölgelendirmeyi aşağıya doğru, negatif eder ise gölgelendirmeyi yukarıya doğru hareket ettirir. Bunun dışında yatay tanımlama ile aynı davranışı sergiler. Bu değerin de bulunması zorunludur.

    -
    3. -
  3. -

    Bulanıklık yarıçapını tanımlar, gölgenin arka plana geçişini yumuşatmak için kullanırlır — CSS uzunluk ve ölçü birimlerinin çoğunu alabilir, bu değer belirtilmez ise varsıylan olarak 0 değerini alır ve buda bulanıklılığın olmadığı anlamına gelir. Değer yükseldikçe gölge daha geniş bir alana yayılır. Eksi değer alamaz.

    -
    4. -
  4. -

    Gölgenin temel rengi tanımlanır. Herhangi bir CSS renk değerini alabilir, gölgenin rengi belirtilmez ise geçerli olan renk kullanılır — yani gölgenin rengi öğenin color niteliğinden alınır.

    -
    5. -
- -

Birden çok gölge

- -

Virgülle ayrılmış birden çok gölge değeri ekleyerek aynı metne birden çok gölge uygulayabilirisiniz, örn.

- -
text-shadow: 1px 1px 1px red,
-             2px 2px 1px green;
- -

Bunu {{htmlelement("h1")}} öğemizin içeriği olan 'Tommy the cat' örneğimize uygularsak, şu sonucu görürdük:

- - - -

{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}

- -
-

Not: CSS ile metinlere ay ışığı gölgelendirmesi dersinde, text-shadow ile ilgili daha ilginç kullanım örnekleri görebilirsiniz.

-
- -

Metin düzeni

- -

Temel yazı tipi özellikleriyle birlikte metin düzenini etilemek için kullanacağımız özelliklere bir göz atalım.

- -

Metin hizalama

- -

{{cssxref("text-align")}} niteliği metin içeren kutunun içerisindeki metnin hizalanmasını kontrol etmek için kullanılır. Mevcut değerler aşağıdaki gibidir ve normal bir kelime işlmeci uygulamasına benzer şekilde çalışır:

- -
    -
  • left: Metni içinde bulunduğu kutunun soluna yaslar
    • -
  • right: Metni içinde bulunduğu kutunun sağına yaslar
    • -
  • center: Metni içinde bulunduğu kutuya ortalar
    • -
  • justify: Metnin satırlarını, içinde bulunduğu kutunun içerik alanının her iki yanına yaslanabilmesi için kelimeler arasındaki boşlukları değiştirerek metni yayar. Bu özelliği kullanırken dikkatli olmanız gerekir — özellikle içerisinde çok uzun bir kelimenin olduğu paragrafların görünümü korkunç olabilir. Eğer bu özelliği kullanmak isterseniz, bununla birlikte {{cssxref("hyphens")}} niteliğinide kullanarak, kelimelerin uygun yerlerinden tire "-" işaretiyle fazlalığın bir alt satıra inmesi sağlanarak görünümün daha iyi olması sağlanmalıdır.
    • -
- -

{{htmlelement("h1")}} öğemize text-align: center; bildirimini uyguladığımak istediğimde görüntü şu şekilde değişir:

- - - -

{{ EmbedLiveSample('Metin_düzeni', '100%', 260) }}

- -

Satır yüksekliği

- -

{{cssxref("line-height")}} niteliği metnin her satırının yüksekliğini ayarlar — bu çoğu uzunluk ve boyut birimini alabilir, ancak aynı zamanda çarpan olarak davranan ve genellikle en iyi seçenek olarak kabul edilen birimsiz bir değer de alabilir. Satır yüksekliğini elde etmek için yazı tipi boyutuyla {{cssxref("font-size")}} çarpılır. Gövde metni genellikle daha güzel görünür ve satırlar aralandığında okunması daha kolaydır; önerilen satır yüksekliği 1,5-2'dir(çif aralık). Dolayısıyla, metin satırlarımızı yazı tipinin yüksekliğinin 1,6 katına ayarlamak için şunu kullanırsını:

- -
line-height: 1.6;
- -

Bunu örneğimizdeki {{htmlelement("p")}} öğemize uyguladığımızda şu sonucu verir:

- - - -

{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}

- -

Harf ve kelime aralığı

- -

{{cssxref("letter-spacing")}} ve {{cssxref("word-spacing")}} nitelikleri, metninizdeki harf ve kelimlerin arasındaki boşluğu ayarlamanıza olanak sağlar. Bunları çok sık kullanmayacaksınız, ancak belirli bir görünüm elde etmeleri veya özellikle yoğun bir yazı tipinin okunabilirliğini artırmaları için bir kullanabilirsiniz. Çoğu uzunluk ve boyut birimlerini alabilir.

- -

Örnek olarak, örneğimizdeki her bir {{htmlelement("p")}} öğesinin ilk satırına biraz kelime ve harf aralığı uygulayabiliriz:

- -
p::first-line {
-  letter-spacing: 4px;
-  word-spacing: 4px;
-}
- -

Örneğimize ekleyip soncunun nasıl göründüğüne bir bakalım:

- - - -

{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}

- -

Bakmaya değer diğer nitelikler

- -

Yukarıdaki özellikler size bir web sayfasında metin stilini nasıl belirleyeceğiniz konusunda bir fikir verir, ancak kullanabileceğiniz daha birçok nitelik vardır. Sadece en önemlilerini burada ele almak istedik. Yukarıdakileri kullanmaya alıştığınızda, aşağıdakileri de keşfetmelisiniz.

- -

Yazı tipi stilleri:

- -
    -
  • {{cssxref("font-variant")}}: Küçük harfleri, küçük harf yüksekliğinde büyük harflere dönüştürür.
    • -
  • {{cssxref("font-kerning")}}: Yazı tipinin karakter aralığını açık/kapatır.
    • -
  • {{cssxref("font-feature-settings")}}: Çeşitli OpenType yazı tipi özelliklerini açık/kapatır.
    • -
  • {{cssxref("font-variant-alternates")}}: Yazı tipinin alternatif gliflerinin kullanımını kontrol eder.
    • -
  • {{cssxref("font-variant-caps")}}: Alternatif büyük harf gliflerinin kullanımını kontrol eder.
    • -
  • {{cssxref("font-variant-east-asian")}}: Japonca ve Çince gibi Doğu Asya alfabeleri için alternatif gliflerin kullanımını kontrol eder.
    • -
  • {{cssxref("font-variant-ligatures")}}: Metindeki bitişik harflerin görünümünü kontrol eder.
    • -
  • {{cssxref("font-variant-numeric")}}: Sayılar, kesirler ve sıra işaretçileri için alternatif gliflerin kullanımını kontrol eder.
    • -
  • {{cssxref("font-variant-position")}}: üst simge veya alt simge olarak konumlandırılmış daha küçük boyutlardaki alternatif gliflerin kullanımını kontrol eder.
    • -
  • {{cssxref("font-size-adjust")}}: Fontun görsel boyutunu gerçek font boyutundan bağımsız olarak ayarlar.
    • -
  • {{cssxref("font-stretch")}}: Belirli bir yazı tiğinin olası alternatif uzatılmış versiyonları arasında geçiş yapmamızı sağlar.
    • -
  • {{cssxref("text-underline-position")}}: text-decoration-line niteliğinin  underline değeriyle ayarlanan alt çizginin konumunu belirler.
    • -
  • {{cssxref("text-rendering")}}: Metin görüntülenmek için işlenme aşamısının iyileştirilmesi için kullanılır.
    • -
- -

Metin düzeni stilleri:

- -
    -
  • {{cssxref("text-indent")}}: Metin içeriğinin ilk satırının başlangıcından önce ne kadar yatay boşluk bırakılması gerektiğini belirler.
    • -
  • {{cssxref("text-overflow")}}: Taşan içeriğin ne şekilde ele alınacağını belirler.
    • -
  • {{cssxref("white-space")}}: Öğenin içerisindeki boşlukların ve satır sonlarının nasıl işleneceğini tanımlar.
    • -
  • {{cssxref("word-break")}}: Sözcüklerin satıra bölünüp bölünmeyeceğini tanımlar.
    • -
  • {{cssxref("direction")}}: Metin yönünü tanımlar (Bu, kullanılan dile bağlıdır ve genellikle HTML'nin metin içeriğine bağlı olduğu için bu bölümü işlemesine izin vermek daha iyidir.)
    • -
  • {{cssxref("hyphens")}}: Desteklenen diller için tirelemeye(kesme işareti) izin verir.
    • -
  • {{cssxref("line-break")}}: Asya dilleri için satır kırmayı gevşetin ve güçlendirin.
    • -
  • {{cssxref("text-align-last")}}: Zorlanmış satır kesmesinde, bloğun veya bir paragrafın son satırının nasıl hizalanacağını tanımlar.
    • -
  • {{cssxref("text-orientation")}}: Bir satırdaki metnin yönünü tanımlayın.
    • -
  • {{cssxref("overflow-wrap")}}:Taşmayı önlemek için tarayıcının kelimeler içindeki satırları kesip kesmeyeceğini belirler..
    • -
  • {{cssxref("writing-mode")}}: Metin satırlarının yatay mı yoksa dikey mi düzenleneceğini ve sonraki satırların aktığı yönü tanımlar.
    • -
- -

Yazı tipi kısa tanımları

- -

{{cssxref("font")}} niteliği ile yazı tipinin birçok özelliği tanımlanabilir. Tanımlabilen nitelikler şu sırayla yazılır: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} ve {{cssxref("font-family")}}.

- -

Tüm bu nitelikler arasında sadece font-size ve font-family  kullanılırken font kısa tanımında belirtilmesi gereken bir kullanım vardır.

- -

{{cssxref("font-size")}} ve {{cssxref("line-height")}} niteliklerinin arasına eğik çizgi konulmalıdır.

- -

Kullanım örneği:

- -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
- -

Aktif öğrenim: metin stilini değiştirin

- -

Bu aktif öğrenme oturumunda, yapabileceğiniz belirli bir alıştırmanız yok. sadece bazı yazı tipi/metin düzeni nitelikleriniyle oyun oynamanızı ve neler üretebileceğinizi görmenizi istiyoruz! Bunu çevrimdışı HTML/CSS dosyalarını kullanarak yapabilir veya kodunuzu aşağıdaki canlı düzenlenebilir örneğe girebilirsiniz.

- -

Bir hata yaparsanız, her zaman Sıfırla düşmesini kullanarak baştan başlayabilirsiniz.

- - - -

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

- -

Becerilerinizi test edin!

- -

Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. Bir topluluk okulunun ana sayfasını düzenleme.

- -

Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.

- -

Özet

- -

Bu derste metinle oynamaktan keyif aldığınızı umuyoruz! Sonraki ders size HTML listlerinin stilini belirleme konusunda bilmeniz gereken her şeyi açıklayacaktır.

- -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

- -

Bu ünitede

- - diff --git a/files/tr/learn/css/styling_text/index.html b/files/tr/learn/css/styling_text/index.html deleted file mode 100644 index 7bfe91f8bc..0000000000 --- a/files/tr/learn/css/styling_text/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Metni stilini belirleme -slug: Learn/CSS/Styling_text -tags: - - Acemi - - Bağlantılar - - Beginner - - CSS - - CodingScripting - - Fonts - - Golgelendirme - - Hat - - Landing - - Links - - Listeler - - Mektup - - Metin - - Modul - - Module - - Text - - Web Yazı Tipleri - - Yazı Tipi - - font - - letter - - line - - lists - - shadow - - web fonts -translation_of: Learn/CSS/Styling_text -original_slug: Öğren/CSS/Styling_text ---- -
{{LearnSidebar}}
- -

CSS dilinin temelleri ele alındığında, odaklanmamız gereken bir sonraki konu, CSS ile yapacağımız en yaygın uygulamalardan biri olan metnin stilini oluşturmaktır. Bu ünitede yazı tipini, kalınlığı, italikliği, satır ve harf aralığını, alt gölgeler ve diğer metin özellikerini ayarlamak da dahil olmak üzere metin stilinin temellerine bakacağız. Sayfamıza özel yazı tiplerini uygulamak, listeleri ve bağlantıları şekillerdirmeye bakarak üniteyi tamamlayacağız.

- -
-

Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?

- -

Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.

- -

Başla

-
- -

Ön Koşullar

- -

Bu üniteye başlamadan önce, HTML'e giriş ünitesinde ele aldığımız temel HTML bilgisine ve CSS'e giriş ünitesinde ele aldığımız CSS'in temel ilkelerini biliyor olmanız gerekmektedir.

- -
-

Not: Eğer çalışırken kullandığınız cihazınızda (bilgisayar, tablet veya diğer cihazlar) kendi örneklerinizi yazıp çalışabileceğiniz bir ortamınız bulunmuyorsa, JSBin, CodePen veya Glitch ortamlarını çevrimiçi kullanabilirsiniz.

-
- -

Rehber

- -

Bu modül, HTML metin içeriğini şekillendirmenin altındaki tüm temelleri öğretecek dersleri içerir.

- -
-
Temel metin ve yazı tipi stili
-
Bu derste yazı tipinin; kalınlığını, ailesini ve stilini, kısa tanımını, hizalanmasını, satır ve harf aralığını ve diğer efektleri ayarlama da dahil olmak üzere metnin/fontun stilini belirlemede kullanacağımız tüm yöntemleri ele alacağız.
-
Listeleri biçimlendirme
-
Listelerin diğer metinler gibi davranmanın yanında kendilerine özgü bilmeniz gereken bazı davranışları ve dikkat etmeniz bazı uygulamaları vardır. Bu ders de her şeyi açıklayacağım.
-
Bağlantıları biçimlendirme
-
Bağlantıları şekillendirirken, bağlantı durumlarını etkili bir şekilde biçimlendirmek için sözde sınıflardan nasıl yararlanılacağını, gezinme menüleri ve sekmeler gibi yaygın arayüz özelliklerinde kullanılan bağlantıların nasıl şekillendirileceğini anlamak önemlidir. Bu yazıda tüm bu konuların üzerinden geçeceğiz.
-
Web yazı tipleri
-
Bu derste web yazı tiplerini ayrıntılı olarak inceleyeceğiz  — bunlar, sistemlerde bulunurluluğu az olan fontları veya özel metin stillerini web sayfanızda kullanmanıza olanak sağlayan yaklaşımları ele alacağız.
-
- -

Değerlendirmeler

- -

Aşağıdaki değerlendirme, yukarıdaki rehberlerde anlatılan metin şekillendirme tekniklerini ne düzeyde anladığınızı test edecektir.

- -
-
Bir okulun ana sayfasındaki metinleri şekillendirmek
-
Bu değerlendirme, bir okulun ana sayfasındaki metinlerin stilini belirleme kabileyitini ve metnin şekillendirme konusundaki yaklaşımını test edecektir.
-
- -
-
- -
-
- -
-
-
diff --git a/files/tr/learn/css/styling_text/styling_links/index.html b/files/tr/learn/css/styling_text/styling_links/index.html deleted file mode 100644 index d707f4f5bb..0000000000 --- a/files/tr/learn/css/styling_text/styling_links/index.html +++ /dev/null @@ -1,454 +0,0 @@ ---- -title: Bağlantıları şekillendirmek -slug: Learn/CSS/Styling_text/Styling_links -tags: - - Article - - Beginner - - CSS - - Focus - - Guide - - Learn - - Links - - Pseudo-class - - hover - - hyperlinks - - menus - - tabs -translation_of: Learn/CSS/Styling_text/Styling_links -original_slug: Öğren/CSS/Styling_text/Styling_links ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Bağlantıları etkili bir şekilde şekillendirmek için sözde sınıfların nasıl kullanılacağını anlamak önemlidir. Navigasyon menülerinin ve sekmelerdeki bu tarz bağlantıların ortak görünümlerinin ayarlanması bu yazımızda tüm hatlarıyla ele alacağız.

- - - - - - - - - - - - -
Ön koşullar:Giriş seviyesi bilgisayar kullanma, HTML temelleri(HTML'ye Giriş bölümünü inceleyin), CSS temelleri (CSS'e Giriş), CSS temel metin ve yazı tipi biçimi.
Amaç:Bağlantı durumlarının nasıl biçimlendirileceğini ve bağlantıların gezinme menüleri gibi yaygın kullanıcı arabirimi özelliklerinde nasıl etkili bir şekilde kullanılacağını öğrenmek.
- -

Bağlantılara bir göz atalım

- -

HTML'mizde bağlantı oluşturma konusundaki en iyi uygulamaları ve yaklaşımları inceledik. Bu derste, bu bilgileri temel alarak bağlantıların stilini belirlemek için en iyi uygulamaları ve yaklaşımları göstereceğiz.

- -

Bağlantı durumları

- -

Anlaşılması gereken ilk konu, bağlantı durumları kavramıdır — bağlantıların farklı durumlarının, farklı sözde sınıflar ile kontrol edilebilmesidir:

- -
    -
  • Bağlantı: {{cssxref(":link")}} sözde sınıfı ile hedeflenilebilen ve bir hedefi olan bir bağlantıdır (sadece adlandırılmış boş bir bağlantı olmayan).
    • -
  • Ziyaret edilmiş: {{cssxref(":visited")}} sözde sınıfı kullanılarak hedeflenilebilen, tarayıcıda daha önceden ziyaret edilmiş bağlantılardır.
    • -
  • Üzerinde: {{cssxref(":hover")}} sözde sınıfıyla hedeflenebilen, farenin imlecinin üzerinde durduğu bağlantıdır.
    • -
  • Odak: {{cssxref(":focus")}}  sözde sınıfıyla hedeflenebilen, odaklanılmış bağlantılardır (örn, klavye kullanıcısı tarafından Tab tuşu veya benzeri tuşlarla odaklanılmış bağlantıdır.
    • -
  • Aktif:  {{cssxref(":active")}} sözde sınıfıyla hedeflenebilen, etkinleştirilmiş (örn üzerine tıklanılmış) bir bağlantıdır.
    • -
- -

Varsayılan stiller

- -

Aşağıdaki örnek, bir bağlantının varsayılan olarak nasıl davranacağını göstermektedir(CSS, daha fazla öne çıkması için metni büyükmekte ve ortalamaktadır.)

- -
<p><a href="#">Basit bir bağlantı</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Varsayılan_stiller', '100%', 120) }}

- -
-

Not: Bu sayfadaki örneklerdeki tüm bağlantılar sahte bağlantılardır.  Gerçek URL'nin yerine # işareti kullanılmıştır. Bunun nedeni, gerçek bağlantılar dahil edilmiş olsaydı, bunlara tıklamanız örnekleri bozacaktı.

-
- -

Varsayılan stilleri keşfederken birkaç şeyi fark edeceksiniz:

- -
    -
  • Bağlantıların altı çizilmiştir.
    • -
  • Ziyaret edilmeyen bağlantılar mavidir.
    • -
  • Ziyaret edilen bağlantılar mordur.
    • -
  • Bir bağlantının üzerine gelindiğinde fare imlecinin simgesi küçük bir el simgesine dönüşür.
    • -
  • Odaklanmış bağlantıların etrafında bir ana hat vardır.
    • -
  • Aktif bağlantılar kırmızıdır(Tıklama esnasında farenin düşmesini basılı tutmayı deneyin).
    • -
- -

İlginçtir ki, bu varsayılan stiller, 1990'ların ortalarında tarayıcıların ilk günlerindeki ile neredeyse aynıdır. Bunun nedeni, kullanıcıların bu davranışı bilmesi ve beklemesidir — bağlantılar farklı şekilde tasarlanırsa birçok insanın kafası karışabilir. Tabiki bu, bağlantılara hiçbir şekilde stil vermemeniz gerektiği anlamına gelmez, sadece beklenen davranıştan çok uzaklaşmamalısınız. En azından şunları yapmalısınız:

- -
    -
  • Bağlantılar için alt çizgi kullanın, ancak başka şeyler için kullanmayın. Bağlantıların altını çizmek istemiyorsanız, en azından onları başka bir şekilde vurgulayın. Ne oldukları belli olsun kimse onların ne işe yaradığını bulmak için zaman harcamasın.
    • -
  • Üzerine gelindiklerinde/odaklanıldıklarında bir şekilde etkinleştirildiklerinde biraz farklı bir şekile girmelerini sağlayın. Sayfanıza hem hareket katmış olursunuz.
    • -
- -

Varsayılan stiller, aşağıdaki CSS özellikleri kullanılarak kapatılabilir/değiştirilebilir:

- -
    -
  • {{cssxref("color")}} metin rengi için.
    • -
  • {{cssxref("cursor")}} fare işaretçisi stili — çok iyi bir nedeniniz yoksa bunu kapatmamalısınız.
    • -
  • {{cssxref("outline")}} Ana hat, kullanışlı bir erişilebilirlik yardımcısıdır, bu yüzden kapatmadan önce dikkatlice düşünün.
    • -
- -
-

Not: Bağlantılarınızı biçmlendirmek için sadece yukarıdaki özelliklerle sınırlı değilsiniz — istediğiniz herhangi bir özelliği kullanmakta özgürsünüz. Sadece çok abartmamaya çalışın!

-
- -

Bağlantıların stilini belirleme

- -

Şimdi varsayılan durumlara biraz ayrıntılı olarak baktık, tipik bir bağlantı stilleri kümesine bakalım.

- -

Başlangıç olarak boş kural kümelerimizi yazacağız:

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

Bu sıra önemlidir, çünkü bağlantı stilleri birbiri üzerine inşa edilir, örneğin ilk kuraldaki stiller sonraki tüm stillere uygulanır ve bir bağlantı etkinleştirildiğinde, genellikle üzerine de gelir. bunları yanlış sıraya koyarsanız ve her kural setinde aynı özellikleri değiştirirseniz, işler beklendiğiniz gibi çalışmayacaktır. "LaV Fena HAlde sıcak" kelimesini anımsatıcı olarak kullanabilirsiniz.

- -

Şimdi bunu doğru bir şekilde şekillendirmek için biraz daha bilgi ekleyelim:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

Ayrıca, yazdığımız CSS'i uygulamak için örnek HTML kodunu aşağıda sağlayacağım:

- -
<p><a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, ve
-<a href="#">Microsoft Edge</a> gibi çeşitli tarayıcılar mevcuttur.</p>
- -

İkisini bir araya getirmek bize şu sonucu verir:

- -

{{ EmbedLiveSample('Bağlantıların_stilini_belirleme', '100%', 150) }}

- -

Peki burada ne yaptık? Bu kesinlikle varsayılan stilden farklı görünüyor, ancak yine de kullanıcıların neler olup bittiğini bilmesi için yeterince tanıdık bir deneyim sağlıyor:

- -
    -
  • İlk iki kural burada tartışmak için önemli değil.
    • -
  • Üçüncü kural a, metnin altındaki varsayılan çizgiden ve odak çerçevesinden kurtulmak için seçiciyi kullanır(Her halükarda tarayıcılara göre değişir) ve her bağlantıya küçük bir miktar dolgu ekler — bunların tümü daha sonra netleşecektir.
    • -
  • Daha sonra, ziyaret edilmeyen ve ziyaret edilen bağlantılarda birkaç renk varyasyonu ayarlamak için a:link ve a:visited sözde sınıf seçicilerini kullanarak her ikisi durum için de farklı ayarlamalar yapabiliriz.
    • -
  • Sonraki iki kural ile a:focus ve a:hover sözde sınıfları ile odaklanma ve üzerinde bulunma durumları için farklı alt çizgi ve arka plan renkleri ayarlıyoruz. Burada dikkat edilmesi gereken iki nokta vardır: -
      -
    • Alt çizgi {{cssxref("border-bottom")}} kullanılarak oluşturuldu, {{cssxref("text-decoration")}} ile değil — bazı insanlar bunu tercih ediyor çünkü birincisi ikincisinden daha iyi stil seçeneklerine sahip ve biraz daha aşağıdan çiziliyor ve bu yüzden altı çizilen kelimenin altlarını kesmiyor.
      • -
    • {{cssxref("border-bottom")}}  niteliğine 1px solid değeri renk değeri girilmeden tanımlanmıştır. Bu sayede kenarlığın öğenin metniyle aynı rengi almasını sağladık. Bu metnin farklı renkleri alacağı durumlarda oldukça faydalıdır.
      • -
    -
    • -
  • Son olarak a:active sözde sınıfı ile etkinleştirilen bağlantılara ters renk şeması vererek bir şeylerin gerçekleşmek üzere olduğunu netleştirmek için kullanışlıdır!
    • -
- -

Aktif öğrenme: Kendi bağlantılarınızın stilini belirleyin

- -

Bu aktif öğrenme oturumunda bağlantıların gerçekten harika görünmesini sağlamak için boş kuralar setimizi almanızı ve kendi beyanlarınızı eklemenizi istiyoruz. Hayal gücünüzü kullanın, ufkunuzu aşın. Yukarıdaki örneğimiz kadar havalı ve en az işlevsel olan bir şey bulabilceğinizden eminiz.

- -

Bir hata yaparsanız, her zaman Sıfırla düşmesini kullanarak sıfırlayabilirsiniz. Zorlandığınızda yukarıda gösterdiğimiz örneği eklemek için Çözümü göster düşmesini kullanın.

- - - -

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

- -

Bağlantılara simgeler eklemek

- -

Yaygın bir uygulama, bağlantının ne tür içeriğe işaret ettiğine dair daha fazla gösterge sağlamak için bağlantılara simgeler eklemektir. Buna örnek; bizim kullandığımız, bir kutunun içerisinden çıkan bir ok gibi görünen bağlantı simgesidir — Örnek olabilecek simgeler için icons8.com.

- -

Bize istediğimiz etkiyi verecek bazı HTML ve CSS'ese bakalım. İlk olarak, stil vermek için bazı basit HTML'ler:

- -
<p>Hava Durumu hakkında daha fazla bilgi için <a href="#">hava durumu sayfamızı</a> ziyaret edin,
-ayrıca <a href="http://#">Wikipedia'da hava durumu</a>, veya <a href="http://#">Extreme Science</a>'daki hava durumuna bakın.</p>
- -

Ardından CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample('Bağlantılara_simgeler_eklemek', '100%', 150) }}

- -

Peki burada neler oluyor? Daha önce baktığınız bilgilerin aynısı olduğu için CSS'nin çoğunu atlayacağız. Bununla birlikte, son kural ilginçtir — burada, son makaledeki liste öğelerinde özel madde işaretlerini işlediğimize benzer bir şekilde harici bbağlantılara özel bir arka plan görüntüsü ekliyoruz. ancak bu sefer uzun tanımların yerine {{cssxref("background")}} kısa tanımını kullanıyoruz. Eklemek istediğimiz görüntünün yolunu belirliyoruz, no-repeat ile sadece bir kopyasının olmasını istediğimizi belirtip, konumunu %100 ile metinin sağ tarafında ve üstten 0 piksel olmasını sağlıyoruz.

- -

{{cssxref("background-size")}} niteliğini bağlantının yanında gösterilmesini istediğimiz simgenin boyutunu belirtmek için kullanırız. Daha büyük bir simgeyi kullanarak duyarlı web tasarımları oluşturabilmek için faydalı olacaktır. Ancak bu yalnızca IE9 ve sonraki sürümlerde çalışır, bu nedenle bu eski tarayıcıları desteklemeniz gerekiyorsa, yalnızca görüntüyü yeniden boyutlandırmanız ve olduğu gibi eklemeniz gerekir. Modern tarayıcıların işlevselliğini düşürmek iyi midir?

- -

Son olarak, {{cssxref("padding-right")}} niteliği ile arka plan resmnin görünmesi için bağlantıların sağına boşluk bıraktık böylece simgemiz sonrasında gelen metinlerle örtüşmedi.

- -

Son bir söz, sadece harici(başka sitelere olan) bağlantıları nasıl seçtik? HTML  bağlantıları yazarken sadece dış bağlantılar için mutlak URL'eleri kullanmalısınız — kendi siteniz içerisinde göreceli bağlantıları tercih etmeniz faydalı olacaktır. Bu sayede "http" metni yalnızca harici/dış bağlantılarda(ikinci ve üçüncüde olduğu gibi) tanımlanmalıdır ve bu şekilde nitelik şeciciyle(a[href*="http"]) {{htmlattrxref("href","a")}}  öğemizdeki "http" ile başlayan bağlantıları seçebiliriz.

- -

İşte bu kadar — yukarıdaki aktif öğrenme bölümünü tekrar gözden geçirmeyi ve bu yeni tekniği denemeyi deneyin!

- -
-

Not: href değerleri garip görünebilir — bu örneklerde hiçbir yere gitmeyen sahte bağlantılar kullandık. Bunun nedeni, gerçek bağlantılar kullanırsak <iframe> içeriğindeki canlı örnekte farklı bir siteye gideceğiniz ve örneği kaybetmiş olacağınızdandır.

-
- -
-

Not: Henüz arka planlar ve duyarlı web tasarımına aşina değilseniz endişelenmeyin; bu konular farklı yerlerde açıklanmıştır.

-
- -

Bağlantıları buton olarak biçimlendirmek

- -

Bu derste şu ana kadar keşfettiğiniz araçlar başka şekillerde de kullanılabilir. Örneğin, fareyle üzerine gelme gibi durumlar yalnızca bağlantıları değil, birçok farklı öğeyi biçimlendirmek için de kullanılabilir — parafrafların, liste öğelerinin veya diğer şeylerin fareyle üzerine gelme durumunu vurgulamak isteyebilirsiniz.

- -

Ek olarak, bağlantılar genellikle belirli durumlarda düğmeler gibi görünecek ve davranacak şekilde biçimlendirilmiştir — bir web sitesi gezinme menüsü genellikle bağlantıları içeren bir liste olarak işaretlenir ve bu bir dizi kontrol düşmesi veya sekme gibi görünecek şekilde kolayca biçimlendirilebilir. Nasıl olduğunu keşfedelim.

- -

İlk olarak, biraz HTML:

- -
<ul>
-  <li><a href="#">Ana Sayfa</a></li><li><a href="#">Pizza</a></li><li><a href="#">Müzik</a></li><li><a href="#">Wombatlar</a></li><li><a href="#">Türkiye</a></li>
-</ul>
- -

ve birazda CSS:

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

Bu bize şu sonucu verir:

- -

{{ EmbedLiveSample('Bağlantıları_buton_olarak_biçimlendirmek', '100%', 100) }}

- -

En ilginç kısımlara odaklanarak burada neler olduğunu açıklayalım:

- -
    -
  • İkinci kural; {{htmlelement("ul")}}  öğemizin varsayılan {{cssxref("padding")}} değerini sıfırlar ve genişliğini ebeveyni olan {{htmlelement("body")}} tamamını kullanmasını söyler.
    • -
  • {{htmlelement("li")}} öğeleri normal davranışlarında blok öğeler olarak davranırlar(göz atmak için CSS kutu tipleri'ne bakın), yani kendi satırlarına sahip olacak şekilde davranırlar. Fakat biz burada {{cssxref("display")}} niteliği ile {{htmlelement("li")}} öğelerimizin satır içi öğeler olacak şekilde tanımlıyoruz ve bu şekilde {{htmlelement("li")}} öğelerimiz aynı satır içerisinde yan yana durabiliyorlar.
    • -
  • Dördüncü kuralımız, {htmlelement("a")}} öğemizi biçimlendiren en karmaşık kuralımızdır. Hadi adım adım inceleyelim -
      -
    • Önceki örneğimizdeki gibi varsayılan {{cssxref("text-decoration")}} ve {{cssxref("outline")}} niteliklerimizi kapatıyoruz ki görünüşü bozmasınlar
      • -
    • Daha sonra {{cssxref("display")}} niteliğimize inline-block değerini atayarak {{htmlelement("a")}} öğemizin satır içi öğe gibi davranıp diğer kardeşleriyle aynı satırda bulunmalarını ve aynı zamanda bir blok öğe gibi davranıp boyutlandırılabilmesini sağlıyoruz.
      • -
    • Şimdi boyutlandıralım! {{htmlelement("ul")}} öğemizin tüm içeriğini doldurmak istiyoruz. Bu yüzden her düğme arasında küçük bir kanar boşluğu bırakıyoruz(ancak sağ kenarda bir boşluk bırakmayacağız) ve hepsinin aynı boyutta olmasını istediğimiz 5 adet butonumuz olduğu için her birinin genişliğini %19,5 ve sağdan kenar boşluğu olarakda %0,625 olarak tanımlıyoruz. Tüm bu genişliklerin toplamının %100,625 olduğunu farkadeceksiniz ve buda son düğmenin taşmasına neden olacaktır fakat bir sonraki kuralda son <a> öğemizin sağdaki boşluğunu sıfırladığımız için butonlarımız <ul> öğemizin içerisine tam olarak oturacaktır.
      • -
    • Son üç beyan oldukça basittir ve sadece görsel amaçlıdır. Metinleri bağlantı butonları içerisinde yatay olarak ortaladık ve {{cssxref("line-height")}} niteliğine 3 değerini tanımlayarak metinlerimizi buton içerisinde dikey olarakta hizaladık ve metin rengini siyah olarak tanımladık.
      • -
    -
    • -
- -
-

Not: HTML'deki liste öğelerinin hepsinin birbiriyle aynı satıra yerleştirildiğini fark etmiş olabilirsiniz — bu yapılır çünkü satır içi blok öğeleri arasındaki boşluklar / satır kesmeleri, sözcükler arasındaki boşluklar gibi sayfada boşluklar oluşturur ve bu tür boşluklar yatay gezinme menüsü düzenimizi bozacaktır. Bu yüzden boşlukları kaldırdık. Bu sorun(ve çözümleri) hakkında daha fazla bilgiyi satır içi blok öğeleri arasındaki boşluklarla savaşma bölümünde bulabilirsiniz.

-
- -

Becerilerinizi tes edin!

- -

Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri testleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Dersin sonunda bu bilgileri sakladığınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. Bir topluluk okulunun ana sayfası tasarımı.

- -

Bu değerlendirme, bu dersin tartışılan tüm bilgilerini test eder, bu nedenle bir sonraki makaleye geçmeden önce okumak isteyebilirsiniz.

- -

Özet

- -

Umarız bu derste, bağlantılar hakkında bilmeniz gereken her şeyi size sağlamıştır — şimdilik! til metni dersimizdeki son makale, web sitelerinizde özel yazı tiplerini veya daha iyi bilindiği şekilde web yazı tiplerini nasıl kullanacağınızı ayrınılarıyla anlatıyor.{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

Bu ünitede

- - diff --git a/files/tr/learn/css/styling_text/styling_lists/index.html b/files/tr/learn/css/styling_text/styling_lists/index.html deleted file mode 100644 index 08e335a537..0000000000 --- a/files/tr/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,437 +0,0 @@ ---- -title: Listeleri Şekillendirmek -slug: Learn/CSS/Styling_text/Styling_lists -tags: - - Acemi - - Article - - Beginner - - CSS - - Ders - - Guide - - Listeler - - Metin - - Rehber - - Stil - - Styling - - Text - - biçimlendirme - - bullets - - lists - - Şekillendirme -translation_of: Learn/CSS/Styling_text/Styling_lists -original_slug: Öğren/CSS/Styling_text/Styling_lists ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
- -

Listeler çoğunlukla diğer metinler gibi davranır, ancak bilmeniz gereken bazı listelere özgü CSS özellikleri ve uygulama yaklaşımları vardır. Bu ders herşeyi açıklıyor.

- - - - - - - - - - - - -
Ö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ç:Listeleri şekillendirmeyle ilgili en iyi uygulamalara ve özelliklere aşîna olmak.
- -

Basit bir liste örneği

- -

Basit bir liste örneğiyle başlayalım. Bu ders boyunca sıralanmamış, sıralanmış ve açıklama listelerine bakacağız. Hepsinin birbirlerine benzeyen, bazılarında ise kendi liste türlerine özgü şekillendirme özellikleri vardır. Github üzerinde biçimlendirilmemiş bir örneğimiz mevcuttur(kaynak koduna bakabilirsiniz).

- -

Liste örneğimizin HTML'si şu şekildedir.

- -
<h2>Sırasız alışveriş listesi</h2>
-
-<p>Referans için paragraf, referans için paragraf, referans için paragraf,
-referans için paragraf, referans için paragraf, referans için paragraf.</p>
-
-<ul>
-  <li>Humus</li>
-  <li>Pide</li>
-  <li>Yeşil salata</li>
-  <li>Hellim peyniri</li>
-</ul>
-
-<h2>Sıralı tarif listesi</h2>
-
-<p>Referans için paragraf, referans için paragraf, referans için paragraf,
-referans için paragraf, referans için paragraf, referans için paragraf.</p>
-
-<ol>
-  <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin</li>
-  <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
-  <li>Salatayı yıkayıp doğrayın</li>
-  <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
-</ol>
-
-<h2>Madde açıklama listesi</h2>
-
-<p>Referans için paragraf, referans için paragraf, referans için paragraf,
-referans için paragraf, referans için paragraf, referans için paragraf.</p>
-
-<dl>
-  <dt>Humus</dt>
-  <dd>Genellikle tahin, limon suyu, tuz, sarımsak ve diğer malzemelerle harmanlanmış nohuttan yapılan koyu bir sos</dd>
-  <dt>Pide</dt>
-  <dd>Yumuşak, hafif mayalı bir gözleme</dd>
-  <dt>Hellim peyniri</dt>
-  <dd>Normalden daha yüksek erime noktasına sahip, genellikle keçi/koyun sütünden yapılan yarı sert, olgunlaşmamış, salamura peynir</dd>
-  <dt>Yeşil salata</dt>
-  <dd>Bir çoğumuzun kebapları süslemek için kullandığımız yeşil sağlıklı sebzeler</dd>
-</dl>
- -

Şimdi canlı örneğe giderseniz ve tarayıcı geliştirme araçlarını kullanarak liste öğelerini araştırırsanız, birkaç stil varsayılanını fark edeceksiniz:

- -
    -
  • {{htmlelement("ul")}} ve {{htmlelement("ol")}} öğeleri için üst ve alttan 16px(1em) {{cssxref("margin")}} için ve soldan 40px(2,5em) {{cssxref("padding-left")}}  için varsayılan bir değere sahip olduklarını;
    • -
  • Liste {{htmlelement("li")}} öğesinin varsayılan dolgu ve kenar boşluğu değerlerinin olmadığını;
    • -
  • {{htmlelement("dl")}} öğesinin alt ve üstten 16px {{cssxref("margin")}} değerine sahip olduğunu fakat herhangi bir dolgu değerinin bulunmadığını;
    • -
  • Liste {{htmlelement("dt")}} öğesinin varsayılan dolgu ve kenar boşluğu değerinin olmadığını;
    • -
  • liste {{htmlelement("dd")}} öğesinin {{cssxref("margin-left")}} niteliğinin 40px (2.5em.) değerine sahip olduğunu görürsünüz.
    • -
  • {{htmlelement("p")}} öğesini size referans olması için dahil ettik. Bu öğemiz de, farklı liste türleriyle aynı üst ve alt {{cssxref("margin")}}(16px (1em)) değerine sahiptir.
    • -
- -

Liste aralıklarını kontrol etme

- -

Listelerin şeklini belirlerken, stillerini çevreleyen öğelerle(paragraf ve görüntü gibi; dikey ritmi olarakta adlandırılır) aynı dikey aralığına ve birbirleriyle aynı yatay aralığa sahip olacak şekilde ayarlamamız gerekebilir(you can see the finished styled example on Github, and find the source code too.).

- -

When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other ( bitmiş örneğimizi Github'da bulabilir ve kaynak kodlarınıda görebilirsiniz).

- -

Metin stili ve aralığı için kullanılan CSS aşağıdaki gibidir:

- -
/* Genel Stil */
-
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
-
-li, p {
-  line-height: 1.5;
-}
-
-/* Description list styles */
-
-
-dd, dt {
-  line-height: 1.5;
-}
-
-dt {
-  font-weight: bold;
-}
-
- -
    -
  • İlk kural, site genelinde bir yazı tipi ve 10 piksellik yazı tipi boyutu belirler. Bunlar sayfadaki her öğe tarafından miras alınır.
    • -
  • 2. ve 3. kurallar da, başlıklar farklı liste türleri(liste öğelerinin alt öğeleri bunları devralır) ve paragraflar için göreli yazı tipi boyutlarını belirler. Bu, her paragrafın ve listenin aynı yazı tipi boyutuna ve üst/alt aralığa sahip olacağı anlamına gelir ve bu da dikey ritmi tutarlı tutmaya yardımcı olur.
    • -
  • 4. kural da, {{cssxref("line-height")}} niteliği ile dikey ritmin tutarlı tutmaya yardımcı olur. Paragraflarda ve liste öğelerinde aynı işlemi yapar ve böylece paragraflar ve her bir liste öğesi satırlar arasında aynı aralığa sahip olur.
    • -
  • 5. ve 6. kurallar da, açıklama listesine uygulanır. {{cssxref("line-height")}} niteliği ile paragraf ve liste öğelerinde yaptığımız gibi, açıklama listesi terimleri ve açıklamalarında da aynısını belirleriz. Yani tutarlılık iyidir! Ayrıca açıklama terimlerinin kalın yazı tipine sahip olmasını sağlayarak görsel olarak daha kolay öne çıkmasına yardımcı olduk.
    • -
- -

Listeye özgü şekiller

- -

Şimdiye kadar listeler için genel boşluk tekniklerine baktık, bundan sonra da listeye özgü bazı özellikleri inceleyelim.

- -

İlk başta bilmeniz gereken, {{htmlelement("ul")}} ve {{htmlelement("ol")}} öğelerinde ayarlanabilen üç nitelik vardır.

- -
    -
  • {{cssxref("list-style-type")}}: Liste için kullanılacak madde işaretlerinin türünü belirler; örn. sırasız bir liste için kare veya daire madde işaretlerini; sıralı bir liste için sayılar, harfler veya roma rakamları.
    • -
  • {{cssxref("list-style-position")}}: Madde işaretlerinin öğenin başlangıcından önce liste içeriğinin içinde mi yoksa liste içeriğinin dışında mı(sol dışında) görüneceğini belirler.
    • -
  • {{cssxref("list-style-image")}}: Madde işareti için basit bir kare veya daire yerine özel bir görüntü kullanmamızı sağlar
    • -
- -

Madde işareti şekilleri

- -

Yukarıda belirtildiği gibi, {{cssxref("list-style-type")}} niteliğiyle madde işaretleri için ne tür bir işaret kullanacağını ayarlamamıza izin verir. Örneğimizde, sıralı listeyi büyük harfli roma rakamları kullanacak şekilde ayarlamak için:

- -
ol {
-  list-style-type: upper-roman;
-}
- -

Kuralını oluşturduğumuzda bize aşağıdaki gibi bir sonuç verir.:

- -

Madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı liste.

- -

{{cssxref("list-style-type")}} referans sayfasına bakarak daha fazla seçenek buluabilirsiniz.

- -

Madde işareti konumu

- -

{{cssxref("list-style-position")}}, Madde işaretlerinin öğenin başlangıcından önce liste içeriğinin içinde yada liste içeriğinin dışında(sol dışında) görünür. Varsayılan değeri olan outside ile yukarıda görüldüğü gibi madde işaretlerinin liste öğelerinin dışında kalmasına neden olur.

- -

Değeri inside olarak ayarlarsak, madde işaretleri öğe içerik alanı içerisine oturur.

- -
ol {
-  list-style-type: upper-roman;
-  list-style-position: inside;
-}
- -

madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı bir liste.

- -

Özel bir madde işareti görüntüsü kullanma

- -

{{cssxref("list-style-image")}} niteliği madde işaretlerinde özel bir resim kullanılmasını sağlar. Sözdizimi oldukça basittir:

- -
ul {
-  list-style-image: url(star.svg);
-}
- -

Ancak bu nitelik, madde işareti konumunu, boyutunu vb. gibi özellikleri kontrol etme açısından biraz sınırlıdır. Arka planlar ve sınırlar dersinde {{cssxref("background")}} nitelik ailesinde öğrendiklerinizi kullanmanız daha iyi olacaktır. Şimdilik tanıyoruz!

- -

Bitmiş örneğimizde, sıralanmamış listeyi bu şekilde biçimlendirdik(yukarıda daha anlattıklarımızın üstüne):

- -
ul {
-  padding-left: 2rem;
-  list-style-type: none;
-}
-
-ul li {
-  padding-left: 2rem;
-  background-image: url(star.svg);
-  background-position: 0 0;
-  background-size: 1.6rem 1.6rem;
-  background-repeat: no-repeat;
-}
- -

Burada aşağıdakileri yaptık:

- -
    -
  • {{cssxref("padding-left")}} niteliğimizle, {{htmlelement("ul")}} öğemizin 40px olan varsayılan kenar boşluğunu 20px olarak ayarladık, sonra liste öğelerininde aynı kenar boşluğuna sahip olması için bir kural tanımladık. Böylece, sipariş liste öğeleriyle açıklama listesi öğelerinin aynı hizada olmasını sağladık. Eğer liste öğlerine(li) kenar boşluğu vermeseydik, liste öğelerinin arka planı içerisinde görüntülediğimiz resmimizle üst üste gelmesine neden olurdu.
    • -
  • {{cssxref("list-style-type")}} niteliğimize none değerini atayarak, liste madde işaretlerinde herhangi bir şeyin görüntülenmesini engelemiş olduk. Böylece {{cssxref("background")}} niteliğimizle yerleştireceğimiz madde işaretine temiz bir zemin hazırlamış olduk.
    • -
  • Sıralanmamış listenin herbir liste öğesine, resmi madde işareti olarak ekledik. İlgili nitelikler aşağıdaki gibidir: -
      -
    • {{cssxref("background-image")}}: Bu, madde işareti olarak kullanmak istediğimiz resmin dosyasının yolunu belirtiriz.
      • -
    • {{cssxref("background-position")}}: Bu, seçilen öğenin arka planında görüntünün nerede görüneceğini tanımlar — 0 0; durumunda, her madde işareti tanımlandığı öğenin sol üst köşesinde görüneceği anlamına gelir.
      • -
    • {{cssxref("background-position")}}: Bu, arka plan resminin boyutunu ayarlar. İdeal olarak madde işaretlerinin liste öğeleriyle aynı boyutta(veya çok az küçük/büyük) olmasını istiyoruz. Madde işaretinin içeriğe oturmasınına izin verdiğimiz dolguya çok iyi uyan bir boyut olan 1.6rem(16px) değeri kullanıyoruz. Madde işareti ile liste öğesinin arasında ki (20px-16px) 4px boşluk çok iyi duruyor.
      • -
    • {{cssxref("background-repeat")}}: Varsayılan olarak, arka plan resimleri kullanılabilir arka plan alanını doldurana kadar yenilenir. Her durumda görüntünün yalnızca bir kopysının eklenmesini istiyoruz, bu nedenle niteliğimize no-repeat değerini tanımlıyoruz.
      • -
    -
    • -
- -

Bu bize şu sonucu verir:

- -

an unordered list with the bullet points set as little star images

- -

Liste şekillendirebilen kısa tanım

- -

Yukarıda belirtilen üç niteliğin tümü, tek bir kısa tanım niteliği kullanılarak tanımlanabilir ({{cssxref("list-style")}}). Örn., aşağıdaki CSS:

- -
ul {
-  list-style-type: square;
-  list-style-image: url(example.png);
-  list-style-position: inside;
-}
- -

Bununla değiştirilebilir:

- -
ul {
-  list-style: square url(example.png) inside;
-}
- -

Değerler herhangi bir sırayla girilebilir, biri, ikisi veya üçünü birden tanımlayabilirsiniz (tanımlanmayan değerler için varsayılan değerler kullanılır disc, none ve outside vbg.) Birinci ve ikincideki type ve image türü bildirimin nedeni: Eğer herhangi bir nedenden dolayı resim yüklenemezse de görüntüleyebileceği bir madde işaretini tanımlamaktır.

- -

Liste sayımını kontrol etme

- -

Bazen sıralı bir listede sıralamanın farklı şekillerde numaralandırılmasını isteyebiliriz — örn. 1'den farkllı bir sayıdan başlayarak veya geriye doğru sayarak veya 1'den fazla adımlarla sayarak. HTML ve CSS'in burada bizlere yardımcı olacak bazı araçları vardır.

- -

başlangıç

- -

{{htmlattrxref("start","ol")}} niteliği listenin 1'in haricinde bir sayıdan başlatmak istediğimizde kullanırız. Aşağıdaki örneğimizde listemiz saymaya 4'den başlar:

- -
<ol start="4">
-  <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li>
-  <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
-  <li>Salatayı yıkayıp doğrayın</li>
-  <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
-</ol>
- -

Bize bu çıktıyı verir:

- -

{{ EmbedLiveSample('başlangıç', '100%', 150) }}

- -

tersten numaralandırmak

- -

{{htmlattrxref("reversed","ol")}} niteliği liste numaralandırma sayılarını ileri doğru değilde, geriye doğru yazılmasını sağlar:

- -
<ol start="4" reversed>
-  <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li>
-  <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
-  <li>Salatayı yıkayıp doğrayın</li>
-  <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
-</ol>
- -

Gives you this output:

- -

{{ EmbedLiveSample('tersten_numaralandırmak', '100%', 150) }}

- -
-

Not: Geriye doğru ilerleyen bir listede belirtilen sayıdan daha fazla liste öğesi varsa, sayı sıfır ve ardından negatif sayılara doğru devam eder. 2, 1, 0, -1, -2, ...

-
- -

değer

- - - -

{{htmlattrxref("value","ol")}} niteliğiyle liste öğelerine belirli bir sayısal değeri tanımlamamıza izin verir:

- -
<ol>
-  <li value="2">Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li>
-  <li value="4">Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
-  <li value="6">Salatayı yıkayıp doğrayın</li>
-  <li value="8">Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
-</ol>
- -

Gives you this output:

- -

{{ EmbedLiveSample('degerleme', '100%', 100) }}

- -
-

Not: Sayı olmayan, farklı bir maddeleme işareti kullansanız bile, yine de value niteliğindeki değere eş değer bir değer getirilir.

-
- - - -

{{ EmbedLiveSample('izli1', '100%', 100) }}

- -

Aktif öğrenme: İç içe listeyi şekillendirme

- -

Bu aktif öğrenme oturumunda, yukarıda öğrendiklerinizi anlamanızı ve iç içe geçmiş bir liste şekillendirmenizi istiyoruz. Size HTML'yi sağladık ve şunları yapmanızı istiyoruz:

- -
    -
  1. Sırasız listeye kare madde işaretleri verin.
    2. -
  2. Sırasız liste öğelerine ve sıralı liste öğelerine yazı tipi boyutlarının 1,5'i kadar yüksekliğinde bir satır yüksekliği verin.
    3. -
  3. Sıralı listeye daha düşük alfabetik madde işaretleri verin.
    4. -
  4. Liste örenğiyle istediğiniz kadar oynayabilirsiniz, madde işareti türleri, boşluklar veya bulabileceğiniz başka özellikleri deneyebilirsiniz.
    5. -
- -

Bir hata yaparsanız, sıfırla butonunu kullanarak her zaman başlangıça dönebilirsiniz. Gerçekten takılırsanız, olası bir cevap görmek için Çözümü göster düşmesine basabilirsiniz.

- - - -

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

- -

Ayrıca bakınız

- -

CSS sayaçları, liste sayma ve şeklini özelleştirmek için gelişmiş araçlar sağlar, ancak oldukça karmaşıktır. Kendinizi geliştirmek istiyorsanız bunlara bakmanızı öneririz:

- -
    -
  • {{cssxref("@counter-style")}}
    • -
  • {{cssxref("counter-increment")}}
    • -
  • {{cssxref("counter-reset")}}
    • -
- -

Becerilerinizi test edin!

- -

Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. Bir topluluk okulunun ana sayfasını düzenleme.

- -

Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.

- -

Özet

- -

İlişkili birkaç temel ilkeyi ve belirli özelliği öğrendikten sonra, listelerin stil oluşturmaya alışması nispeten kolaydır. Sonraki makalede bağlantı stil tekniklerine geçeceğiz.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

- -

Bu ünitede

- - diff --git a/files/tr/learn/css/styling_text/typesetting_a_homepage/index.html b/files/tr/learn/css/styling_text/typesetting_a_homepage/index.html deleted file mode 100644 index 848a23a45f..0000000000 --- a/files/tr/learn/css/styling_text/typesetting_a_homepage/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Bir okulun ana sayfasını düzenlemek -slug: Learn/CSS/Styling_text/Typesetting_a_homepage -tags: - - Acemi - - Assessment - - Bağlantı - - Beginner - - CSS - - CodingScripting - - Değerlendirme - - Link - - Liste - - Metnin Stilini Belirleme - - Styling text - - Web Yazı Tiği - - Yazı Tipi - - font - - list - - web font -translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage -original_slug: Öğren/CSS/Styling_text/Typesetting_a_homepage ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Bu değerlendirmede, bir okulun ana sayfasının metnin şekillendirmenizi sağlayarak, bu ünite boyunca ele aldığımız tüm metin şekillendirme tekniklerini kavrayışınızı test edeceğiz. Yol boyunca biraz eğelebilirsiniz.

- - - - - - - - - - - - -
Ön koşul:Bu değerlendirmeyi denemeden önce, bu ünitedeki tüm derslerin üzerinde çalışmış olmanız gerekir
Amaç:CSS metin stil tekniklerinin anlaşılmasını test etmek.
- -

Başlangıç noktası

- -

Bu değerlendirmeyi başlatmak için şunları yapmalısınız:

- - - -

Alternatif olarak, değerlendirmenizi yapmak için JSBin ve Glitch gibi siteleri kullanabilirsiniz. HTML'yi yapıştırabilir ve CSS'i bu çevrimiiçi düzenleyicilerden birine doldurabilir ve arka plan resmini işaret etmek için bu URL'yi kullanabilirsiniz. Kullandığınız çevrimiçi düzenleyicinin ayrı bir CSS paneli yoksa, bunu <style> etiketi ile HTML sayfanıza yerleştirebilirsiniz.

- -
-

Not: Sıkıştığınızda bizden yardım isteyebilirsiniz — bu sayfanın altındaki {{anch("Değerlendirme ve daha fazlası")}} bölümüne bakabilirsiniz.

-
- -

Proje tanıtımı

- -

Hayli bir okulun ana sayfası için bir miktar ham HTML, ayrıca sayfayı üç sütunlu bir düzende biçimlendiren ve başka bazı temel stil sağlayan bazı CSS'ler sağlandı. Yaptığınız bitleri işaretlemenin kolay olduğundan emin olmak için CSS eklemelerinizi CSS dosyasının altındaki yourmun altına yazmalısınız. Bazı seçiciler tekrarlıysa endişelenmeyin.

- -

Yazı tipleri:

- -
    -
  • Öncelikle, kullanımı ücretsiz birkaç yazı tipi indirin. Bu bir okul olduğundan, yazı tipleri sayfada oldukça ciddi, resmi, güveniir bir his verecek şekilde seçilmelidir — genel metin gövdesi için serif site çapında bir yazı tipi, başlıklar için ise sans-serif veya slab-serif birlikte güzel olabilir.
    • -
  • @font-face ile bu iki yazı tipi için uygun bir hizmet kullanın.
    • -
  • Gövde yazı tipinizi tüm sayfaya ve başlıklar için seçtiğiniz yazı tipinide başlıklara uygulayın.
    • -
- -

Genel metin stili:

- -
    -
  • Sayfaya site genelinde font-size: 10px olarak tanımlayın.
    • -
  • Başlıklarınıza ve diğer öğe türlerinize, uygun bir göreli birim kullanarak tanımlanmış uygun yazı tipi boyutları verin.
    • -
  • Gövde metninize line-height niteliği ile uygun bir metin yüksekliği verin.
    • -
  • Üst düzey başlığınızı sayfada ortalayın.
    • -
  • Başlıklarınızı letter-spacing niteliği ile fazla ezilmemeleri için harflerin arasına biraz boşluk verin.
    • -
  • Gövde metninize  letter-spacing ve word-spacing nitelikleri ile biraz boşluk verin.
    • -
  • Her başlıktan sonra ilk paragrafa <section> ile biraz metin girintisi verin, örn. 20px.
    • -
- -

Başlantılar:

- -
    -
  • Bağlantıları ziyaret, odak ve fareyle üzerine gelme durumlarına göre sayfanın üst ve alt kısmındaki yatay çubukların rengiyle uyumlu bazı renkler verin.
    • -
  • Varsayılan olarak bağlantıların altı çizili olacak şekilde yapın, ancak üzerine geldiğinizde veya odaklandığınızda alt çizgiler kaybolmalı.
    • -
  • Varsayılan odak çerçevesini sayfadaki TÜM bağlantılardan kaldırın.
    • -
  • Etkin duruma gözle görülür şekilde farklı bir stil verin, böylece güzelce öne çıksın, ancak yine de genel sayfa tasarımına uymasını sağlayın.
    • -
  • Dış bağlantıların yanlarına harici bağlantı simgesinin eklenmesini sağlayın.
    • -
- -

Listeler:

- -
    -
  • Listelerinizin ve liste öğelerinizin aralığının genel sayfasının stiliyle uyumlu olduğundan emin olun. Her liste öğesi line-height niteliği değeriyle paragraf satırıyla aynı olmalıdır ve her liste öğesi paragraflar arsında yaptığınız gibi üstte ve altta aynı boşluğa sahip olmalıdır.
    • -
  • Liste öğelerinize sayfanın tasarımına uygun güzel bir madde işareti verin. Özel bir madde işareti götüntüsü mü yoksa başka bir şey mi seçeceğiniz size kalmış.
    • -
- -

Gezinti menüsü:

- -
    -
  • Sayfa için uygun bir görünüme sahip olacak şekilde gezinme menünüzün stilini belirleyin.
    • -
- -

İpuçları ve püf noktaları

- -
    -
  • Bu alıştırma için HTML'yi herhangi bir şekilde düzenlemenize gerek yoktur.
    • -
  • Gezinme menüsünün düğmelere benzemesi gerekmez, ancak sayfanın yan tarafında aptalca görünmemesi için biraz daha uzun olması gerekir; ayrıca bunu dikey bir gezinme menüsü yapmanız gerektiğini unutmayın.
    • -
- -

Örnek

- -

Aşağıdaki ekran görüntüsüi bitmiş tasarımın nasıl görünebileceğine dair bir örnek göstermektedir:

- -

- -

Değerlendirme ve daha fazlası

- -

Çalışmanızın değerlendirilmesini istiyorsanız veya takılıp kaldıysanız yardım isteyebilirsiniz.

- -
    -
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyeiciye koyun.
    2. -
  2. MDN söyleşi/öğrenme forumu kategorisinde değerlendirme ve/veya yardım isteyen bir yazı gönderin. Gönderi şunları içermelidir: -
      -
    • "Okulun ana sayfasını düzenlemek için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • -
    • halihazırda denedikleriniz ve biden ne yapmamızı istediğinizle ilgili ayrıntılar, örneğin, takılıp kaldıysanız ve yardıma ihtiyacınız varsa veya bir değerlendirme istiyosanız.
      • -
    • Değerlendirilmesini istediniz veya yarımda ihtiyaç duyduğunuz önreğin bir çevrimiçi paylaşılabillir düzenleyicide bulunan bağlantısı (yukarıdaki 1.adımda belitildiği gibi). Bu, içine girmek için iyi bir uygulamadır — kodunu göremiyorsanız, kodlama sorunu olan birine yardım etmek çok zordur.
      • -
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • -
    -
    3. -
- -

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

In this module

- - diff --git a/files/tr/learn/css/styling_text/web_fonts/index.html b/files/tr/learn/css/styling_text/web_fonts/index.html deleted file mode 100644 index 05b000659d..0000000000 --- a/files/tr/learn/css/styling_text/web_fonts/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: Web Yazı Tipleri -slug: Learn/CSS/Styling_text/Web_fonts -tags: - - '@font-face' - - Article - - Beginner - - CSS - - CSS Fonts - - Fonts - - Guide - - Learn - - Web Development - - Web Fonts Article - - Web fonts documentation - - font-family - - web fonts -translation_of: Learn/CSS/Styling_text/Web_fonts -original_slug: Öğren/CSS/Styling_text/Web_fonts ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
- -

Ünitenin ilk dersinde, yazı tiplerini ve metni şekillendirmek için kullanılan temel CSS özelliklerini keşfettik. Bu dersimizde daha da ileri gideceğiz, web yazı tiplerini ayrıntılı olarak inceleyceğiz — bunlar, daha çeşitli, özel metin stillerine izin vermek için web sayfanızla birlikte özel yazı tiplerinide kullanmanıza izin verir.

- - - - - - - - - - - - -
Ön koşullar:Giriş seviyesi bilgisayar kullanma, HTML temelleri(HTML'ye Giriş bölümünü inceleyin), CSS temelleri (CSS'e Giriş), CSS temel metin ve yazı tipi biçimi.
Amaç:Üçüncü taraf bir hizmeti kullanarak veya kendi kodunuzu yazarak bir web sayfasına web yazı tiplerini nasıl uygulayacağınızı öğrenmek
- -

Yazı tipi aileleri özeti

- -

Temel metin ve yazı tipi stilinde incelediğimiz gibi, HTML'nize uygulanan yazı tipleri {{cssxref("font-family")}} niteliği ile kontrol edilebilinir. Bu, bir veya daha fazla yazı tipi ailesi adını alır ve tarayıcı, çalıştığı sistemde mevcut olan bir yazı tipini bulana kadar bu listede ileriye doğru hareket eder:

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

Bu sistem iyi çalışıyor, ancak geleneksel olarak web geliştiricilerinin yazı tipi seçenekleri sınırlıdır. Tüm yaygın sistemlerde kullanılabilceğini garanti edebileceğiniz yalnızca bir avuç yazı tipi vardır — Web uyumlu yazı tipleri. Tercih edilen yazı tiplerini belirtmek için yazı tipi yığınını, ardından web için güvenli alternatifleri ve ardından varsayılan sistem yazı tipini belirtebilirsiniz, ancak bu tasarımlarınızın her yazı tipiyle iyi göründüğünden emin olmak için test açısından ek yük getirir.

- -

Web yazı tipleri

- -

IE sürüm 6'ya kadar çok iyi çalışan bir alternatifimiz var. Web yazı tipleri, web siteniz erişilirken indirilecek yazı tipi dosyalarını belirtmenize olanak tanıyan bir CSS özelliğidir, yani web'i destekleyen herhangi bir tarayıcı tam olarak sizin belirlediğiniz fontlara sahip olabilir. Gerekli sözdizimi şuna benzer:

- -

Her şeyden önce CSS'in başlangıcında {{cssxref("@font-face")}} ile başlayan indirilecek yazı tipi dosyalarını belirten bir bloğumuz var:

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.woff");
-}
- -

Bunun altında, özel yazı tipinizi normal olarak istediğiniz herhangi bir şeye uygulamak için @font-face içinde belirtilen yazı tipi ailesi adını kullanabilirsiniz:

- -
html {
-  font-family: "myFont", "Bitstream Vera Serif", serif;
-}
- -

Sözdizimi bundan biraz daha karmaşık hale geliyor, aşağıda dahafazla ayrıntıya gireceğiz.

- -

Web yazı tiplerin hakkında akılda tutulması gereken iki önemli nokta vardır:

- -
    -
  1. Tarayıcılar farklı yazı tipi biçimlerini desteklerler, bu nedenle tarayıcılar arasında daha iyi bir destek için birden çok yazı tipi biçimine ihtiyacınız olacaktır. Örneğin, çoğu modern tarayıcı, piyasadaki en verimli biçim olan WOFF/WOFF2'yi (Web Açık Yazı Tipi Biçimi sürüm 1 ve 2) destekler, ancak IE'nin eski sürümleri yalnızca EOT(Gömülü Açık Tip) yazı tiplerini destekler ve iPhone ve Android tarayıcıların eski sürümlerini desteklemek için yazı tipinin bir SVG sürümünü eklemeniz gerekebilir. Gerekli kodu nasıl oluşturacağınızı aşağıda göstereceğiz.
    2. -
  2. yazı tiplerinin kullanımı genellikle ücretsiz değildir. bunlar için ödeme yapmanız ve/veya yazı tipi oluşturucuyu kodda (veya sitenizde) belirtmek gibi diğer lisa ns koşullarını izlemeniz gerekir. Yazı tiplerini çalmamalı ve uygun şekilde kredi vermeden kullanmamalısınız.
    3. -
- -
-

Not: Bir teknoloji olarak Web yazı tipleri, sürüm 4'ten beri Internet Explorer'da desteklenmektedir.

-
- -

Web yazı tipi olsun yada olmasın, sayfanızda kullanılan yazı tiplerini araştırmak ve değiştirmek için Firefox yazı tipi düzenleyicisini kullanabilirsiniz. Bu video güzel bir yol sunar:

- -

{{EmbedYouTube("UazfLa1O94M")}}

- -

Aktif öğrenme: Bir web yazı tipi örneği

- -

İlk ilkelerden temel bir web yazı tipi örneği oluşturalım. Gömülü bir canlı örnek kullanarak bunu göstermek zordur, bu nedenle, süreç hakkında bir fikir edinmek için aşağıdaki bölümlerde ayrıntılı olarak açıklanan adımları izlemenizi öneririz.

- -

Kullanmanız için size iki örnek dosya; web-font-start.html ve web-font-start.css (canlı örneği görebilirsiniz). Bu dosyaları bilgisayarınızda bir dizine kopyalayın.  web-font-start.css dosya örneğinin içerisinde temel düzen için bazı CSS'ler bulabilirsiniz.

- -

Yazı tipi bulmak

- -

Bu örnek için, biri başlıklar ve diğeri gövde metni için olmak üzere iki web fontu kullanacağız. Başlangıç olarak, yazı tiplerini içeren yazı tipi dosyalarını bulmamız gerekiyor. Yazı tipleri, yazı tipi dökümhaneleri tarafından oluşturulur ve farklı dosya formatlarında saklanır. yazı tiplerini edinebileceğiniz genellikle üç tür site vardır:

- -
    -
  • Ücretsiz bir yazı tipi dağıtıcısı: Bu, ücretsiz yazı tiplerini indirilebilir hale getiren bir sitedir (yazı tipi oluşturucusuna atıfta bulunmak gibi bazı lisans koşulları hala olabilir). Örnek siteler arasında Font Squirrel, dafont, ve Everything Fonts sayılabilir.
    • -
  • Ücretli bir yazı tipi dağıtıcısı: Bu, yazı tiplerini fonts.com veya myfonts.com gibi ücret karşılığında kullanıma sunan siteler sayılabilir. Yazı tiplerini, Linotype, Monotype, veya Exljbris gibi doğrudan yazı tipi dökümhanelerinden de satın alabilirsiniz.
    • -
  • Çevrim içi yazı tipi hizmeti: Bu, yazı tiplerini sizin için saklayan, sunan ve tüm süreci kolaylaştıran bir sitedir. Daha fazla ayrıntı için {{anch("Using an online font service")}} bölümüne bakın.
    • -
- -

Biraz yazı tipi bulalım! Font Squirrel sitesine gidelim ve iki adet font seçelim — başlıklar için ilginç ve gösterişli bir yazı tipi ve paragraflar içinde daha okunabilir bir yazı tipi. Her bir yazı tipini bulduğunuzda, indirme düşmesine basın ve dosyayı daha önce kaydettiğiniz HTML ve CSS dosyalarının bulunduğu dizine kaydedin. TTF (True Type Fontlar) veya OTF (Open Type Fontlar) olması önemli değil.

- -

Her durumda, yazı tipi paketini açın (Web yazı tipleri genellikle yazı tipi dosyalarını ve lisans bilgilerini içeren ZIP dosyalarında dağıtılır). Pakette birden fazla yazı tipi dosyası bulabilirsiniz — bazı yazı tipleri, örneğin ince, orta, kalın, italik, ince italik vb. gibi farklı şekillere sahip aile olarak dağıtılır. Bu örnek için, yalnızca her seçim için bir yazı tipi dosyası yeterli.

- -
-

Not: Sağ taraftaki sütunda  "Yazı tiplerini bul" bölümü altında, görüntülenen seçenekleri filtrelemek için farklı etiketlere ve sınıflandırmalara tıklayabilirsiniz.

-
- -

Gerekli kodun oluşturulması

- -

Şimdi gerekli kodu (ve yazı tipi formatlarını) oluşturmanız gerekecek. Her yazı tipi için şu adımları izleyin:

- -
    -
  1. Bunu ticari bir projede ve/veya Web projesinde kullanacaksanız, herhangi bir lisans gereksinimini karşıladığınızdan emin olun.
    2. -
  2. Fontsquirrel Web yazı tipi oluşturucuya gidin.
    3. -
  3. Yazı Tiplerini Yükle düşmesini kullanarak iki yazı tipi dosyanızı web sitesine yükleyin.
    4. -
  4. "Evet, yüklediğim yazı tipleri yasal olarak web yerleştirmeye uygun" etiketli onay kutusunu işaretleyin.
    5. -
  5. Kitinizi indirin.
    6. -
- -

Oluşturucu işlemeyi bitirdikten sonra, indirilecek bir ZIP dosyası almalısınız — HTML ve CSS'nizle aynı dizine kaydedin.

- -

Kodu demonuza uygulamak

- -

Bu noktada, oluşturduğunuz web yazı tipi kitini açın. Sıkıştırılmamış dizinin içinde üç yararlı öğe göreceksiniz.

- -
    -
  • Har yazı tipinin çoklu sürümleri:(örn, .ttf, .woff, .woff2, vb. tarayıcı desteği gereksinimleri değiştikçe yazı tipleri zamanla güncellenecektir) Yukarıda belirtildiği gibi, tarayıcılar arası destek için birden fazla yazı tipi gereklidir — bu, Fontsquirrel'ın ihtiyacınız olan her şeye sahip olduğunudan emin olmanın faydalı bir yoludur.
    • -
  • Her yazı tipi için bir demo HTML dosyası — yazı tipinin farklı kullanım bağlamlarında nasıl görüneceğini görmek için bunlar tarayıcınıza yükleyin.
    • -
  • stylesheet.css ihtiyaç duyacağınız @font-face kodunu içeren bir dosya.
    • -
- -

Bu yazı tiplerini sayfanıza uygulamak için şu adımları izleyin:

- -
    -
  1. Sıkıştırılmış dosyayı klasöre açın, örn fonts.
    2. -
  2. stylesheet.css dosyasını açın ve her iki @font-face kod bloğunu web-font-start.css dosyanıza kopyalayın. Yazı tiplerinin sitenizde kullanmadan önce içe aktarılması gerektiğinden, bunları CSS'nizden önce en üste koymanız gerekir.
    3. -
  3. url() işlevlerin her biri, CSS'mize aktarmak istediğimiz bir yazı tipi dosyasına işaret eder. Dosyalara giden yolların doğru olduğundan emin olamanız gerekir. Bizim durumumuzda her yolun başına fonts/ eklmeyi unutmayın.
    4. -
  4. Artık bu yazı tiplerini, herhangi bir web uyumlu veya varsayılan sistem yazı tipi gibi yazı tipi yığınlarınızda kullanabilirsiniz. Örn: - 
    font-family: 'zantrokeregular', serif;
    -
    5. -
- -

Üzerinde bazı güzel yazı tiplerinin uygulandığı bir demo sayfası bulmalısınız. Farklı yazı tipleri farklı boyutlarda oluşturulduğundan, görünümü ve hissi verebilmek için boyutu, aralığı vb. durumları ayarlamanız gerekebilir.

- -

- -
-

Not: Bunu çalıştırmakta sorun yaşarsanız, sürümünüzü bitmiş dosyalarımızla karşılaştırmaktan çekinmeyin — web-font-finished.html ve web-font-finished.css (bitmiş örneği canlı çalıştırın).

-
- -

Çevrimiçi bir yazı tipi hizmeti kullanma

- -

Çevrimiçi yazı tipi hizmetleri genellikle yazı tiplerini sizin için depolar ve sunar, bu nedenle @font-face kodu yazma konusunda endişelenmenize gerek kalmaz ve genellikle her şeyin çalışması için sitenize basit bir veya iki satır kod eklemeniz gerekir. Örnekler arasında Adobe Fonts ve Cloud.typography bulunur. Bu hizmetlerin çoğu, test ve demolar için kullanışlı ve ücresiz bir hizmet olan Google Fonts dışında, abonelik tabanlıdır.

- -

Bu hizmetlerin kullanımı kolaydır, bu nedenle onları ayrıntılı olarak ele alacağız. Google yazı tiplerine hızlıca bir göz atalım, böylece fikir edinebilirisiniz. Yine, başlangıç noktanız olarak web-font-start.html ve web-font-start.css dosyalarının birer kopyalarını kullanalım.

- -
    -
  1. Google Fonts'a gidin.
    2. -
  2. Sevdiğiniz birkaç yazı tipini seçmek için filtreleri kullanın.
    3. -
  3. Seçmek istediğiniz yazı tipi ailesine tıklayın.
    4. -
  4. Yazı tipi ailesindeki yazı tiplerinin listelenecek.
    5. -
  5. Her yazı tipinin sağındaki "+ Select this style" tıkladığınızda sağda açılan "Selected family" ekranında (eğer açılmazsa sayfadaki sağ üsttü bulunan butonuna tıklayın) ilk önce gösterilen HTML kod satırını kopyalayıp HTML dosyanızın başına yapıştırmanız gerekir. CSS'nizde kullanmadan önce HTML sayfanızda CSS'inizden önce tanımlanması gerekir. Daha sonra kendi stil kodunuzu veya dosyanızı eklemelisiniz.
    6. -
  6. Daha sonra özel yazı tiplerini HTML'nize uygulamak için CSS'nizde listelenen CSS bildirimlerini uygun şekilde kopyalamanız/yazmanız gerekir.
    7. -
- -
-

Not:Tamamlanmış bir sürümü google-font.html ve google-font.css adreslerinde bulabilirsiniz, eğer çalışmanızı bizimkilerle karşılaştırmak isterseniz canlı örneğe bir göz atın.

-
- -

@font-face daha ayrıntılı olarak bakalım

- -

Fontsquirrel tarafından olşturulan @font-face kural bildirimini inceleyelim.

- -

Bloklardan biri şuna benzemektedir:

- -
@font-face {
-  font-family: 'ciclefina';
-  src: url('fonts/cicle_fina-webfont.eot');
-  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
-         url('fonts/cicle_fina-webfont.woff') format('woff'),
-         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
-         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
- -

Bu "bulletproof @font-face sözdizimi", @font-face popüler olmaya başladığında Paul Irish tarafından yapılan bir gönderiden sonra (Bulletproof @font-face Syntax) olarak anılır. Ne yaptığını görmek için üzerinden geçelim:

- -
    -
  • font-family: bu satır, yazı tipine atıfta bulunmak istediğimiz adı belirler. CSS'inizde tutarlı bir şekilde kulllandığınız sürece bunu istediğiniz şekilde belirleyebilirsiniz.
    • -
  • src: Bu satırlar, CSS'inize (url bölümü) aktarılacak yazı tipi dosyalarının yollarını ve her bir yazı tipi dosaysının (format bölümü) formatını belirtir. Her durumda ikinci bölüm isteğe bağlıdır, ancak tarayıcıların daha hızlı kullanabilecekleri bir yazı tipi bulmasına izin verdiği için bunu açıklamak yararlıdır. Birden çok bildirim, virgülle ayrılmış olarak listelenebilir — WOFF2 gibi daha yeni daha iyi formatları öne, TTF gibi daha eski ve çok iyi olmayan formatları daha sonra koymak en iyisidir. Bunun tek istisnası, EOT yazı tipleridir — IE'nin eski sürümlerindeki birkaç hatayı düzeltmek için ilk olarak yerleştirilirler ve bu sayede bulduğu ilk yazı tipini kullanmaya çalışır.
    • -
  • {{cssxref("font-weight")}}/{{cssxref("font-style")}}: Bu satırlar, yazı tipinin hangi ağırlığa sahip olduğunu ve italik olup olmadığını belirtir. Aynı yazı tipinin birden çok ağırlığını içe aktarıyorsanız, yazı tipi ailesinin tüm farklı üyelerini farklı adlar olarak adlandırmak yerine, ağırlıklarının/stillerinin ne olduğu belirleyebilir ve sonra aralarında seçim yapmak için farklı {{cssxref("font-weight")}}/{{cssxref("font-style")}} nitelik değerlerini kullanabilirsiniz. @font-face tip: CSS'nizi basit tutmak için yazı tipi ağırlığını ve yazı tipi stilini tanımlayın ile Roger Johansson ne yapmanız gerektiğini daha ayrıntılı olarak gösteriyor.
    • -
- -
-

Not: Web yazı tipleriniz için belirli {{cssxref("font-variant")}} ve {{cssxref("font-stretch")}} değerleri de belirtebilirsiniz. Daha yeni tarayıcılarda, {{cssxref("unicode-range")}} niteliği ile web yazı tipinde kullanmak istediğiniz belirli bir karakter aralığı olan bir değer de belirteblirsiniz — destekleyen tarayıcılar da, yalnızca belirtilen karakterler indirilecek ve gereksiz indirme yapılmayacaktır. Drew McLellan tarafından yayınlanan Creating Custom Font Stacks with Unicode-Range makalesinde bundan nasıl yararlanılacağına dair yararlı fikirler bulacaksınız.

-
- -

Değişken yazı tipleri

- -

Tarayıcılarda değişken yazı tipi adı verilen daha yeni bir yazı tipi teknolojisi vardır — bunlar, her genişlik, ağırlık veya stil için ayrı bir yazı tipi dosayasına sahip olmak yerine, bir yazı tipinin birçok farklı varyasyonunun tek bir dosyaya dahil edilmesine izin veren yazı tipleridir. Başlangıç dersimiz için biraz ileri düzeydedirler, ancak kendinizi esnetmek ve geliştirmek istiyorsanız Değişken yazı tipleri klavuzumuzu okuyabilirsiniz.

- -

Becerilerinizi test edin!

- -

Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Modülün sonunda bu bilgileri sakladğınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. Bir topluluk okulunun ana sayfasını düzenleme.

- -

Özet

- -

Artık metin biçimlendirme temelleri hakkındaki makalelerimizi incelediğinize göre, topluluk okulu anasayfası olan Dizgi oluşturma modülüne yönelik değerlendirmemizle anlamanızı test etme zamanı.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

- -

Bu ünitede

- - diff --git a/files/tr/learn/front-end_web_developer/index.html b/files/tr/learn/front-end_web_developer/index.html deleted file mode 100644 index ca34c15067..0000000000 --- a/files/tr/learn/front-end_web_developer/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Front-end web developer -slug: Learn/Front-end_web_developer -tags: - - Araçlar - - Başlangıç - - CSS - - HTML - - JavaScript - - Web Standartları - - Ön Uç - - Öğrenme -translation_of: Learn/Front-end_web_developer -original_slug: Öğren/Front-end_web_developer ---- -

{{learnsidebar}}

- -

Ön uç geliştirici öğreticimize hoş geldiniz!

- -

Burada size, ön uç geliştirici olabilmeniz için bilmeniz gereken her şeyi içeren yapılandırılmış bir kurs sunuyoruz.Her bölüm üzerinde çalışın, ilerledikçe yeni beceriler kazanın. (ya da var olan becerilerinizi geliştirin) Her bölümde, diğer bölüme geçmeden önce bilginizi ölçen alıştırma veya değerlendirmeler içerir.

- -

Kapsanan Konular

- -

Kapsanan konular şöyledir:

- -
    -
  • Basit kurulum ve çalışma metodu
    • -
  • Web standartları ve en iyi uygulamalar (erişilebilirlik ve web tarayıcıları ile uyumluluk gibi)
    • -
  • HTML, web içeriğinin yapısını ve anlamını veren bir işaretleme dili
    • -
  • CSS, web sayfalarının biçimlendirmesini sağlayan dil
    • -
  • JavaScript, webde dinamik fonksiyonlar oluşturmak için kullanılan script dilidir
    • -
  • Modern web istemci tarafı kullanılan araçlar.
    • -
- -

Bölümler arasında sırayla da çalışabilirsiniz, tüm bölümler birbirinden bağımsızdır. Örnek olarak; HTML biliyorsanız direkt olarak CSS bölümüne geçebilirsiniz.

- -

Önkoşullar

- -

Bu kursa başlamanız için önceden herhangi bir bilg birikiminizin olmasına gerek yok. Tüm ihtiyacınız; modern web tarayıcılarını çalıştırabilen bir bilgisayar, internet bağlantısı ve güçlü bir öğrenme arzusu.

- -

Ön uç geliştirici olmanın size uygun olmayacağını düşünüyorsanız ya da daha basit bir şekilde temelden öğrenmek istiyorsanız, Web ile başlama modülümüzü kullanabilirsiniz.

- -

Yardım istemek

- -

Ön uç web geliştirmeyi öğrenmeyi olabildiğince rahat ve anlaşılır bir şekilde ele aldık, ancak takıldığınız yerler ya da çalışmayan kodlar olacaktır.

- -

Panik yapmayın. İster yeni başlayan biri olun ya da daha profesyonel biri olun, hepimiz takılıp kalırız. Öğrenme ve yardım alma makalemiz, kendinize yardım aramak ve bilgi edinmek için bir dizi ipucu sağlar. Eğer hâlâ sorun yaşıyorsanız lütfen Söylem forumumuza yazmaktan çekinmeyin.

- -

Hadi başlayalım. İyi şanslar!

- -

Öğrenme Yolu

- -

Başlangıç

- -

Tamamlama süresi: 1.5–2 saat

- -

Önkoşullar

- -

Temel bilgisayar bilgisi, okuryazarlığı dışında hiçbir şey.

- -

Devam etmeye hazır olduğumu nasıl bileceğim?

- -

Kursun bu bölümünde herhangi bir değerlendirme yoktur. Fakat atlamadığınızdan emin olun.Bu, kursun ilerleyen bölümlerindeki alıştırmalar için hazırlanmanızı ve çalışmaya hazır olmanızı sağlamak için önemlidir.

- -

Kılavuzlar

- - - -

HTML ile semantik ve yapı

- -

Tamamlama süresi: 35–50 saat

- -

Önkoşullar

- -

Temel bilgisayar okuryazarlığı ve temel bir web geliştirme ortamı dışında hiçbir şey.

- -

Devam etmeye hazır olduğumu nasıl bileceğim?

- -

Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.

- -

Modüller

- - - -

CSS ile stil ve düzen

- -

Tamamlama süresi: 90–120 saat

- -

Önkoşullar

- -

CSS'e başlamadan önce temel HTML bilgisine sahip olmanız önerilir. En azından HTML'ye Giriş kısmını okuyabilirsin.

- -

Devam etmeye hazır olduğumu nasıl bileceğim?

- -

Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.

- -

Modüller

- - - -

Ek kaynaklar

- - - -

JavaScript ile etkileşim

- -

Tamamlama süresi: 135–185 saat

- -

Önkoşullar

- -

Javascript'e başlamadan önce temel HTML bilgisine sahip olmanız önerilir. En azından HTML'ye Giriş kısmını okuyabilirsin.

- -

Devam etmeye hazır olduğumu nasıl bileceğim?

- -

Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.

- -

Modüller

- - - -

Web formları - Kullancıcı verileriyle çalışma

- -

Tamamlama süresi: 40–50 saat

- -

Önkoşullar

- -

Formlar, HTML, CSS ve Javascript bilgisi gerektirir. Formlarla çalışmanın karmaşıklığı göz önüne alındığında, bu özel ve üzerinde durulması gereken bir konudur.

- -

Devam etmeye hazır olduğumu nasıl bileceğim?

- -

Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.

- -

Modüller

- - - -

Web'in herkes için çalışmasını sağlama

- -

Tamamlama süresi: 60–75 saat

- -

Önkoşullar

- -

Bu bölümde çalışmadan önce HTML, CSS ve Javascript bilmek iyi bir fikirdir. Tekniklerin ve en iyi uygulamaların çoğu birden fazla teknolojinin bir arada bulunması ile ilgilidir.

- -

Devam etmeye hazır olduğumu nasıl bileceğim?

- -

Her modüldeki değerlendirmeler, konuyla ilgili bilginizi test etmek için tasarlanmıştır. Değerlendirmeleri başarıyla tamamlamak, bir sonraki modüle geçmeye hazır olduğunuzu onaylar.

- -

Modüller

- - - -

Modern Araçlar

- -

Tamamlama süresi: 55–90 saat

- -

Önkoşullar

- -

Üzerinde yoğunlaşılacak bu araçlar, birden çok teknolojiler ile çalıştığından dolayı HTML, CSS ve Javascript bilmek iyi bir fikirdir.

- -

Devam etmeye hazır olduğumu nasıl bileceğim?

- -

Bu modül setinde özel değerlendirme makaleleri, testleri yoktur. İkinci ve üçüncü modüllerin sonundaki olay çalışması eğitimleri, sizi modern aletlerin temellerini kavramaya hazırlar.

- -

Modüller

- - diff --git a/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html deleted file mode 100644 index 4b706170ec..0000000000 --- a/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: How the Web works -slug: Learn/Getting_started_with_the_web/How_the_Web_works -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works -original_slug: Öğren/Getting_started_with_the_web/How_the_Web_works ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Nasıl web işleri sağlar basitleştirilmiş bir bakış ne durumda görünümünde bir web sayfası içinde bir web tarayıcı üstünde senin bilgisayar ya da telefon.

-
- -

Bu teori, kısa vadede web kodu yazmak için gerekli değildir, ancak çok geçmeden arka planda neler olup bittiğini anlamaktan gerçekten yararlanmaya başlayacaksınız.

- -

İstemciler ve sunucular

- -

Web'e bağlı bilgisayarlara istemciler ve sunucular denir. Nasıl etkileşime girdiklerine dair basitleştirilmiş bir diyagram şöyle görünebilir:

- -

İstemci ve sunucuyu temsil eden iki daire. Bir ok etiketli istek istemciden sunucuya gidiyor ve bir ok etiketli yanıtlar sunucudan istemciye gidiyor

- -

Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client

- -
    -
  • İstemciler, tipik bir web kullanıcısının internete bağlı cihazlarıdır (örneğin, Wi-Fi'ye bağlı bir bilgisayar veya mobil ağa bağlı bir telefon) ve bu cihazlarda bulunan web tabanlı yazılımlardır (genellikle Firefox veya Chrome gibi bir web tarayıcısı).
    • -
  • Sunucular, web sayfalarını, siteleri veya uygulamaları depolayan bilgisayarlardır. Bir istemci aygıtı bir web sayfasına erişmek istediğinde, web sayfasının bir kopyası sunucudan kullanıcının web tarayıcısında görüntülenecek istemci makineye yüklenir.
    • -
- -

Araç kutusunun diğer bölümleri

- -

Yukarıda anlattığımız istemci ve sunucu tüm hikayeyi anlatmıyor. Burada başka birçok bölüm var ve bunları aşağıda açıklayacağız.

- -

Şimdilik, Web'in bir yol olduğunu hayal edelim. Yolun bir ucunda, eviniz gibi bir müşteri var. Yolun diğer ucunda bir şey satın almak istediğiniz bir dükkan olan sunucu var.

- -

- -

İstemci ve sunucuya ek olarak, biz de merhaba demek gerekir:

- -
    -
  • İnternet bağlantınız: çevrimiçi veri göndermenizi ve almanızı sağlar. Temelde eviniz ve dükkan arasındaki sokak gibi.
    • -
  • TCP / IP: iletim kontrol Protokolü ve İnternet Protokolü, verilerin internet üzerinden nasıl geçmesi gerektiğini tanımlayan iletişim protokolleridir. Bu, sipariş vermenize, mağazaya gitmenize ve mallarınızı satın almanıza izin veren ulaşım mekanizmaları gibidir. Örneğimizde, bu bir araba ya da bisiklet gibidir (ya da etrafta dolaşabilirsiniz).
    • -
  • DNS: Alan Adı sunucuları Web siteleri için bir adres defteri gibidir. Tarayıcınıza bir web adresi yazdığınızda, tarayıcı Web sitesini almadan önce web sitesinin gerçek adresini bulmak için DNS'YE bakar. Tarayıcı, web sitesinin hangi sunucuda yaşadığını bulmalıdır, böylece HTTP mesajlarını doğru yere gönderebilir (aşağıya bakınız). Bu, mağazanın adresini aramak gibi, böylece ona erişebilirsiniz.
    • -
  • HTTP: köprü metni Aktarım Protokolü, istemcilerin ve sunucuların birbirleriyle konuşması için bir dili tanımlayan bir uygulama protokolüdür. Bu, mallarınızı sipariş etmek için kullandığınız dil gibidir.
    • -
  • Bileşen dosyaları: bir web sitesi, mağazadan satın aldığınız malların farklı bölümlerine benzeyen birçok farklı dosyadan oluşur. Bu dosyalar iki ana tipte gelir: -
      -
    • Kod dosyaları: web siteleri öncelikle HTML, CSS ve Javascript'ten oluşturulmuştur, ancak daha sonra diğer teknolojilerle tanışacaksınız.
      • -
    • Varlıklar: bu, resimler, müzik, video, Word belgeleri ve PDF'ler gibi bir Web sitesini oluşturan diğer tüm şeyler için ortak bir addır.
      • -
    -
    • -
- -

Peki tam olarak ne olacak?

- -

Tarayıcınıza bir web adresi girdiğinizde (analojimiz için mağazaya gitmek gibi):

- -
    -
  1. Tarayıcı DNS sunucusuna gider ve web sitesinin yaşadığı sunucunun gerçek adresini bulur (mağazanın adresini bulursunuz).
    2. -
  2. Tarayıcı, sunucuya bir HTTP isteği mesajı gönderir ve web sitesinin bir kopyasını müşteriye göndermesini ister (mağazaya gidin ve mallarınızı sipariş edin). Bu ileti ve istemci ile sunucu arasında gönderilen diğer tüm veriler, TCP/IP kullanarak ınternet bağlantınız üzerinden gönderilir.
    3. -
  3. Sunucu müşterinin isteğini onaylarsa, sunucu müşteriye bir "200 Tamam"mesajı gönderir, bu da "elbette bu web sitesine bakabilirsiniz! İşte burada " ve daha sonra web sitesinin dosyalarını tarayıcıya veri paketleri adı verilen bir dizi küçük parça olarak göndermeye başlar (dükkan size mallarınızı verir ve bunları evinize geri getirirsiniz).
    4. -
  4. Tarayıcı, Küçük parçaları tam bir web sayfasına toplar ve size görüntüler (mallar kapınıza gelir — yeni parlak şeyler, harika!).
    5. -
- -

DNS açıkladı

- -

Gerçek web adresleri, en sevdiğiniz web sitelerini bulmak için adres çubuğunuza yazdığınız güzel, unutulmaz dizeler değildir. Bunlar aşağıdaki gibi görünen özel sayılardır: 63.245.215.20.

- -

Buna bir IP adresidenir ve web üzerinde benzersiz bir konumu temsil eder. Ancak, hatırlamak çok kolay değil, değil mi? Bu yüzden Alan Adı sunucuları icat edildi. Bunlar, tarayıcınıza yazdığınız bir web adresiyle eşleşen özel sunuculardır (örneğin "mozilla.org") web sitesinin gerçek (IP) adresine.

- -

Web sitelerine doğrudan IP adresleri üzerinden ulaşılabilir. Bir web sitesinin IP adresini, etki alanını IP Denetleyicisi gibi bir araca yazarak bulabilirsiniz .

- -

Paketler açıklandı

- -

Daha önce, verilerin sunucudan istemciye gönderildiği formatı tanımlamak için "paketler" terimini kullandık. Burada ne demek istiyoruz? Temel olarak, veriler web üzerinden gönderildiğinde, binlerce küçük parça olarak gönderilir, böylece birçok farklı web kullanıcısı aynı web sitesini aynı anda indirebilir. Web siteleri tek büyük parçalar olarak gönderildiyse, yalnızca bir kullanıcı bir seferde bir tane indirebilir, bu da Web'i çok verimsiz ve kullanımı çok eğlenceli hale getirecektir.

- -

Ayrıca bakınız

- - - -

Kredi

- -

Sokak fotoğraf: Sokak beste, Kevin D.

- -
Önceki Genel Bakış: web ile Başlarken
- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -

Bu modülde

- - diff --git a/files/tr/learn/getting_started_with_the_web/index.html b/files/tr/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 502ad9648c..0000000000 --- a/files/tr/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Web ile başlarken -slug: Learn/Getting_started_with_the_web -translation_of: Learn/Getting_started_with_the_web -original_slug: Öğren/Getting_started_with_the_web ---- -
{{LearnSidebar}}
- -
-


- Web'i kullanmaya başlarken, size web geliştirmenin pratiklerini anlatan kısa bir seridir. Basit bir web sayfası oluşturmak ve kendi kodunuzu yayınlamak için ihtiyaç duyacağınız araçları kurmalısınız.

-
- -

İlk web sitenizin hikayesi

- -

Profesyonel bir web sitesi oluşturmak için çok fazla iş yapmak gerekir, bu yüzden web geliştirme konusunda yeniyseniz, küçük çapta başlamanızı öneririz. Hemen başka bir Facebook kurmayacaksınız, ancak kendi basit web sitenizi çevrimiçi yapmak zor değil, o yüzden buradan başlayacağız.

- -

Aşağıda sıralanan makalelerde sırayla çalışarak, ilk web sayfanızı çevrimiçi hale getireceksiniz. Hadi başlayalım!

- -

Temel yazılım kurma

- -

Bir web sitesi oluşturmak için araçlar söz konusu olduğunda, seçilecek çok şey var. Yeni başlıyorsanız, bir çok kod editörleri, çerçeveler (framework) ve test araçlarıyla karşılaşınca şaşırabilirsiniz. Temel yazılımı yükleme bölümünde, temel web geliştirmesine başlamak için ihtiyaç duyduğunuz yazılımı nasıl yükleyeceğinizi adım adım göstereceğiz.

- -

Websiteniz nasıl görünecek?

- -

Web siteniz için kod yazmaya başlamadan önce, önce onu planlamanız gerekir. Hangi bilgileri sergiliyorsunuz? Hangi yazı tiplerini ve renkleri kullanıyorsunuz? Web siteniz neye benzeyecek? Sitenizin içeriğini ve tasarımını planlamak için izleyebileceğiniz basit bir yöntem sunuyoruz.

- -

Dosyaların Yönetimi

- -

Bir web sitesi birçok dosyadan oluşur: metinsel içerikler, kodlar, stiller, medya içerikleri vb. Bir web sitesi oluştururken, bu dosyaları mantıklı bir yapıda birleştirmeniz ve birbirleriyle haberleşebildiklerinden emin olmanız gerekir. Dosyaların yönetimi, size web siteniz için mantıklı dosya yapısının nasıl kurulacağını ve hangi problemlerden haberdar olmanız gerektiğini açıklar.

- -

HTML temelleri

- -

Hiperyazı İşaretleme Dili (HTML) web içeriğinizi yapılandırmak ve anlam ve amaç vermek  için kullandığınız koddur. Örneğin, içeriğim bir paragraflar dizisi mi yoksa madde imi listesi mi? Sayfama resim eklenmiş mi? Veri tablom var mı? Sizi bunaltmadan, HTML temelleri size HTML ile tanışmanız için yeterli bilgiyi sağlayacaktır.

- -

CSS temelleri

- -

Cascading Stylesheets (CSS), web sitenizi şekillendirmek için kullandığınız koddur. Örneğin, metninizin siyah mı kırmızı mı olmasını istersiniz? İçeriğiniz ekranın neresinde görünmesini istersiniz? Web sitenizi süslemek için hangi arka plan resimleri ve renkleri kullanılmalıdır? CSS temelleri sizi başlamanız gereken yere götürür.

- -

JavaScript temelleri

- -

JavaScript web sitenize interaktif içerikler eklemek için kullandığınız programlama dilidir, örneğin oyunlar, butonlara basıldığında veya veriler formlara girildiğinde gerçekleşen şeyler, dinamik stil efektleri, animasyon, ve daha fazlası. JavaScript temelleri size bu ilginç dil ile neler yapabileceğiniz ve nasıl başlayacağınız konusunda bir fikir verir.

- -

Websiteni yayınla

- -

Kodu yazmayı ve web sitenizi yaratan dosyaları düzenlemeyi bitirdikten sonra, hepsini insanların bulabilmesi için internete yüklemeniz gerekmektedir. Örnek kodu yayınla, size minimum çaba ile basit örnek kodunuzun nasıl internette yayınlanacağını açıklar.

- -

Web nasıl çalışır

- -

Favori web sitenize bağlandığınızda, arka planda bilmediğiniz birçok karmaşık şey olur. Web nasıl çalışır, bilgisayarınızda bir web sayfasını görüntülediğinizde neler olacağını gösterir.

diff --git a/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index b6bd4c9150..0000000000 --- a/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Installing basic software -slug: Learn/Getting_started_with_the_web/Installing_basic_software -tags: - - Aletler - - Başlangıç - - Yüklemeler - - Öğrenme -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software -original_slug: Öğren/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu ("Öğrenmek / Almak_started_with_the_web / What_will_your_website_look_like", "Öğrenmek / Getting_started_with_the_web")}}
- -
-

Temel yazılımı yükleme konusunda, sizlere basit web geliştirme yapmak için gereken araçları ve bunları nasıl düzgün bir şekilde kuracağınızı gösteriyoruz.

-
- -

Bir profesyonelin sahip olması gereken araçlar nelerdir ?

- -
    -
  • Bir Bilgisayar. Belki, bir kısmınıza şaşırtıcı gelebilir, fakat bazılarınız bu sayfayı mobil telefonundan veya kütüphanedeki bir bilgisayardan okuyor. Ciddi bir web geliştiricisi olmak için iyi bir masa üstü veya diz üstü bilgisayara ihtiyacınız olacak. (Windows, Mac, or Linux).
    • -
  • Kodu yazmak için, text editörünüz olmalı (ör. Brackets, Atom veya Visual Studio Code), veya karma bir editör (ör.Dreamweaver). Ofis belgeleri bu iş için uygun değildir.
    • -
  • Kodunuzu test etmek için iyi bir Web tarayıcısı, En çok kullanılan tarayıcılar : Firefox, Chrome, Opera, Safari, Internet Explorer ve Microsoft Edge. Ayrıca tavsiyemiz, sitenizin mobil cihazlarda ve eski tarayıcılarda nasıl performans gösterdiğini test etmeniz. Eski sürümler halen ciddi bir yoğunlukta (IE 6–8.) gibi.
    • -
  • Grafik Editörü, web sitenize görüntüler yapmak için, mesala GIMP, Paint.NET, veya Photoshop.
    • -
  • Sürüm kontrol sistemi, sunuculardaki dosyaları yönetmek, ekiple bir projede işbirliği yapmak, kodunuzu ve gerekli dosyalarınızı paylaşmak, ve düzenlemedeki çakışmalardan kaçınmak içindir. Şuan Git popüler bir sürüm kontrol sistemidir, ve Git'e merkezli GitHub kod barındırma hizmeti de çok popüler.
    • -
  • FTP programı, web üzerinde barındılan dosyaların serverlardan  yönetilmesinde kullanıldı. (Git bu amaçla giderek FTP yerini değiştiriyor).  Cyberduck, Fetch, ve FileZilla dahil olmak üzere bir çok (S) FTP programı bulunmaktadır.
    • -
  • Otomasyon Sistemi Grunt veya Gulp tekrarlanan görevleri otomatikleştirir, mesela kodu küçültme ve testleri çalıştırıyor.
    • -
  • Ortak işlevselliği hızlandırmak için şablonlar, kütüphaneler, çerçeveler, vb.
    • -
  • Üstelik daha fazla araç!
    • -
- -

Şu anda hangi araçlara ihtiyacım var?

- -

Bu korkutucu bir listeye benziyor, ama neyse ki bunların çoğuyla ilgili hiçbir şey bilmeden web geliştirmeye başlayabilirsiniz. Bu yazıda, size yalnızca minimum düzeyde bir kurulum yapacağız - bir metin editörü ve bazı modern web tarayıcıları.

- -

Metin editörü yükleme

- -

Muhtemelen bilgisayarınızda zaten temel bir metin editörünüz vardır. Varsayılan olarak, Windows Not Defteri'ni içerir ve macOS TextEdit ile birlikte gelir . Linux dağıtımları değişir; Ubuntu varsayılan olarak gedit ile birlikte gelir  .

- -

Web geliştirme için, muhtemelen Not Defteri'nden veya TextEdit'ten daha iyisini yapabilirsiniz. Canlı önizlemeler ve kod ipuçları sunan ücretsiz bir editör olan Brackets ile başlamanızı öneririz .

- -

Modern web tarayıcılarını yükleme

- -

Şimdilik, kodumuzu test etmek için birkaç masaüstü web tarayıcısı kuracağız. İşletim sisteminizi aşağıdan seçin ve favori tarayıcılarınızın kurulumcularını indirmek için ilgili bağlantıları tıklayın:

- - - -

Devam etmeden önce, bu tarayıcılardan en az ikisini kurmalı ve test için hazır bulundurmalısınız.

- -

Yerel bir web sunucusu kurmak

- -

Bazı örneklerin başarılı bir şekilde çalışması için bir web sunucusu üzerinden çalıştırılması gerekir. Bunun nasıl yapılacağını öğrenerek yerel bir test sunucusu nasıl kurulur?

- -

{{NextMenu ("Öğrenmek / Almak_started_with_the_web / What_will_your_website_look_like", "Öğrenmek / Getting_started_with_the_web")}}

diff --git a/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html b/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index 0bfe47464d..0000000000 --- a/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,387 +0,0 @@ ---- -title: JavaScript'in Temelleri -slug: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -original_slug: Öğren/Getting_started_with_the_web/JavaScript_basics ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -
-

Javascript web sitelerine etkileşimler ekleyebilen bir programlama dilidir. Javascript ile web sitenize oyunlar, düğmeye basıldığında, forma odaklanıldığında kullanıcıyla geçilecek etkileşimi ekleyebilirsiniz. bu makale size Javascript ile başlangıç için bir fikir verecek ve bu dil ile neler yapılabileceği hakkında yardımcı olacaktır.

-
- -

JavaScript nedir?

- -

{{Glossary("JavaScript")}} (Kısaca "JS" ) Tam teşekküllü {{Glossary("Dynamic programming language", "dinamik programlama dili")}}dir. Bir {{Glossary("HTML")}} dökümanına uygulandığında, kullanıcı ile dinamik etkileşimler yaratır. Javascript Brendan Eich tarafından yaratılmıştır, aynı zamanda Brendan Mozilla projesinin, Mozilla vakfının ve Mozilla şirketinin kurucu ortağıdır.

- -

Javascript ile aslında aklınıza gelen her şeyi yapabilirsiniz. Karosel (kayar resim menüleri) gibi küçük şeylerden başlayıp, fotoğraf galerileri, harika arayüzler ve düğmeye tıklamaya verilecek cevaba kadar her şeyi yapacaksınız. Hatta, dil üzerinde tecrübe kazandığınızda 2B ve 3B oyunlar ve veritabanı kullanan uygulamalar yapabileceksiniz.

- -

Javascript küçük bir dil olmasına rağmen çok esnektir ve geliştiriciler, Javascript çekirdeği üzerine çok fazla araç geliştirmiştir. Bu araçlar kullanılarak pek çok sorunu çok az efor harcayarak çözebilirsiniz. Örneğin:

- -
    -
  • ({{Glossary("API","APIs")}}) web tarayıcılar için geliştirilmiş, çok çeşitli HTML oluşturma ve CSS güncelleme araçları, kullanıcıların web kemaralarında yayın alıp bunları okumak, 3 boyutlu grafikler ve ses örnekleri yaratmak üzere hazırlanmış Application Programming Interfaces (uygulama geliştirme arayüzleri) vardır.
    • -
  • Geliştiricilerin, siteleri ile Twitter ve Facebook arası ortak fonksiyonlar kullanmasını kullanmak üzere 3. parti API'ler.
    • -
  • HTML'ye uygulayabileceğiniz, çok hızlı bir şekilde web siteleri inşa etmenize yarayacak 3. parti kütüphaneler.
    • -
- -

Bir Merhaba dünya! örneği

- -

Başlık sizi çok heycanlandırmış olmalı, heycanlandırmalı da — JavaScript, en heyecan verici web teknolojilerinden biri ve siz JavaScript üzerinde uzmanlaştıkça, websiteleriniz yeni bir boyut ve güç kazanacaktır.

- -

Ancak, JavaScript HTML ve CSS'ye göre biraz daha zor bir teknolojidir. Öncelikle ufak uygulama ve örneklerle başlamalı daha sonra küçük adımlarla ilerlemelisiniz. Şimdi size çok basit bir Javascript kodunu sayfanıza nasıl dahil edeceğiniz, nasıl bir "merhaba dünya" örneğini nasıl yapacağınızı göstereceğiz.(Programlamada standart, basit bir önek)

- -
-

Önemli: Eğer bu dersi bizimle takip etmeyecekseniz, örnek kodu bir başlangıç olarak bilgisayarınıza indirin.

-
- -
    -
  1. Önce test sitenizin olduğu klasöre gidip, scripts isimli bir klasör açın ve içine main.js adında bir dosya yaratın.
    2. -
  2. Sonra, index.html dosyasının içine gidin ve </body> etiket bitiminden bir önceki satıra bu kodu ekleyin: - 
    <script src="scripts/main.js"></script>
    -
    3. -
  3. Bu kod CSS'de {{htmlelement("link")}} elementi ne işe yarıyorsa aynısını yapıyor. Javascripti sayfaya dahil eder ve bu sayede Javascript kodunuz sayfa üzerinde bir etkiye sahip olur.
    4. -
  4. Şimdi bu kodu main.js dosyanıza ekleyin. - 
    var myHeading = document.querySelector('h1');
-myHeading.textContent = 'Hello world!';
    -
    5. -
  5. Şimdi HTML ve Javascript dosyalarınızın kaydedildiğinden emin olun ve index.html dosyanızı tarayıcıya yükleyin. Aşağıdakine benzer bir şey görmelisiniz.
    6. -
- -
-

Not: {{htmlelement("script")}} Elementini neredeyse dosyanın en sonuna koymamızın nedeni, HTML'nin tarayıcı tarafından dosyada göründüğü sırayla yüklenmesidir.JavaScript önce yüklenir ve altındaki HTML'yi etkilemesi beklenirse, JavaScript çalışması beklenen HTML'den önce yükleneceğinden, bu işe yaramayabilir. Bu nedenle, JavaScript'i HTML sayfasının altına koymak genellikle en iyi stratejidir.

-
- -

Ne oldu?

- -

Evet, başlık metniniz "Hello world!" olarak değiştirildi ve bunu Javascript yaptı! Bunu {{domxref("Document.querySelector", "querySelector()")}} fonksiyonunu çağırarak yaptık, bu fonksiyon bize o elemente ait bir referans getirdi ve biz bunu myHeading isimli bir değişkene kaydettik. Aslında bu CSS'de seçicilerle yaptığımız işlemin aynısı. Bir element üzerinde değişiklik yapmak istiyorsanız, önce o elementi seçmelisiniz.

- -

Sonra, myHeading değişkeninin {{domxref("Node.textContent", "textContent")}} özelliğini, (başlığın içeriğini taşıyan özellik) "Hello world!" olarak değiştirdik.

- -

Hızlandırılmış Dil Temelleri Kursu

- -

Javascript'İ daha iyi anlamanız içim şimdi size dilin temel özelliklerini göstereceğiz. Ne güzel ki, bu özellikler pek çok programlama dilinin ortak özellikleridir. Bu temel kavramları anlayabilirseniz, istediğiniz şeyleri gerçekleştirebilmek adına programlamaya başlamış olacaksınız.

- -
-

Önemli: Bu makaledeki örnek kodları Javascript komut sistemine yazıp ne olacağını görmelisiniz. Javascript Console hakkında daha fazla bilgi alın.

-
- -

Değişkenler

- -

{{Glossary("Variable", "Variables")}} Değişkenler, değeleri saklayabileceğiniz kaplardır. Bir değişkeni tanımlamaya var anahtar kelimesi kullanarak başlarsınız, ardından da değişkene vermek istediğiniz ismi yazarsınız.

- -
var myVariable;
- -
-

Not: Javascript'teki bütün ifadeler noktalı virgül ile bitmelidir. Eğer noktalı virgül koymaysanız, beklenmeyen sonuçlarla karşılaşabilirsiniz.

-
- -
-

Not: Seçilmiş anahtar kelimeler dışında değişkenlerinize istediğiniz ismi verebilirsiniz. (lütfen değişken isimlendirme kuralları makalesini okuyun)

-
- -
-

Not: Javascript büyük-küçük karakterler konusunda hassas bir dildir. Bu nedenle degisken ve Degisken aynı şey değildir. Eğer problemler yaşıyorsanız, büyük küçük harf problemlerinizi kontrol edin.

-
- -

Bir değişkeni tanımladıktan sonra ona bir değer verebilirsiniz.

- -
myVariable = 'Bob';
- -

Bunları dilerseniz aynı satırda yapabilirsiniz.

- -
var myVariable = 'Bob';
- -

Bu değişkenin değlerini sadece ismini yazarak çağırabilirsiniz.

- -
myVariable;
- -

Bir değişkene bir değer verdikten sonra bu değeri değiştirebilirsiniz.

- -
var myVariable = 'Bob';
-myVariable = 'Steve';
- -

Bütün verilerin farklı veri tipleri olduğunu unutmayın.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DeğişkenAçıklamaÖrnek
{{Glossary("String")}}Metin, bir değişkeni metin olarak tanımlamak için değeri tırnak içerisine alın.var myVariable = 'Bob';
{{Glossary("Number")}}Sayılar tırnak içerisinde olmaya ihtiyaç duymazlar.var myVariable = 10;
{{Glossary("Boolean")}}Doğru/Yanlış değeri. True ve false Javascript'in anahtar kelimeleridir ve tırnağa ihtiyaç duymazlar.var myVariable = true;
{{Glossary("Array")}}Pek çok veriyi tek bir referans altında saklamanıza yarayan bir yapı.var myVariable = [1,'Bob','Steve',10];
- Dizinin her üyesine şu şekilde bakın:
- myVariable[0], myVariable[1], vs.
{{Glossary("Object")}}Temel olarak, Javascriptteki her şey birer nesnedir ve bir değişkende saklanabilir. Javascript öğrendiğiniz sürece bunu aklınızdan çıkarmayın.var myVariable = document.querySelector('h1');
- Yukarıdaki örneklerin hepside.
- -

Peki neden değişkenlere ihtiyaç duyuyoruz? Programlamada her şeyi yapmak için değişkenlere ihtiyaç duyarız. Eğer değerleri değiştiremezsek, dinamik bir sonuç elde edemeyiz. Örneğin kişisel bir selamlama yazısı üretemeyiz ya da gösterilmekte olan fotoğrafı değiştiremeyiz.

- -

Yorumlar

- -

CSS'de olduğu gibi Javascript kodunuza da yorumlar koyabilirsiniz.

- -
/*
-Aralarındaki her şey birer yorumdur.
-*/
- -

Eğer çok satırlı yorum yazmaya ihtiyaç yoksa, iki bölü işareti ile yorum koyabilirsiniz.

- -
// Bu bir yorumdur.
-
- -

Operatörler.

- -

{{Glossary("operator")}} İki değer arası işlemden bir sonuç üreten matematiksel bir semboldür. Aşağıdaki tabloda bazı basit operatörleri görebilirsiniz. Bunları Javascript Console'unda deneyin.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatörAçıklamaSembolÖrnek
Toplama / Birleştirİki sayıyı toplamak ve iki String'i birleştirmek için kullanılır.+6 + 9;
- "Hello " + "world!";
Çıkarma, Çarpma,  BölmeBunlar, Temel Matematikteki işlemlerin aynısını yapar.-, *, /9 - 3;
- 8 * 2; // multiply in JS is an asterisk
- 9 / 3;
Atama OperatörüBunu daha önce gördünüz, bir değeri diğerine atar=var myVariable = 'Bob';
Eşitlik Operatörüİki değerin birbirne eşit olup olmadığını test eder ve true/false döndürür===var myVariable = 3;
- myVariable === 4;
Olumsuzluk / EşitizlikDeğerin tam tersini döndürür, true'yu false çevirir vb. Eşitsizlik operatörü de, iki değerin eşit olmamasını test eder.!, !== -

Temel ifade true'dur, ama karşılaştırma false döndürür. çünkü onu reddettik:

- -

var myVariable = 3;
- !(myVariable === 3);

- -

Burada test ediyoruz "myVariable 3'e eşit değil". Bu false döndürür çünkümyVariable 3'e eşittir.

- -

var myVariable = 3;
- myVariable !== 3;

-
- -

Bunların dışında da operatörler vardır. İfadeler ve operatörler makalesinden, bütün operatörler listesini inceleyebilirsiniz.

- -
-

Not: Veri türlerini karıştırmak, hesaplamalar yaparken bazı garip sonuçlar doğurabilir, bu nedenle değişkenlerinizi doğru bir şekilde belirttiğinizden ve beklediğiniz sonuçları elde ettiğinizden emin olun. Örneğin, konsolunuza "35" + "25" girin. Neden beklediğiniz sonuca ulaşmıyorsunuz? Tırnak işaretleri sayıları dizelere dönüştürdüğünden, sayı eklemeden dizeleri bitiştirdiğinizden emin olun. 35 + 25 girerseniz, doğru sonucu elde edersiniz.

-
- -

Koşul İfadeleri

- -

Koşul ifadeleri, bir ifadenin değerinin true veya false olup olmadığını kontrol eder. Buna bağlı olarak farklı kodlar çalıştırılabilir. En temel ve en çok kullanılan tip if... else yapısıdır. Örneğin:

- -
var iceCream = 'chocolate';
-if (iceCream === 'chocolate') {
-  alert('Yay, I love chocolate ice cream!');
-} else {
-  alert('Awwww, but chocolate is my favorite...');
-}
- -

if(...) ifadesinin içindeki ifade, (eşitlik operatörü ile test edilir) iceCream değişkenini 'chocolate' değeri ile karşılaştırır ve true olduğunu bulur. Eğer sonuç doğruysa, ilk bloktaki kod çalıştırılır eğer ifade yanlışsa ilk blok atlanır ve else bloğu içerisindeki kod çalıştırılır.

- -

Fonksiyonlar

- -

{{Glossary("Function", "Functions")}} Daha sonra kullanmak istediğiniz bir dizi işlemi paketlemeye yarar. Yani ne zaman aynı işlemi yaptırmak isterseniz bu fonksiyonu çağırabilirsiniz. Bu sizin aynı kodları tekrar yazmanızın önüne geçecektir. Örneğin önceden tanımlanmış iki fonksiyon:

- -
    -
  1. - 
    var myVariable = document.querySelector('h1');
    -
    2. -
  2. - 
    alert('hello!');
    -
    3. -
- -

Bu fonksiyonlar, tarayıcıların içerisinde tanımlanmıştır ve istediğiniz zaman kullanabilirsiniz.

- -

Eğer bir ifade görürseniz ve sonrasında parantezler -()- varsa bu büyük ihtimalle bir fonksiyondur. Fonksiyonlar bazen argümanlar alır. {{Glossary("Argument", "arguments")}} Argümanlar, fonksiyonların işlerliğini yerine getirmek için gereksinim duyduğu verilerdir. Eğer birden çok veriye ihtiyaç duyuluyorsa argümanlar virgül ile ayrılır.

- -

Örneğin, alert() fonksiyonu, tarayıcı penceresi içerisinde bir pop-up kutusu gösterir. Ancak biz bu fonksiyona göstermesi için bir String vermeliyiz.

- -

İyi haber, siz de kendi fonksiyonlarınızı tanımlayabilirsiniz. Sıradaki örnekte kendi fonksyionunuzu yazacaksınız, bu fonksiyon aldığı iki argümanı çarparak değelerini döndürür.

- -
function multiply(num1,num2) {
-  var result = num1 * num2;
-  return result;
-}
- -

Üstteki fonksiyonu konsolda tanımlayıp kullanmayı deneyin:

- -
multiply(4,7);
-multiply(20,20);
-multiply(0.5,3);
- -
-

Not: return ifadesi, tarayıcıya, result değişkenini geri döndürmesi gerektiğini gösterir. Bu sayede işlem sonucu fonksiyon dışında kullanılabilir. Bu değişkenlerin tanımlandığı fonksiyonun dışında tanımsız olmasından kaynaklanır. Bu değişken{{Glossary("Scope", "scoping")}} olarak tanımlanır. Değişken tanım aralığı hakkında daha fazla bilgi edinin.

-
- -

Olaylar

- -

Websiteniz ile etkileşimler yaratmak için olaylara ihtiyaç duyarsınız. Bu kod yapıları, tarayıcıda gerçekleşen olayları dinler ve tanımlanan kodları gerektiğinde çağırır. En çok kullanılan örneği tıklama olayıdır, bu olay, fare bir şeye tıkladığında tetiklenir. Örneğin sayfadaki herhangi bir yere tıklandığında ne olacağını aşağıdaki örnek ile düzenleyebilirsiniz.

- -
document.querySelector('html').onclick = function() {
-    alert('Ouch! Stop poking me!');
-}
- -

Bir olayı bir elemente tanımlamanın pek çok değişik yolu vardır. Örneğin yukarı da önce {{htmlelement("html")}} elementi seçtik, ve onclick olayını anonim  (i.e. nameless)  bir fonksiyona atadık. Bu anonim fonksiyon tıklandığında ne olacağını gösteriyor.

- -

Bu örnek

- -
document.querySelector('html').onclick = function() {};
- -

Bunun aynısı.

- -
var myHTML = document.querySelector('html');
-myHTML.onclick = function() {};
- -

Sadece daha kısası.

- -

Web sitemizi harikalaştırmak

- -

Şimdiye kadar Javascript temellerini anlattık. Şimdi örnek websitemize bazı havalı özellkler ekleyelim.

- -

Fotoğraf değiştirici eklemek

- -

Bu örnekte, web sitemize, başka bir fotoğraf ekleyeceğiz ve bu iki imajın tıklandığında değişmesi için bazı Javascript kodları ekleyeceğiz.

- -
    -
  1. Öncelikle web siteniz için aynı boyutlu ya da yakın boyutlarda bir fotoğraf bulun.
    2. -
  2. Bu fotoğrafı images klasörüne ekleyin.
    3. -
  3. Bu resmi 'firefox2.png' (tırnak işaretleri olmadan) olarak yeniden adlandırın.
    4. -
  4.  main.js dosyasını açın ve aşağıdaki kodları ekleyin. (Eğer "Hello world!" kodları hala bu dosyadaysa, silin.) - 
    var myImage = document.querySelector('img');
-
-myImage.onclick = function() {
-    var mySrc = myImage.getAttribute('src');
-    if(mySrc === 'images/firefox-icon.png') {
-      myImage.setAttribute ('src','images/firefox2.png');
-    } else {
-      myImage.setAttribute ('src','images/firefox-icon.png');
-    }
-}
    -
    5. -
  5. Bütün dosyaları kaydedin ve tarayıcınızda index.html dosyasını açın.Şimdi resime tıkladığınızda diğer resime değişmeli.
    6. -
- -

Buraya kadar, img elementimizin src özelliğini myImage değişkeninde saklıyoruz.  Sonra değişkenin onclick olayını bir anonim fonksiyona bağlıyoruz. Artık elemente her tıklandığında:

- -
    -
  1. Fotoğrafın src özelliğini getiriyoruz.
    2. -
  2. İlk görsel ile aynı olup olmadığını anlamak için şartlı kontrol uyguluyoruz. Koşulumuz, src değerinin ilk görselin dosya yoluan eşit olup olmaması. -
      -
    1. Öyleyse, ikinci görsele değiştiriyoruz. Bu sayede {{htmlelement("image")}} elementinin gösterdiği görsel değişiyor.
      2. -
    2. Değilse (yani değiştirdiysek), src değerine orjinal değeri atıyoruz ve bu sayede görsel ilk haline geliyor.
      3. -
    -
    3. -
- -

Kişiselleştirilmiş Merhaba Mesajı Eklemek

- -

Sırada biraz daha kod eklemek var. Kullanıcı siteye ilk girdiğinde sitenin başlığını kişiselleştirilmiş merhaba mesajı ile değiştireceğiz. Bu hoş geldiniz mesajı, kullanıcının siteden ayrılması ve daha sonra geri dönmesi durumunda devam eder - Web Depolama API'sini kullanarak kaydedeceğiz. Ayrıca, kullanıcıyı ve dolayısıyla hoş geldiniz mesajını gerektiğinde değiştirmek için bir seçenek de oluşturacağız.

- -
    -
  1. index.html dosyasında,  {{htmlelement("script")}} elementini aşağıdaki satırdan önce ekleyin. - 
    <button>Change user</button>
    -
    2. -
  2. main.js dosyasına, yazılan kodu olduğu gibi dosyanın en altına ekleyin. Bu kod satırları yeni buton ve başlığı referans alarak değişkenlerin içinde depolar. - 
    var myButton = document.querySelector('button');
-var myHeading = document.querySelector('h1');
    -
    3. -
  3. Kişiselleştirilmiş merhaba'yı eklemek için sıradaki fonksiyonu oluşturun - bu şu anlık hiçbir şey yapmayacak fakat biraz sonra bunu düzelteceğiz. - 
    function setUserName() {
-  var myName = prompt('Please enter your name.');
-  localStorage.setItem('name', myName);
-  myHeading.textContent = 'Mozilla is cool, ' + myName;
-}
    - -

    Bu fonksiyon alert() gibi ekrana bir diyalog kutusu getiren bir prompt() fonksiyonunu içerir. Bu prompt() fonksiyonu kullanıcının bilgi girişi yapmasını ister ve kullanıcı Tamam dediği anda bu bilgiyi bir değişken'de saklar. Bu arada biz kullanıcıdan kendi ismini girmesini istiyoruz. Daha sonra tarayıcı'da bilgi saklamamızı ve daha sonra geri almamızı sağlayan localStorage API'ını çağırıyoruz. Kullanıcıdan aldığımız 'name'   verisini oluşturmak ve saklamak için localStorage'in setItem() fonksiyonunu kullanıyoruz ve kullanıcının girmiş olduğu bu veriyi myName değişkenine atıyoruz. Sonunda, başlığın textContent değişkenini ve kullanıcının saklanmış verisini başlık olarak ayarladık.

    -
    4. -
  4. Next, add this if ... else block — we could call this the initialization code, as it sets up the app when it first loads: - 
    if(!localStorage.getItem('name')) {
-  setUserName();
-} else {
-  var storedName = localStorage.getItem('name');
-  myHeading.textContent = 'Mozilla is cool, ' + storedName;
-}
    - This block first uses the negation operator (logical NOT) to check whether the name data item exists. If not, the setUserName() function is run to create it. If so (that is, the user set it during a previous visit), we retrieve the stored name using getItem() and set the textContent of the heading to a string, plus the user's name, the same as we did inside setUserName().
    5. -
  5. Finally, put the below onclick event handler on the button, so that when clicked the setUserName() function is run. This allows the user to set a new name whenever they want by pressing the button: - 
    myButton.onclick = function() {
-  setUserName();
-}
-
    -
    6. -
- -

Now when you first visit the site, it'll ask you for your username then give you a personalized message. You can then change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, so the personalized message will still be there when you open the site up again!

- -

Sonuç

- -

Eğer yukarıda belirtilen talimatların tamamını uyguladıysanız, aşağıda bulunan görseldeki gibi bir sonuç elde etmiş olmalısınız: (dilerseniz bizim versiyonumuzu da buradan inceleyebilirsiniz)

- -

- -

If you get stuck, you can always compare your work with our finished example code on Github.

- -

Here, we have only really scratched the surface of JavaScript. If you have enjoyed learning about it and want to go deeper with your studies, go to our JavaScript Guide.

- -

{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}

diff --git a/files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 7b7400f21f..0000000000 --- a/files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Web siteniz nasıl görünecek -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like -original_slug: Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

Web siten nasıl görünecek? Bu konu sitenizi kodlamaya başlamadan önce ''Web sitem hangi bilgileri sunacak?'',''Hangi renkleri ve yazı tiplerini kullanacağım?'' ve ''Web sitem ne yapacak?'' gibi konuları ele alarak web sitesi planlamasını ve tasarımını inceler.

-
- -

Herşeyden önce: Planlama

- -

Her ne yapacaksanız önce bazı fikirlere ihtiyacınız var.Siten tam olarak ne yapmalı? Bir web sitesi temel olarak herşeyi yapabilir, fakat ilk denemenizde işlemi basit tutmalısınız . İlk olarak bir başlık, bir resim ve birkaç paragraf içeren basit bir web sitesi oluşturacağız.

- -

Başlangıç olarak bu sorulara cevap bulmalısınız: 

- -
    -
  1. Web siten ne hakkında? Köpekleri, Newyork'u ya da Pacman'i severmisiniz?
    2. -
  2. Temada ne tür bilgiler sunuyorsun? Bir başlık ve birkaç paragraf yaz. Sayfanda göstermek istediğin resimi düşün.
    3. -
  3. Basit ve ileri seviyede terimlerle Web siten nasıl görünecek? Arkaplan rengi ne olacak? Hangi yazı tipi uygun: resmi, çizgi film, kalın ya da ince? 
    4. -
- -
-

Not: Complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. This is sometimes called a design guide or a brand book, and you can see an example at the Firefox OS Guidelines.

-
- -

Tasarımınızın taslağını çıkarmak

- -

Bir kalem ve kağıt alın ve sitenizin nasıl görünmesini istiyorsanız kabaca çizin. İlk basit siteniz için çizecek çok şey yok, ama bunu yapma alışkanlığını şimdi edinmelisiniz. Bu gerçekten yardımcı oluyor. --Van Gogh olmanıza gerek yok!

- -

- -
-

Note: Even on real, complex websites, the design teams usually start out with rough sketches on paper, and later on build digital mockups using a graphics editor or web technologies.

- -

Web teams often include both a graphic designer and a {{Glossary("UX", "user-experience")}} (UX) designer. Graphic designers, obviously, put together the visuals of the website. UX designers have a somewhat more abstract role addressing how users will experience and interact with the website.

-
- -

İçeriği seçmek

- -

Bu noktada, sitenizde görünecek içeriği bir araya getirmeye başlamak iyidir.

- -

Metin

- -

You should still have your paragraphs and title from earlier. Keep these close by.

- -

Theme color

- -

To choose a color, go to the Color Picker and find a color you like. When you click on a color, you'll see a strange six-character code like #660066. That's called a hex(adecimal) code, and represents your color. Copy the code down somewhere safe for now.

- -

- -

Images

- -

To choose an image, go to Google Images and search for something suitable.

- -
    -
  1. When you find the image you want, click on the image.
    2. -
  2. Press the View image button.
    3. -
  3. On the next page, right-click the image (Ctrl + click on a Mac), choose Save Image As..., and choose a safe place to save your image. Alternatively, copy the image's Web address from your browser's address bar for later use.
    4. -
- -

- -

- -
-

Note: Most images on the Web, including in Google Images, are copyrighted. To reduce your likelihood of violating copyright, you can use Google's license filter. Just 1) click on Search tools, then on 2) Usage rights:

- -

-
- -

Font

- -

To choose a font:

- -
    -
  1. Go to Google Fonts and scroll down the list until you find one you like. You can also use the controls on the right to further filter the results.
    2. -
  2. Click the "plus" (Add to) icon next to the font you want.
    3. -
  3. Click the "* Family Selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected).
    4. -
  4. In the popup box, you can see and copy the lines of code Google gives you into your text editor to save for later.
    5. -
- -

- - - -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

diff --git a/files/tr/learn/html/index.html b/files/tr/learn/html/index.html deleted file mode 100644 index 959b1aea51..0000000000 --- a/files/tr/learn/html/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Web'i HTML ile oluşturma -slug: Learn/HTML -tags: - - Başlangıç - - HTML - - Konu - - Kılavuz - - Tanıtım - - Yeni başlayan - - Öğrenmek -translation_of: Learn/HTML -original_slug: Öğren/HTML ---- -
{{LearnSidebar}}
- -

WEB Siteleri kurabilmek için, bir web sayfasının yapısını kuran ve en temel teknoloji olan {{Glossary('HTML')}} bilmelisiniz. HTML, web sayfanızın içeriğinin kullanıcı ekranında nasıl algılanacağını belirler; bir paragraf, liste, başlık, bağlantı, resim, multimedya oynatıcı, form olarak mı yada mevcut diğer birçok öğeden biri veya sizin tanımlayacağınız yeni bir öğe olarak mı anlaşılacağını belirler.

- -

(Front-end) Ön-yüz web tasarımcısı olmak ister misiniz?

- -

Amacınız için çalışmanız gereken tüm gerekli bilgileri içeren bir kurs derledik;

- -

Başlayabilirsiniz..

- -

Başlarken gerekenler.

- -

Konuya başlamadan önce, yeterli düzeyde temel bir bilgisayar kullanıcısı olmalı ve internette bir izleyici olarak gezinebiliyor olmalısınız. Detaylı olarak Installing basic software (yeni yazılım kurulumu) yapabilecek düzeyde temel bir çalışma ortamına sahip olmalı, ve dosya oluşturmayı bilmeli ve dosyaları yönetebilmelisiniz, Dealing with files  (Dosyalarla çalışma) — bunların ikisi de Getting started with the web (web ile çalışmaya başlama) tamamen yeni başlayanlar bölümünde anlatılmıştır.

- -

Tavsiyemiz Getting started with the web (web ile çalışmaya başlama) bölümünü tamamladıktan sonra buradaki başlığa geçmeniz olmasına rağmen bu bir zorunluluk değildir. HTML basics (HTML Temelleri) makalesinde sunulan bilgilerin tamamı Introduction to HTML (HTML'e giriş) bölümünde çok daha detaylı olarak anlatılmaktadır.

- -

HTML öğrendikten sonra, aşağıdaki daha ileri seviye konuları öğrenmeye başlayarak devam edebilirsiniz:

- -
    -
  • CSS, ve bunu HTML'i şekillendirmek için nasıl kullanmalıyız. (Örneğin, kullandığınız metin boyutunu ve yazı tiplerini değiştirin, kenarlıklar ekleyin ve gölgelendirin, sayfanızı birden çok sütunla düzenleyin, animasyonlar ve diğer görsel efektler ekleyin.)
    • -
  • JavaScript, ve bunu web sayfalarına dinamik kullanıcı etkileşimli işlevler eklemek için nasıl kullanmalıyız. (Örneğin, konumunuzu bularak bir haritada üzerinde gösterme, bir düğme ile geçiş yaptığınızda UI elemanlarının görünür/görünmez olmasını sağlamak, kullanıcı bilgilerinin kullanıcı bilgisayarında kaydetme ve daha bir çok uygulama alanı.)
    • -
- -

Bölümler

- -

Bu eğitim başlığı aşağıdaki bölümleri içerir, sırası ile çalışmanız tavsiye edilir. İlk olan ile başlayarak devam etmeniz kesinlikle önemlidir.

- -
-
HTML'e Giriş
-
Sahneyi kurarak başlamamızı sağlayan bu bölüm, 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 (syntax) alıştırarak temel oluşturur.
-
Multimedia ekleme ve yerleştirme (embedding) işlemleri
-
Bu bölüm, bir HTML sayfasına multimedia içeriklerin birkaç farklı yol ile nasıl dahil edileceği, videoların, ses dosyalarının ve hatta başka 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ında tablo verilerini anlaşılabilir, {{glossary("Accessibility", "accessible")}} erişilebilir bir şekilde göstermek zorlayıcıdır. Bu bölüm, temel tablo sözdizimlerini ve tablo başlığı (caption) ve özet bilgi sunumu gibi daha ileri özellikleri anlatır.
-
- -

Genel HTML problemlerinin çözümleri

- -

HTML kullanarak temel problemlerinin çözmek 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ümlere bağlantılar sağlar: başlıklarla çalışmak, resimler veya videolar eklemek, içeriği vurgulamak, temel bir form oluşturmak, vb.

- -

Ayrıca bakınız

- -
-
Web formları
-
Bu bölüm, web formlarının gerekliliklerine tam hakim olmanıza yardım etmek için bir seri makaleleri sunar. Web formları kullanıcılarla karşılıklı etkileşim için çok güçlü bir araçtır ve çoğunlukla kullanıcılardan bilgi toplama, bir kullanıcı arayüzünü kullanmalarına izin verme gibi işlemler için kullanılır. Bununla beraber, tarihi ve teknik sebeplerle, tüm yapabilirliklerini sağlayacak şekilde formları kullanabilmek her zaman açıkça belli değildir. Burada tüm önemli detayları ile web formlarını ele alacağız, formların HTML yapılarını kodlama, form kontrollerini şekilendirme, formda kullanılacak bilginin kontrolü ve bilgiyi ana web server adresine gönderme gibi. 
-
HTML (HyperText Markup Language)
-
MDN'deki HTML başvuru belgeleri için ana giriş noktası, ayrıntılı öğe ve öznitelik referans tanımlamaları dahil olmak üzere - örneğin, eğer bir öğenin hangi özniteliklere sahip olduğunu öğrenmek veya bir özniteliğin hangi değerlere sahip olduğunu bilmek gibi, başlamak için çok iyi bir noktadasınız.
-
diff --git a/files/tr/learn/html/introduction_to_html/getting_started/index.html b/files/tr/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 719024bdc3..0000000000 --- a/files/tr/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,747 +0,0 @@ ---- -title: HTML ile Başlarken -slug: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started -original_slug: Öğren/HTML/Introduction_to_HTML/Başlangıç ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

Senin başlaman için bu makalede HTML'in mutlak temellerini ele alıyoruz . Unsurları, nitelikleri ve duymuş olabileceğiniz diğer tüm önemli terimleri ve bunların dile uygun olanlarını tanımlıyoruz. Ayrıca bir HTML öğesinin nasıl yapılandırıldığını, tipik bir HTML sayfasının nasıl yapılandırıldığını ve diğer önemli temel dil özelliklerini açıklıyoruz. Bu arada, sizin ilginizi çekmek için  HTML ile biraz oynayacağız!

- - - - - - - - - - - - -
Ön Koşullar: -

Temel bilgisayar bilgisi, temel yazılım kurulumu ve dosyalarla çalışma için temel bilgi

-
Hedef:HTML dilini temel olarak tanımak ve birkaç HTML öğesi yazmak için biraz pratik yapmak.
- -

HTML nedir?

- -

{{glossary("HTML")}} (Hypertext Markup Language) bir programlama dili değildir; Tarayıcınıza, ziyaret ettiğiniz web sayfalarının nasıl yapılandırılacağını anlatmak için kullanılan bir işaretleme dilidir. Web geliştiricisinin istediği kadar karmaşık veya basit olabilir. HTML, içeriğin farklı bölümlerini belli bir şekilde görünmesini veya göstermesini sağlamak için sarmak, sarmak veya işaretlemek için kullandığınız bir dizi {{sözlükçe ("Element", "elements")}} dizisinden oluşur. Ekteki {{glossary ("Tag", "tags")}}, web'deki başka bir sayfaya bağlantı kurmak, kelimeleri italikleştirmek vb. İçin köprü içeren bir içerik içerebilir. Örneğin, aşağıdaki içerik satırını kullanın:

- -
My cat is very grumpy
- -

Satırın tek başına durmasını istiyorsak, paragrafın içine paragraf ekleyerek paragraf ({{htmlelement("p")}}) olduğunu belirleyebiliriz 

- -
<p>My cat is very grumpy</p>
- -
-

Not: HTML'deki etiketler büyük / küçük harf duyarsızdır, yani büyük veya küçük harf olarak yazılabilirler. Örneğin, bir {{htmlelement ("title")}} etiketi <title>, <TITLE>, <Title>, <TiTlE>, vb. ile yazılabilir ve düzgün çalışacaktır. Bununla birlikte, en iyi uygulama tutarlılık, okunabilirlik ve diğer nedenlerle tüm etiketleri küçük harflerle yazmaktır.

-
- -

Bir HTML ögesinin anatomisi

- -

Paragraf elemanımızı biraz daha inceleyelim:

- -

- -

Öğemizin ana bölümleri:

- -
    -
  1. Açılış etiketi: Açma ve kapama açılı ayraçlara sarılmış elemanın adından (bu durumda, p) oluşur. Bu, elementin nerede başladığı ya da etkili olmaya başladığı - bu durumda paragrafın başlangıcı olduğu durumları belirtir.
    2. -
  2. Kapama etiketi: Bu, açılış etiketinin aynısıdır, ancak öğe adından önce bir eğik çizgi içermesi dışında. Bu, öğenin nerede bittiğini belirtir - bu durumda paragrafın bittiği yerde. Bir kapanış etiketi eklememek yaygın bir başlangıç ​​hatasıdır ve garip sonuçlara yol açabilir.
    3. -
  3. İçerik: Sadece metin içeren ögemizin içerik unsurudur.
    4. -
  4. Öğe: Açılış etiketi artı kapanış etiketi ve içerik öğeye eşittir.
    5. -
- -

Aktif öğrenme: ilk HTML ögenizi oluşturun

- -

Giriş alanını aşağıdaki satırı <em> ve </em> etiketleriyle sararak düzenleyin (öğeyi açmadan önce <em> ve öğeyi kapatmak için </em> koyun) - bu kodun satıra gerekir  italik vurgu vermelidir! Değişikliklerinizin güncellemesini Çıktı alanında canlı olarak görebilirsiniz.

- -

Bir hata yaparsanız, Sıfırla düğmesini kullanarak her zaman sıfırlayabilirsiniz. Gerçekten sıkışırsanız, cevabı görmek için Çözümü göster düğmesine basın.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

İç içe geçmiş ögeler

- -

Öğeleri başka öğelerin içine de yerleştirebilirsiniz - buna iç içe geçmiş öge denir. Kedimizin çok huysuz olduğunu söylemek istersek, "çok" kelimesini bir {{htmlelement ("strong")}} öğesinin içine koyabiliriz, bu kelimenin güçlü bir şekilde vurgulanması gerektiği anlamına gelir:

- -
<p>My cat is <strong>very</strong> grumpy.</p>
- -

Bununla birlikte, elemanlarınızın uygun şekilde   olduklarından emin olmanız gerekir: yukarıdaki örnekte önce p elementini, sonra güçlü elementi açtık, bu nedenle önce güçlü elementi, sonra p'yi kapatmalıyız. Aşağıdaki yanlış:

- -
<p>My cat is <strong>very grumpy.</p></strong>
- -

Elemanlar doğru açılıp kapanmalıdır, bu yüzden açıkça birbirlerinin içinde veya dışındadırlar. Yukarıdaki gibi çakışırlarsa, web tarayıcınız ne söylemeye çalıştığınızı en iyi şekilde tahmin etmeye çalışır ve beklenmedik sonuçlar elde edebilirsiniz. Öyleyse yapmayın!

- -

Satır içi ögelere karşı blok

- -

HTML'de bilmeniz gereken iki önemli öğe kategorisi vardır. Blok düzeyinde elemanlar ve satır içi elemanlar.

- -
    -
  • Blok düzeyindeki öğeler bir sayfada görünür bir blok oluşturur - ondan önce gelen içerikten yeni bir satırda görünürler ve ondan sonra gelen tüm içerikler de yeni bir satırda görünür. Blok düzeyinde öğeler, sayfadaki, örneğin paragrafları, listeleri, gezinme menülerini, altbilgileri vb. temsil eden yapısal öğeler olma eğilimindedir. Blok düzeyinde bir öğe, satır içi bir öğenin içine yerleştirilmez, ancak içine yerleştirilebilir başka bir blok seviyesi elemanı olabilirler.
    • -
  • Satır içi öğeler, blok düzeyindeki öğeler arasında yer alan ve tüm paragrafları ve içerik gruplarını değil, belgenin içeriğinin yalnızca küçük bölümlerini çevreleyen öğelerdir. Satır içi öğe, belgede yeni bir satır görünmesine neden olmaz; normal olarak bir metin paragrafının içinde görünürler; örneğin, {{htmlelement ("a")}} elementi (köprü) veya {{htmlelement ("em")}} veya {{htmlelement ("strong")}} gibi vurgu öğeleri.
    • -
- -

Aşağıdaki örneği ele alalım:

- -
<em>first</em><em>second</em><em>third</em>
-
-<p>fourth</p><p>fifth</p><p>sixth</p>
-
- -

{{htmlelement ("em")}} bir satır içi öğedir, aşağıda görebileceğiniz gibi, ilk üç öğe, aralarında boşluk olmayan, aynı satırda oturur. Öte yandan, {{htmlelement ("p")}} blok düzeyinde bir öğedir, bu nedenle her öğe yeni bir satırda, her birinin üstünde ve altında boşluk olacak şekilde görünür (boşluk, tarayıcının paragraflara uyguladığı varsayılan CSS stilinden kaynaklanır ).

- -

{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}

- -
-

Not: HTML5, HTML5'deki öğe kategorilerini yeniden tanımladı: bkz. Öğe içeriği kategorileri. Bu tanımlar, daha öncekilerden daha doğru ve daha az belirsiz olsa da, "blok" ve "satır içi" den daha anlaşılması çok daha karmaşık olsa da, bu konu boyunca bunlara sadık kalacağız.

-
- -
-

Not: Bu başlıkta kullanıldığı şekliyle "blok" ve "satır içi" terimleri aynı ada sahip CSS kutularının tipleriyle karıştırılmamalıdır. Varsayılan olarak ilişkilendirilirken, CSS görüntüleme türünü değiştirmek öğenin kategorisini değiştirmez ve hangi öğeleri içerebileceğini ve hangi öğeleri içerebileceğini etkilemez. HTML5'in bu terimleri bırakmasının nedenlerinden biri Bu oldukça yaygın karışıklığı önlemek.

-
- -
-

Note: Blok ve satır içi öğelerin listelerini içeren faydalı referans sayfalarını bulabilirsiniz - bkz. Blok düzeyinde öğeler ve Satır içi öğeler.

-
- -

Boş Ögeler

- -

Tüm elemanlar yukarıdaki açılış etiketi, içerik ve kapanış etiketini takip etmez. Bazı öğeler yalnızca belgeye bir şey eklemek / yerleştirmek için genellikle kullanılan tek bir etiketten oluşur. Örneğin, {{htmlelement ("img")}} öğesi, bir görüntü dosyasını içinde bulunduğu konumda bir sayfaya yerleştirir:

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
- -

Bu, sayfanıza aşağıdakilerin çıktısını verir:

- -

{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Not: Boş elemanlara bazen boş elemanlar da denir.

-
- -

Öznitellikler

- -

Öğelerin ayrıca şuna benzeyen nitelikleri de olabilir:

- -

&amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;lt;/p>

- -

Öznitelikler, gerçek içerikte görünmesini istemediğiniz öğe hakkında ek bilgi içerir. Bu durumda, class niteliği, öğeye daha sonra stil bilgisi ve diğer şeylerle öğeyi hedeflemek için kullanılabilecek bir tanımlayıcı ad vermenizi sağlar.

- -

Bir nitelik şunlara sahip olmalıdır:

- -
    -
  1. Onunla eleman adı arasındaki boşluk (ya da eleman zaten bir ya da daha fazla özniteliğe sahipse, önceki öznitelik).
    2. -
  2. Öznitelik adı, ardından eşit bir işaret.
    3. -
  3. Açma ve kapama alıntı işaretlerinin etrafına sarılmış bir özellik değeri.
    4. -
- -

Aktif öğrenme: Bir elemana nitelikler ekleme

- -

Another example of an element is {{htmlelement("a")}} — this stands for "anchor" and will make the piece of text it wraps around into a hyperlink. This can take a number of attributes, but several are as follows:

- -
    -
  • href: This attribute specifies as its value the web address that you want the link to point to; where the browser navigates to when the link is clicked. For example, href="https://www.mozilla.org/".
    • -
  • title: The title attribute specifies extra information about the link, such as what the page is that you are linking to. For example, title="The Mozilla homepage". This will appear as a tooltip when hovered over.
    • -
  • target: The target attribute specifies the browsing context which will be used to display the link. For example, target="_blank" will display the link in a new tab. If you want to display the link in the current tab just omit this attribute.
    • -
- -

Edit the line below in the Input area to turn it into a link to your favorite website. First, add the <a> element. Second, add the href attribute and the title attribute. Lastly, specify the target attribute to open the link in the new tab. You'll be able to see your changes update live in the Output area. You should see a link that when hovered over displays the title attribute's content, and when clicked navigates to the web address in the href element. Remember that you need to include a space between the element name, and each attribute.

- -

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

- - - -

{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Boolean attributes

- -

You'll sometimes see attributes written without values — this is perfectly allowed. These are called boolean attributes, and they can only have one value, which is generally the same as the attribute name. As an example, take the {{htmlattrxref("disabled", "input")}} attribute, which you can assign to form input elements if you want them to be disabled (greyed out) so the user can't enter any data in them.

- -
<input type="text" disabled="disabled">
- -

As shorthand, it is perfectly allowable to write this as follows (we've also included a non-disabled form input element for reference, to give you more of an idea what is going on):

- -
<!-- using the disabled attribute prevents the end user from entering text into the input box -->
-<input type="text" disabled>
-
-<!-- The user can enter text into the follow input, as it doesn't contain the disabled attribute -->
-<input type="text">
-
- -

The above HTML will give you a rendered output as follows:

- -

{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Omitting quotes around attribute values

- -

When you look around the World Wide Web, you'll come across a number of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the href attribute, like this:

- -
<a href=https://www.mozilla.org/>favorite website</a>
- -

However, as soon as we add the title attribute in this style, things will go wrong:

- -
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>
- -

At this point the browser will misinterpret your markup, thinking that the title attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, Mozilla and homepage. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!

- -

{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.

- -

Single or double quotes?

- -

In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:

- -
<a href="http://www.example.com">A link to my example.</a>
-
-<a href='http://www.example.com'>A link to my example.</a>
- -

You should however make sure you don't mix them together. The following will go wrong!

- -
<a href="http://www.example.com'>A link to my example.</a>
- -

If you've used one type of quote in your HTML, you can include the other type of quote inside your attribute values without causing any problems:

- -
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
- -

However if you want to include a quote within the quotes where both the quotes are of the same type (single quote or double quote), you'll have to use HTML entities for the quotes. For example, this will break:

- -
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
- -

So you need to do this:

- -
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
- -

Anatomy of an HTML document

- -

That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <p>This is my page</p>
-  </body>
-</html>
- -

Here we have:

- -
    -
  1. <!DOCTYPE html>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. They used to look something like this: - - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.
    2. -
  2. <html></html>: The {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.
    3. -
  3. <head></head>: The {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.
    4. -
  4. <meta charset="utf-8">: This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later.
    5. -
  5. <title></title>: The {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.
    6. -
  6. <body></body>: The {{htmlelement("body")}} element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.
    7. -
- -

Active learning: Adding some features to an HTML document

- -

If you want to experiment with writing some HTML on your local computer, you can:

- -
    -
  1. Copy the HTML page example listed above.
    2. -
  2. Create a new file in your text editor.
    3. -
  3. Paste the code into the new text file.
    4. -
  4. Save the file as index.html.
    5. -
- -
-

Note: You can also find this basic HTML template on the MDN Learning Area Github repo.

-
- -

You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:

- -

A simple HTML page that says This is my pageSo in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case). We'd like you to have a go at implementing the following steps:

- -
    -
  • Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <h1> opening tag and </h1> closing tag.
    • -
  • Edit the paragraph content to include some text about something you are interested in.
    • -
  • Make any important words stand out in bold by wrapping them inside a <strong> opening tag and </strong> closing tag.
    • -
  • Add a link to your paragraph, as explained earlier in the article.
    • -
  • Add an image to your document, below the paragraph, as explained earlier in the article. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web).
    • -
- -

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

- - - -

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Whitespace in HTML

- -

In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:

- -
<p>Dogs are silly.</p>
-
-<p>Dogs        are
-         silly.</p>
- -

No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.

- -

Entity references: Including special characters in HTML

- -

In HTML, the characters <, >,",' and & are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less-than sign, and not have it interpreted as code as some browsers may do?

- -

We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semicolon (;).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Literal characterCharacter reference equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

The character reference equivalent could be easily remembered because the words it uses can be seen as less than for '&lt;' , quotation for ' &quot; ' and similarly for each. Do checkout the link to the wikipedia page to find more about entity reference. In the below example, you can see two paragraphs, which are talking about web technologies:

- -
<p>In HTML, you define a paragraph using the <p> element.</p>
-
-<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
- -

In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <p> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.

- -

{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note: A chart of all the available HTML character entity references can be found on Wikipedia: List of XML and HTML character entity references. Note that you don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long as your HTML's character encoding is set to UTF-8.

-
- -

HTML comments

- -

In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.

- -

To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <!-- and -->, for example:

- -
<p>I'm not inside a comment</p>
-
-<!-- <p>I am!</p> -->
- -

As you can see below, the first paragraph appears in the live output, but the second one doesn't.

- -

{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Summary

- -

You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!

- -
-

Note: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or CSS. CSS is the language you use to style your web pages (e.g., changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.

-
- -

See also

- - - -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -
- -

In this module

- - diff --git a/files/tr/learn/html/introduction_to_html/index.html b/files/tr/learn/html/introduction_to_html/index.html deleted file mode 100644 index 55c70ec2fb..0000000000 --- a/files/tr/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Introduction to HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - HTML - - NeedsContent - - NeedsUpdate -translation_of: Learn/HTML/Introduction_to_HTML -original_slug: Öğren/HTML/Introduction_to_HTML ---- -

HTML Özünde, bir belgede farklı anlamlar vermek için metin parçalarına uygulanabilen öğelerden oluşan oldukça basit bir dildir (bir paragraf mı? Madde işaretli bir liste mi? Masanın bir parçası mı?), bir belgeyi mantıksal bölümlere yapılandırın (bir başlığı var mı? Üç içerik sütunu mu? Navigasyon menüsü mü?) ve resim ve video gibi içeriği bir sayfaya gömün. Bu modül, bunlardan ilk ikisini tanıtacak ve HTML'yi anlamak için bilmeniz gereken temel kavramları ve sözdizimini tanıtacaktır.

- -

Ön koşullar

- -

Bu makaleye okumaya başlamadan önce, daha önce herhangi bir HTML bilgisine ihtiyacınız yoktur, ancak bilgisayarları kullanma ve Web'i pasif olarak kullanma konusunda en azından temel bir aşinalık sahibi olmalısınız (yani, sadece ona bakarak, içeriği tüketerek.) Temel yazılımın kurulumunda ayrıntılı olarak ayarlanmış temel bir çalışma ortamına sahip olmanız ve dosyalarla uğraşırken ayrıntılı olarak dosyaların nasıl oluşturulacağını ve yönetileceğini anlamanız gerekir — her ikisi de 0'dan sona web geliştirmeye başlamanın bir parçasıdır.

- -
-

Not : Kendi dosyalarınızı oluşturma imkanına sahip olmadığınız bir Bilgisayar/tablet/başka bir cihazda çalışıyorsanız, JSBin veya Glitch gibi bir çevrimiçi kodlama programında kod örneklerinin çoğunu deneyebilirsiniz.

-
- -

Rehberler

- -

Bu makale, HTML'nin tüm temel teorisini size tanıtacak ve bazı becerileri test etmek için yeterli fırsat sağlayacak aşağıdaki yazıları içerir.

- -
-
-

HTML ile başlarken

- -


-  Başlamak HTML'nin mutlak temellerini kapsar-öğeleri, öznitelikleri ve duymuş olabileceğiniz diğer tüm önemli terimleri dile uydukları yerleri tanımlarız. Ayrıca, bir HTML öğesinin nasıl yapılandırıldığını, tipik bir HTML sayfasının nasıl yapılandırıldığını ve diğer önemli temel dil özelliklerini açıklıyoruz. Yol boyunca, ilginizi çekmek HTML ile bir oyun olacak!

-
-
-

Kafamın içinde ne var? HTML'de meta veriler

-
-

-  Bir HTML belgesinin başı, sayfa yüklendiğinde web tarayıcısında görüntülenmeyen kısımdır. Sayfa {{htmlelement("title")}}, {{glossary("CSS")}} bağlantıları (HTML içeriğinizi CSS ile stilize etmek istiyorsanız), özel faviconlara bağlantılar ve meta veriler gibi bilgileri içerir.)
-
-
-

HTML metin temelleri

- -


-  HTML'nin ana işlerinden biri, tarayıcının doğru şekilde nasıl görüntüleneceğini bilmesi için metin anlamını (semantik olarak da bilinir) vermektir. Bu makalede, bir metin bloğunu başlıklar ve paragraflar yapısına bölmek, kelimelere vurgu/önem eklemek, listeler oluşturmak ve daha fazlasını yapmak için HTML'nin nasıl kullanılacağı ele alınmaktadır.

-
-
-
-

Köprüler oluşturma

- -


-  Köprüler gerçekten önemlidir-Web'i bir web yapan şeydir. Bu makalede, bir bağlantı oluşturmak için gereken sözdizimini gösterir ve Bağlantı en iyi yöntemleri anlatılır.

-
-
-

Gelişmiş metin biçimlendirme

-
-

-  HTML'de, HTML text fundamentals makalesinde bulamadığımız metni biçimlendirmek için başka birçok öğe var. Buradaki unsurlar daha az bilinir, ancak yine de bilmek yararlıdır. Burada, alıntıları, açıklama listelerini, bilgisayar kodunu ve diğer ilgili metinleri, alt simge ve Üst Simge, iletişim bilgilerini ve daha fazlasını işaretleme hakkında bilgi edineceksiniz.
-
-
-

Belge ve web sitesi yapısı

-
-

-  Sayfanızın tek tek bölümlerini ("paragraf" veya "resim" gibi) tanımlamanın yanı sıra, HTML web sitenizin alanlarını ("başlık", "gezinme menüsü", "ana içerik sütunu"gibi) tanımlamak için de kullanılır.) Bu makale, temel bir web sitesi yapısını nasıl planlayacağınızı ve bu yapıyı temsil etmek için HTML'yi nasıl yazacağınızı inceler.
-
-
-

HTML hata ayıklama

-
-

-  HTML yazmak iyidir, ancak bir şeyler ters giderse ve koddaki hatanın nerede olduğunu çözemezseniz ne olur? Bu makale size yardımcı olabilecek bazı araçları tanıtacaktır.
-
- -

Değerlendirmeler

- -

Aşağıdaki değerlendirmeler, yukarıdaki kılavuzlarda yer alan HTML temellerini anlamanızı test edecektir.

- -

Bir mektubu işaretleme

- -


-  Hepimiz er ya da geç bir mektup yazmayı öğreniyoruz; aynı zamanda metin biçimlendirme becerilerimizi test etmek için yararlı bir örnektir! Bu nedenle, bu değerlendirmede işaretlemek için bir mektup verilecektir.

- -


- İçerik sayfasını yapılandırma

- -


-  Bu değerlendirme, üstbilgi, altbilgi, gezinme menüsü, ana içerik ve Kenar Çubuğu içeren basit bir içerik sayfasını yapılandırmak için HTML'yi kullanma yeteneğinizi test eder.

- -

Ayrıca bakınız

- -
-
-

Web okuryazarlığı temelleri 1

-
-

-  HTML modülüne giriş bölümünde konuşulan becerilerin çoğunu araştıran ve test eden mükemmel bir Mozilla Vakfı kursu. Öğrenciler bu altı bölümlü modülde çevrimiçi okuma, yazma ve katılım hakkında bilgi edinirler. Üretim ve işbirliği yoluyla Web'in temellerini keşfedin.
-
diff --git a/files/tr/learn/index.html b/files/tr/learn/index.html deleted file mode 100644 index 466edae5b2..0000000000 --- a/files/tr/learn/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Web Programlama Öğren -slug: Learn -tags: - - öğren -translation_of: Learn -original_slug: Öğren ---- -
-

{{LearnSidebar}}

- -

MDN öğrenme alanına hoşgeldiniz. Buradaki bir dizi makale tamamen yeni başlayanlar için web sayfaları kodlayabilmeleri için gerekli temel bilgileri vermeyi amaçlamaktadır.

- -

Bu alanın amacı okuyucuyu "başlangıç" seviyesinden "uzman" seviyesine ulaştırmak değildir, ama "başlangıç" seviyesinden "anlama rahatlığı" seviyesine taşımaktır. Sonrasında, MDN kaynağının geriye kalanından ya da ön bilgi gerektiren diğer orta veya ileri seviye kaynaklardan öğrenerek kendi yolunuzu çizebilirsiniz.

- -

Bu alanda tamamen yeni iseniz, web geliştiriciliği biraz zorlayıcı olabilir. Bu  nedenle, elinizden tutup, konuları doğru biçimde öğrenmeniz ve kendinizi rahat hissetmeniz için gerekli ayrıntıları sağlayacağız. Web geliştirmeyi öğrenen bir öğrenci (kendi kendine ya da sınıf içinde öğrenen) , kaynak araştıran bir öğretmen, amatör, ya da sadece web teknolojileri hakkında daha fazla bilgi edinmek isteyen biri olsanız da kendinizi evinizde hissetmelisiniz.

- -
-

Yenilikler Neler?

- -

Öğrenme alanındaki içerik düzenli olarak eklenmektedir. Yapılan değişikleri takip edebilmeniz için yayın notları kısmını başlattık. — sıksık tekrar gelip kontrol etmenizi öneririz!

- -

Eğer eksik olduğunuz düşündüğünüz, ya da işlenmediğini düşündüğünüz herhangi bir konu hakkında sorularınız varsa Discourse forumundan soru sorabilirsiniz.

- -

Front-end web geliştiricisi mi olmak istiyorsunuz?

- -

Hedefinize ulaşmanız için gereken önemli tüm bilgileri içeren kursu oluşturduk.

- -

Hadi Başlayalım

-
- -

Nereden Başlamalı?

- -
    -
  • Tamamen Yeniyim: - -

    Eğer web geliştirimine tamamen yeni iseniz Web geliştirmeye başlangıç bölümünden pratik bir şekilde başlangıç yapabilirsiniz.

    -
    • -
  • Bazı Sorularım Var! -

    Eğer, aklınızda bir takım sorular varsa ve bunlara cevap arıyorsanız Genel sorular kısmına göz atabilirsiniz.

    -
    • -
  • Temelerin Ötesinde: -

    Eğer temeller haknda yeterince bilgi sahibi iseniz skıonraki adım {{glossary("HTML")}} ve {{glossary("CSS")}} konularını öğrenmek olabilir. Bunun için HTML'e Giriş Bölümü ile başlayıp CSS İlk Adımlar etkinliği ile devam edebilirsiniz.

    -
    • -
  • Betik Kodlamaya Geçiş: -

    Eğer HTML ve CSS ile sorunlarınızı halletiniz ise ya da daha çok kodlama ile ilgili iseniz, muhtemelen {{glossary("JavaScript")}} ya da sunucu taraflı kodlamaya geçebilirsiniz. If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move on to {{glossary("JavaScript")}} or server-side development. Begin with our JavaScript first steps and Server-side first steps modules.

    -
    • -
- -
-

Not: Gelecekte daha fazla öğrenme yolu yayınlamayı düşünüyoruz. Örneğin spesifik gelişmiş teknikler öğrenecek deneyimli geliştiriciler, Web'de yeni olan geliştiriciler veya tasarım tekniklerini öğrenmek isteyen insanlar için.

-
- -

{{LearnBox({"title":"Hızlı öğrenme: Kelime hazinesi"})}}

- -

Diğer insanlarla birlikte öğren

- -

Eğer bir sorunuz varsa veya halen ne yapmanız gerektiğini merak ediyorsanız, Mozilla size yardım etmekten mutluluk duyacak akıl hocaları ve ögretmenler içeren web tutkunlarından oluşan global bir topluluktur. Onlarla WebMaker aracılığıyla iletişim kurun:

- - - -

Bildiklerini paylaş

- -

Bütün bu öğrenme alanı katkıda bulunan insanlar tarafından oluşturulmuştur. Yeni başlayan, öğretmen veya yetenekli bir web geliştirici de olsanız, size takımımızda ihtiyacımız var. Eğer ilgileniyorsanız, nasıl yardım edebilirim'e bir göz atın, ve sizi bizimle bizimle sohbet etmeniz için mail listelerimize ve IRC kanallarına davet ediyoruz. :)

- -
-
EXLskills 
-
Rehberlik ve proje tabanlı öğrenim ile teknoloji becerilerini öğrenmek için ücretsiz ve açık kurslar
-
- - - -
    -
  1. Getting started with the web
    2. -
  2. Learn the web -
      -
    1. Web Literacy Map
      2. -
    2. Web mechanics
      3. -
    3. Infrastructure
      4. -
    4. Coding & Scripting
      5. -
    5. Design & Accessibility
      6. -
    6. Writing & planning
      7. -
    -
    3. -
  3. Learn technologies -
      -
    1. HTML
      2. -
    2. CSS
      3. -
    3. JavaScript
      4. -
    4. Python
      5. -
    -
    4. -
  4. Learning tutorials -
      -
    1. How to build a web site?
      2. -
    2. Information security basics
      3. -
    -
    5. -
  5. Learning resources
    6. -
  6. Getting help -
      -
    1. FAQ
      2. -
    2. Glossary
      3. -
    3. Ask your questions
      4. -
    4. Meet teachers and mentors
      5. -
    -
    7. -
  7. How to contribute
    8. -
diff --git a/files/tr/learn/javascript/first_steps/a_first_splash/index.html b/files/tr/learn/javascript/first_steps/a_first_splash/index.html deleted file mode 100644 index 1ef591995a..0000000000 --- a/files/tr/learn/javascript/first_steps/a_first_splash/index.html +++ /dev/null @@ -1,601 +0,0 @@ ---- -title: Javascript'e ilk giriş -slug: Learn/JavaScript/First_steps/A_first_splash -translation_of: Learn/JavaScript/First_steps/A_first_splash -original_slug: Öğren/JavaScript/First_steps/Javascripte_giris ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
- -

Artık JavaScript teorisi ve onunla neler yapabileceğiniz hakkında bir şeyler öğrendiniz, tamamen pratik bir öğretici aracılığıyla size JavaScript'in temel özellikleri hakkında hızlandırılmış bir kurs vereceğiz. Burada adım adım basit bir "Sayıyı tahmin et" oyunu oluşturacaksınız.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To have a first bit of experience at writing some JavaScript, and gain at least a basic understanding of what writing a JavaScript program involves.
- -

You won't be expected to understand all of the code in detail immediately — we just want to introduce you to the high-level concepts for now, and give you an idea of how JavaScript (and other programming languages) work. In subsequent articles, you'll revisit all these features in a lot more detail!

- -
-

Note: Many of the code features you'll see in JavaScript are the same as in other programming languages — functions, loops, etc. The code syntax looks different, but the concepts are still largely the same.

-
- -

Thinking like a programmer

- -

One of the hardest things to learn in programming is not the syntax you need to learn, but how to apply it to solve real world problems. You need to start thinking like a programmer — this generally involves looking at descriptions of what your program needs to do, working out what code features are needed to achieve those things, and how to make them work together.

- -

This requires a mixture of hard work, experience with the programming syntax, and practice — plus a bit of creativity. The more you code, the better you'll get at it. We can't promise that you'll develop "programmer brain" in five minutes, but we will give you plenty of opportunity to practice thinking like a programmer throughout the course.

- -

With that in mind, let's look at the example we'll be building up in this article, and review the general process of dissecting it into tangible tasks.

- -

Example — Guess the number game

- -

In this article we'll show you how to build up the simple game you can see below:

- - - -

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

- -

Have a go at playing it — familiarize yourself with the game before you move on.

- -

Let's imagine your boss has given you the following brief for creating this game:

- -
-

I want you to create a simple guess the number type game. It should choose a random number between 1 and 100, then challenge the player to guess the number in 10 turns. After each turn the player should be told if they are right or wrong, and if they are wrong, whether the guess was too low or too high. It should also tell the player what numbers they previously guessed. The game will end once the player guesses correctly, or once they run out of turns. When the game ends, the player should be given an option to start playing again.

-
- -

Upon looking at this brief, the first thing we can do is to start breaking it down into simple actionable tasks, in as much of a programmer mindset as possible:

- -
    -
  1. Generate a random number between 1 and 100.
    2. -
  2. Record the turn number the player is on. Start it on 1.
    3. -
  3. Provide the player with a way to guess what the number is.
    4. -
  4. Once a guess has been submitted first record it somewhere so the user can see their previous guesses.
    5. -
  5. Next, check whether it is the correct number.
    6. -
  6. If it is correct: -
      -
    1. Display congratulations message.
      2. -
    2. Stop the player from being able to enter more guesses (this would mess the game up).
      3. -
    3. Display control allowing the player to restart the game.
      4. -
    -
    7. -
  7. If it is wrong and the player has turns left: -
      -
    1. Tell the player they are wrong.
      2. -
    2. Allow them to enter another guess.
      3. -
    3. Increment the turn number by 1.
      4. -
    -
    8. -
  8. If it is wrong and the player has no turns left: -
      -
    1. Tell the player it is game over.
      2. -
    2. Stop the player from being able to enter more guesses (this would mess the game up).
      3. -
    3. Display control allowing the player to restart the game.
      4. -
    -
    9. -
  9. Once the game restarts, make sure the game logic and UI are completely reset, then go back to step 1.
    10. -
- -

Let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.

- -

Initial setup

- -

To begin this tutorial, we'd like you to make a local copy of the number-guessing-game-start.html file (see it live here). Open it in both your text editor and your web browser. At the moment you'll see a simple heading, paragraph of instructions and form for entering a guess, but the form won't currently do anything.

- -

The place where we'll be adding all our code is inside the {{htmlelement("script")}} element at the bottom of the HTML:

- -
<script>
-
-  // Your JavaScript goes here
-
-</script>
-
- -

Adding variables to store our data

- -

Let's get started. First of all, add the following lines inside your {{htmlelement("script")}} element:

- -
let randomNumber = Math.floor(Math.random() * 100) + 1;
-
-const guesses = document.querySelector('.guesses');
-const lastResult = document.querySelector('.lastResult');
-const lowOrHi = document.querySelector('.lowOrHi');
-
-const guessSubmit = document.querySelector('.guessSubmit');
-const guessField = document.querySelector('.guessField');
-
-let guessCount = 1;
-let resetButton;
- -

This section of the code sets up the variables and constants we need to store the data our program will use. Variables are basically containers for values (such as numbers, or strings of text). You create a variable with the keyword let (or var) followed by a name for your variable (you'll read more about the difference between the keywords in a future article). Constants are used to store values that are immutable or can't be changed and are created with the keyword const. In this case, we are using constants to store references to parts of our user interface; the text inside some of them might change, but the HTML elements referenced stay the same.

- -

You can assign a value to your variable or constant with an equals sign (=) followed by the value you want to give it.

- -

In our example:

- -
    -
  • The first variable — randomNumber — is assigned a random number between 1 and 100, calculated using a mathematical algorithm.
    • -
  • The first three constants are each made to store a reference to the results paragraphs in our HTML, and are used to insert values into the paragraphs later on in the code (note how they are inside a <div> element, which is itself used to select all three later on for resetting, when we restart the game): - 
    <div class="resultParas">
-  <p class="guesses"></p>
-  <p class="lastResult"></p>
-  <p class="lowOrHi"></p>
-</div>
-
    -
    • -
  • The next two constants store references to the form text input and submit button and are used to control submitting the guess later on. - 
    <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
-<input type="submit" value="Submit guess" class="guessSubmit">
    -
    • -
  • Our final two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later).
    • -
- -
-

Note: You'll learn a lot more about variables/constants later on in the course, starting with the next article.

-
- -

Functions

- -

Next, add the following below your previous JavaScript:

- -
function checkGuess() {
-  alert('I am a placeholder');
-}
- -

Functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. This is really useful. There are a number of ways to define functions, but for now we'll concentrate on one simple type. Here we have defined a function by using the keyword function, followed by a name, with parentheses put after it. After that we put two curly braces ({ }). Inside the curly braces goes all the code that we want to run whenever we call the function.

- -

When we want to run the code, we type the name of the function followed by the parentheses.

- -

Let's try that now. Save your code and refresh the page in your browser. Then go into the developer tools JavaScript console, and enter the following line:

- -
checkGuess();
- -

After pressing Return/Enter, you should see an alert come up that says "I am a placeholder"; we have defined a function in our code that creates an alert whenever we call it.

- -
-

Note: You'll learn a lot more about functions later in the course.

-
- -

Operators

- -

JavaScript operators allow us to perform tests, do math, join strings together, and other such things.

- -

If you haven't already done so, save your code, refresh the page in your browser, and open the developer tools JavaScript console. Then we can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing Return/Enter after each one, and see what results they return.

- -

First let's look at arithmetic operators, for example:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
+Addition6 + 9
-Subtraction20 - 15
*Multiplication3 * 7
/Division10 / 5
- -

You can also use the + operator to join text strings together (in programming, this is called concatenation). Try entering the following lines, one at a time:

- -
let name = 'Bingo';
-name;
-let hello = ' says hello!';
-hello;
-let greeting = name + hello;
-greeting;
- -

There are also some shortcut operators available, called augmented assignment operators. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:

- -
name += ' says hello!';
- -

This is equivalent to

- -
name = name + ' says hello!';
- -

When we are running true/false tests (for example inside conditionals — see {{anch("Conditionals", "below")}}) we use comparison operators. For example:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
===Strict equality (is it exactly the same?) - 
-5 === 2 + 4 // false
-'Chris' === 'Bob' // false
-5 === 2 + 3 // true
-2 === '2' // false; number versus string
-
-
!==Non-equality (is it not the same?) - 
-5 !== 2 + 4 // true
-'Chris' !== 'Bob' // true
-5 !== 2 + 3 // false
-2 !== '2' // true; number versus string
-
-
<Less than - 
-6 < 10 // true
-20 < 10 // false
-
>Greater than - 
-6 > 10 // false
-20 > 10  // true
-
- -

Conditionals

- -

Returning to our checkGuess() function, I think it's safe to say that we don't want it to just spit out a placeholder message. We want it to check whether a player's guess is correct or not, and respond appropriately.

- -

At this point, replace your current checkGuess() function with this version instead:

- -
function checkGuess() {
-  let userGuess = Number(guessField.value);
-  if (guessCount === 1) {
-    guesses.textContent = 'Previous guesses: ';
-  }
-  guesses.textContent += userGuess + ' ';
-
-  if (userGuess === randomNumber) {
-    lastResult.textContent = 'Congratulations! You got it right!';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
-    setGameOver();
-  } else if (guessCount === 10) {
-    lastResult.textContent = '!!!GAME OVER!!!';
-    setGameOver();
-  } else {
-    lastResult.textContent = 'Wrong!';
-    lastResult.style.backgroundColor = 'red';
-    if(userGuess < randomNumber) {
-      lowOrHi.textContent = 'Last guess was too low!';
-    } else if(userGuess > randomNumber) {
-      lowOrHi.textContent = 'Last guess was too high!';
-    }
-  }
-
-  guessCount++;
-  guessField.value = '';
-  guessField.focus();
-}
- -

This is a lot of code — phew! Let's go through each section and explain what it does.

- -
    -
  • The first line (line 2 above) declares a variable called userGuess and sets its value to the current value entered inside the text field. We also run this value through the built-in Number() constructor, just to make sure the value is definitely a number.
    • -
  • Next, we encounter our first conditional code block (lines 3–5 above). A conditional code block allows you to run code selectively, depending on whether a certain condition is true or not. It looks a bit like a function, but it isn't. The simplest form of conditional block starts with the keyword if, then some parentheses, then some curly braces. Inside the parentheses we include a test. If the test returns true, we run the code inside the curly braces. If not, we don't, and move on to the next bit of code. In this case the test is testing whether the guessCount variable is equal to 1 (i.e. whether this is the player's first go or not): - 
    guessCount === 1
    - If it is, we make the guesses paragraph's text content equal to "Previous guesses: ". If not, we don't.
    • -
  • Line 6 appends the current userGuess value onto the end of the guesses paragraph, plus a blank space so there will be a space between each guess shown.
    • -
  • The next block (lines 8–24 above) does a few checks: -
      -
    • The first if(){ } checks whether the user's guess is equal to the randomNumber set at the top of our JavaScript. If it is, the player has guessed correctly and the game is won, so we show the player a congratulations message with a nice green color, clear the contents of the Low/High guess information box, and run a function called setGameOver(), which we'll discuss later.
      • -
    • Now we've chained another test onto the end of the last one using an else if(){ } structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message.
      • -
    • The final block chained onto the end of this code (the else { }) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower.
      • -
    -
    • -
  • The last three lines in the function (lines 26–28 above) get us ready for the next guess to be submitted. We add 1 to the guessCount variable so the player uses up their turn (++ is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.
    • -
- -

Events

- -

At this point we have a nicely implemented checkGuess() function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an event. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called event listeners, and the blocks of code that run in response to the event firing are called event handlers.

- -

Add the following line below your checkGuess() function:

- -
guessSubmit.addEventListener('click', checkGuess);
- -

Here we are adding an event listener to the guessSubmit button. This is a method that takes two input values (called arguments) — the type of event we are listening out for (in this case click) as a string, and the code we want to run when the event occurs (in this case the checkGuess() function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}.

- -

Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the setGameOver() function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.

- -

Finishing the game functionality

- -

Let's add that setGameOver() function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:

- -
function setGameOver() {
-  guessField.disabled = true;
-  guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = 'Start new game';
-  document.body.append(resetButton);
-  resetButton.addEventListener('click', resetGame);
-}
- -
    -
  • The first two lines disable the form text input and button by setting their disabled properties to true. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.
    • -
  • The next three lines generate a new {{htmlelement("button")}} element, set its text label to "Start new game", and add it to the bottom of our existing HTML.
    • -
  • The final line sets an event listener on our new button so that when it is clicked, a function called resetGame() is run.
    • -
- -

Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:

- -
function resetGame() {
-  guessCount = 1;
-
-  const resetParas = document.querySelectorAll('.resultParas p');
-  for (let i = 0 ; i < resetParas.length ; i++) {
-    resetParas[i].textContent = '';
-  }
-
-  resetButton.parentNode.removeChild(resetButton);
-
-  guessField.disabled = false;
-  guessSubmit.disabled = false;
-  guessField.value = '';
-  guessField.focus();
-
-  lastResult.style.backgroundColor = 'white';
-
-  randomNumber = Math.floor(Math.random() * 100) + 1;
-}
- -

This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:

- -
    -
  • Puts the guessCount back down to 1.
    • -
  • Empties all the text out of the information paragraphs. We select all paragraphs inside <div class="resultParas"></div>, then loop through each one, setting their textContent to '' (an empty string).
    • -
  • Removes the reset button from our code.
    • -
  • Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.
    • -
  • Removes the background color from the lastResult paragraph.
    • -
  • Generates a new random number so that you are not just guessing the same number again!
    • -
- -

At this point you should have a fully working (simple) game — congratulations!

- -

All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.

- -

Loops

- -

One part of the above code that we need to take a more detailed look at is the for loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.

- -

To start with, go to your browser developer tools JavaScript console again, and enter the following:

- -
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
- -

What happened? The numbers 1 to 20 were printed out in your console. This is because of the loop. A for loop takes three input values (arguments):

- -
    -
  1. A starting value: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter i with any name you like too, but i is used as a convention because it's short and easy to remember.
    2. -
  2. A condition: Here we have specified i < 21 — the loop will keep going until i is no longer less than 21. When i reaches 21, the loop will no longer run.
    3. -
  3. An incrementor: We have specified i++, which means "add 1 to i". The loop will run once for every value of i, until i reaches a value of 21 (as discussed above). In this case, we are simply printing the value of i out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.
    4. -
- -

Now let's look at the loop in our number guessing game — the following can be found inside the resetGame() function:

- -
const resetParas = document.querySelectorAll('.resultParas p');
-for (let i = 0 ; i < resetParas.length ; i++) {
-  resetParas[i].textContent = '';
-}
- -

This code creates a variable containing a list of all the paragraphs inside <div class="resultParas"> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.

- -

A small discussion on objects

- -

Let's add one more final improvement before we get to this discussion. Add the following line just below the let resetButton; line near the top of your JavaScript, then save your file:

- -
guessField.focus();
- -

This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.

- -

Let's analyze what's going on here in a bit more detail. In JavaScript, most of the items you will manipulate in your code are objects. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.

- -

In this particular case, we first created a guessField constant that stores a reference to the text input form field in our HTML — the following line can be found amongst our declarations near the top of the code:

- -
const guessField = document.querySelector('.guessField');
- -

To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.

- -

Because guessField now contains a reference to an {{htmlelement("input")}} element, it now has access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:

- -
guessField.focus();
- -

Variables that don't contain references to form elements won't have focus() available to them. For example, the guesses constant contains a reference to a {{htmlelement("p")}} element, and the guessCount variable contains a number.

- -

Playing with browser objects

- -

Let's play with some browser objects a bit.

- -
    -
  1. First of all, open up your program in a browser.
    2. -
  2. Next, open your browser developer tools, and make sure the JavaScript console tab is open.
    3. -
  3. Type guessField into the console and the console shows you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!
    4. -
  4. Now type in the following: - 
    guessField.value = 'Hello';
    - The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!
    5. -
  5. Now try typing guesses into the console and pressing return. The console shows you that the variable contains a {{htmlelement("p")}} element.
    6. -
  6. Now try entering the following line: - 
    guesses.value
    - The browser returns undefined, because paragraphs don't have the value property.
    7. -
  7. To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: - 
    guesses.textContent = 'Where is my paragraph?';
    -
    8. -
  8. Now for some fun stuff. Try entering the below lines, one by one: - 
    guesses.style.backgroundColor = 'yellow';
-guesses.style.fontSize = '200%';
-guesses.style.padding = '10px';
-guesses.style.boxShadow = '3px 3px 6px black';
    - Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
    9. -
- -

Finished for now...

- -

So that's it for building the example. You got to the end — well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/tr/learn/javascript/first_steps/index.html b/files/tr/learn/javascript/first_steps/index.html deleted file mode 100644 index 3c6821d3e6..0000000000 --- a/files/tr/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: JavaScript First Steps -slug: Learn/JavaScript/First_steps -tags: - - türkçe -translation_of: Learn/JavaScript/First_steps -original_slug: Öğren/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key building blocks in detail, such as variables, strings, numbers and arrays.

- -

Prerequisites

- -

Before starting this module, you don't need any previous JavaScript knowledge, but you should have some familiarity with HTML and CSS. You are advised to work through the following modules before starting on JavaScript:

- - - -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

-
- -

Guides

- -
-
What is JavaScript?
-
Welcome to the MDN beginner's JavaScript course! In this first article we will look at JavaScript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with JavaScript's purpose.
-
A first splash into JavaScript
-
Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.
-
What went wrong? Troubleshooting JavaScript
-
When you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in JavaScript programs.
-
Storing the information you need — Variables
-
After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables.
-
Basic math in JavaScript — numbers and operators
-
At this point in the course we discuss maths in JavaScript — how we can combine operators and other features to successfully manipulate numbers to do our bidding.
-
Handling text — strings in JavaScript
-
Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.
-
Useful string methods
-
Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
-
Arrays
-
In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.
-
- -

Assessments

- -

The following assessment will test your understanding of the JavaScript basics covered in the guides above.

- -
-
Silly story generator
-
In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!
-
- -

See also

- -
-
Learn JavaScript
-
An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.
-
diff --git a/files/tr/learn/javascript/index.html b/files/tr/learn/javascript/index.html deleted file mode 100644 index 902b39d8c4..0000000000 --- a/files/tr/learn/javascript/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: JavaScript -slug: Learn/JavaScript -translation_of: Learn/JavaScript -original_slug: Öğren/JavaScript ---- -
{{LearnSidebar}}
- -

{{Glossary("JavaScript")}} web sayfalarında karmaşık şeyler yapmanıza olanak sağlayan bir programlama dilidir. Ne zaman bir web sayfası ekranınızda sabit durup ve size sabit bilgiler sunmanın fazlasını yaptığında, zaman zaman size içerik güncellemeleri, ya da etkileşilimli haritalar, ya da animasyonlu iki ve üç boyutlu grafikler, ya da kayan video müzik kutuları vs. gösterdiğinde, JavaScript'in muhtemelen bu işe dahil olduğundan emin olabilirsiniz.

- -

Öğrenme yolu

- -

JavaScript'i öğrenmek ilgili teknolojiler olan HTML ve CSS'e kıyasla daha zor olabilir. JavaScript'i öğrenmeye başlamadan önce, bu iki teknolojiye ve belki diğer benzer teknolojilere aşina olmanız şiddetle önerilir. Aşağıdaki modüllerle işe başlayabilirsiniz:

- - - -

Ayrıca diğer programlama dilleriyle önceden edindiğiniz tecrübelerin size yardımı dokunacaktır.

- -

JavaScript'in temellerine aşina olduktan sonra, daha ileri seviyedeki konuları öğrenmeye başlayabilirsiniz, örneğin:

- - - -

Modüller

- -

Bu konu, önerilen çalışma sırasıyla, aşağıdaki modülleri içerir.

- -
-
JavaScript ilk adımlar
-
İlk JavaScript modülümüzde, sizi ilk JavaScript yazma tecrübesine götürmedeen önce, ilk olarak "JavaScript nedir?", "Neye benzer?", ve "Neler yapabilir?" gibi temel sorulara cevap veriyoruz. Daha sonra, değişkenler, harf dizileri, sayılar ve diziler gibi temel JavaScript özelliklerini detaylı bir şekilde tartışıyoruz.
-
JavaScript yapı taşları
-
Bu modülde, JavaScript'in tüm temel özelliklerini ele almaya devam ederek dikkatimizi koşullu ifadeler, döngüler, işlevler ve olaylar gibi sık karşılaşılan kod bloğu türlerine çeviriyoruz. Bunları zaten kursta gördünüz, ancak yalnızca yüzeysel - burada hepsini açıkça tartışacağız.
-
JavaScript nesnelerine giriş
-
JavaScript'te, dizeler ve diziler gibi temel JavaScript özelliklerinden, JavaScript üzerine oluşturulan tarayıcı API'lerine kadar çoğu şey nesnelerdir. İlgili işlevleri ve değişkenleri verimli paketler halinde kapsüllemek için kendi nesnelerinizi bile oluşturabilirsiniz. Dil bilginizle daha ileri gitmek ve daha verimli kod yazmak istiyorsanız JavaScript'in nesne yönelimli doğasını anlamak önemlidir, bu nedenle size yardımcı olmak için bu modülü sağladık. Burada nesne teorisini ve sözdizimini ayrıntılı olarak öğretiyor, kendi nesnelerinizi nasıl yaratacağınıza bakıyoruz ve JSON verilerinin ne olduğunu ve onunla nasıl çalışılacağını açıklıyoruz.
-
Asenkron JavaScript
-
-

Bu modülde asenkron JavaScript'e, bunun neden önemli olduğuna ve bir sunucudan kaynakların alınması gibi olası engelleme işlemlerini etkili bir şekilde idare etmek için nasıl kullanılabileceğine bir göz atacağız.

-
-
-
İstemci tarafı web API'leri
-
When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work.
-
- -

See also

- -
-
JavaScript on MDN
-
The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.
-
Coding math
-
An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by Keith Peters.
-
diff --git a/files/tr/learn/javascript/objects/basics/index.html b/files/tr/learn/javascript/objects/basics/index.html deleted file mode 100644 index e0ba47ca07..0000000000 --- a/files/tr/learn/javascript/objects/basics/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: JavaScript object basics -slug: Learn/JavaScript/Objects/Basics -translation_of: Learn/JavaScript/Objects/Basics -original_slug: Öğren/JavaScript/Objeler/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

Bu makalede JavaScript'in nesne sözdizim kurallarını inceleyeceğiz ve daha önceden gördüğümüz diğer özellikleri ziyaret edip bu işlevlerin aslında bir nesne olduğunu tekrar edeceğiz.

- - - - - - - - - - - - -
Gereksinimler:Temel bilgisayar okuryazarlığı, temel HMTL ve CSS bilgisi ve JavaScript temelleri (İlk adımlar ve yapı taşları)
Amaç:Nesneye yönelik programlama ile ilgili temel teoriyi anlamak ve bunun JavaScript'teki ("Javascript'te birçok şey nesnedir") sözü ile ilişkisini keşfetmek ve JavaScript nesneleri ile çalışmak.
- -

Nesne temelleri

- -

Bir nesne birtakım ilişkili veri ve/veya fonksiyonalite (genellikle birden fazla değişken ve fonksiyondan oluşur — ve bunlar nesne içerisinde olduklarında nesnenin niteliği (property) ve fonksiyonları adını alırlar.) Bir örnek üzerinde çalışarak nasıl olduklarını anlayalım.

- -

Başlamak için oojs.html dosyasını kopyalayın. Bu dosya çok küçük bir içeriğe sahip —  bir {{HTMLElement("script")}} elementi içine kaynak kodumuzu yazacağız. Bunu temel nesne sözdizimini anlamak için baz alacağız. Bu örnek üzerinde çalışırken geliştirici JavaScript konsolunu açık ve komutları yazmaya hazır şekilde tutun.

- -

Nesne oluşturmak, Javascript'te bir çok konuda olduğu gibi bir değişken tanımlamak ile başlar.  Aşağıdaki Javascript kodunu dosyasına kopyalayarak dosyayı kaydedin ve tarayıcınızı yenileyin.

- -
const person = {};
- -

Şimdi tarayıcınızın JavaScript konsolunu açın, person yazın, ve Enter/Return tuşlarına basın. Aşağıdaki satırlara benzer açıklamalar ile karşılaşacaksınız. 

- -
[object Object]
-Object { }
-{ }
-
- -

Congratulations, you've just created your first object. Job done! But this is an empty object, so we can't really do much with it. Let's update the JavaScript object in our file to look like this:

- -
const person = {
-  name: ['Bob', 'Smith'],
-  age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:

- -
person.name
-person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
- -

You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!

- -
-

Note: If you are having trouble getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.

-
- -

So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['Bob', 'Smith'] and 32). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:

- -
const objectName = {
-  member1Name: member1Value,
-  member2Name: member2Value,
-  member3Name: member3Value
-};
- -

The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods.

- -

An object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.

- -

It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.

- -

Dot notation

- -

Above, you accessed the object's properties and methods using dot notation. The object name (person) acts as the namespace — it must be entered first to access anything encapsulated inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:

- -
person.age
-person.interests[1]
-person.bio()
- -

Sub-namespaces

- -

It is even possible to make the value of an object member another object. For example, try changing the name member from

- -
name: ['Bob', 'Smith'],
- -

to

- -
name : {
-  first: 'Bob',
-  last: 'Smith'
-},
- -

Here we are effectively creating a sub-namespace. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:

- -
person.name.first
-person.name.last
- -

Important: At this point you'll also need to go through your method code and change any instances of

- -
name[0]
-name[1]
- -

to

- -
name.first
-name.last
- -

Otherwise your methods will no longer work.

- -

Bracket notation

- -

There is another way to access object properties — using bracket notation. Instead of using these:

- -
person.age
-person.name.first
- -

You can use

- -
person['age']
-person['name']['first']
- -

This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called associative arrays — they map strings to values in the same way that arrays map numbers to values.

- -

Setting object members

- -

So far we've only looked at retrieving (or getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:

- -
person.age = 45;
-person['name']['last'] = 'Cratchit';
- -

Try entering the above lines, and then getting the members again to see how they've changed, like so:

- -
person.age
-person['name']['last']
- -

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:

- -
person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
- -

You can now test out your new members:

- -
person['eyes']
-person.farewell()
- -

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:

- -
let myDataName = nameInput.value;
-let myDataValue = nameValue.value;
- -

We could then add this new member name and value to the person object like this:

- -
person[myDataName] = myDataValue;
- -

To test this, try adding the following lines into your code, just below the closing curly brace of the person object:

- -
let myDataName = 'height';
-let myDataValue = '1.75m';
-person[myDataName] = myDataValue;
- -

Now try saving and refreshing, and entering the following into your text input:

- -
person.height
- -

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

- -

What is "this"?

- -

You may have noticed something slightly strange in our methods. Look at this one for example:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -

You are probably wondering what "this" is. The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. So why not just write person instead? As you'll see in the Object-oriented JavaScript for beginners article, when we start creating constructors and so on, this is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different person object instances may have different names, but we want to use their own name when saying their greeting).

- -

Let's illustrate what we mean with a simplified pair of person objects:

- -
const person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-const person2 = {
-  name: 'Deepti',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

In this case, person1.greeting() outputs "Hi! I'm Chris."; person2.greeting() on the other hand outputs "Hi! I'm Deepti.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

- -

You've been using objects all along

- -

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples.

- -

So when you used string methods like:

- -
myString.split(',');
- -

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods and properties available on it.

- -

When you accessed the document object model using lines like this:

- -
const myDiv = document.createElement('div');
-const myVideo = document.querySelector('video');
- -

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods and properties available on it.

- -

The same is true of pretty much any other built-in object or API you've been using — Array, Math, and so on.

- -

Note that built in objects and APIs don't always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

- -
const myNotification = new Notification('Hello!');
- -

Again, we'll look at constructors in a later article.

- -
-

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.

-
- -

Summary

- -

Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.

- -

In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

- -

In this module

- - diff --git a/files/tr/learn/javascript/objects/index.html b/files/tr/learn/javascript/objects/index.html deleted file mode 100644 index 2dd6a7a9e1..0000000000 --- a/files/tr/learn/javascript/objects/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Javascript Nesnelerine Giriş -slug: Learn/JavaScript/Objects -tags: - - Başlangıç - - Değerlendirme - - JavaScript - - Kılavuz - - Makale - - Nesneler - - Objeler - - Rehber - - Yeni başlayan - - öğren -translation_of: Learn/JavaScript/Objects -original_slug: Öğren/JavaScript/Objeler ---- -
{{LearnSidebar}}
- -

JavaScript'te, JavaScript'in esas özelliklerinden olan karakter katarları ve dizilerden JavaScript'in tepesine inşa edilmiş tarayıcı uygulama geliştirme arayüzlerine ({{Glossary("API", "API")}}) kadar çoğu şey nesnedir. Kendi nesnelerinizi oluşturarak alakalı değişkenleri ve fonksiyonları etkili paketlere kapsülleyebilir ve onlara yararlı veri paketleri gibi davranabilirsiniz. JavaScript'in nesneye dayalı doğası dildeki bilgi birikiminizi arttırmak istiyorsanız önemlidir, bundan dolayı bu modülü size yardım etmek için temin ettik. Burda nesne teorisini ve sözdizimini detaylarıyla öğretiyoruz, sonra kendi nesnelerinizi nasıl oluşturacağınıza bakıyoruz.

- -

Ön Koşullar

- -

Bu konuya başlamadan önce HTML ve CSS'ye aşina olmalısınız.  Javascript'e başlamadan önce Introduction to HTML ve Introduction to CSS konularına çalışmanız önerilir.

- -

Javascript nesnelerine ayrıntılı olarak bakmadan önce Javascript Temelleri hakkında da bilgi sahibi olmalısınız. Bu konudan önce JavaScript first steps ve JavaScript building blocks konularına bakın.

- -
-

Not: Eğer kendi dosyalarınızı oluşturma özelliği olmayan bir bilgisayar/tablet/diğer cihazda çalışıyorsanız JSBin veya Thimble gibi çoğu kod örneğini deneyebileceğiniz online kodlama programlarını deneyebilirsiniz.

-
- -

Rehberler

- -
-
Nesne Temelleri
-
İlk makalede JavaScript nesnelerine, JavaScript nesne sözdizimi temellerine bakacağız ve kursun başlarında baktığımız bazı JavaScript özelliklerine uğraştığınız birçok özelliğin aslında nesne olduğunu tekrar tekrar hatırlatarak göz atacağız.
-
Yeni başlayanlar için nesneye dayalı JavaScript
-
Temeller yolumuzdan çekildiğine göre nesneye dayalı JavaScript'e (OOJS) odaklanabiliriz— bu makale nesneye dayalı programlama teorisinin temelini basitçe tanıtır sonra JavaScript'in yapıcı fonksiyonlarla nesne sınıflarını nasıl taklit ettiğini ve nasıl nesne örnekleri yarattığını araştırır.
-
Nesne prototipleri
-
Prototipler JavaScript nesnelerinin birbirinden özellik kalıtım almasının mekanizmasıdır ve diğer nesneye dayalı programlama dillerinden farklı çalışırlar.Bu makalede bu farkı keşfedeceğiz, prototip zincirlerinin nasıl çalıştığını açıklayacağız ve halihazırda var olan yapıcılara prototip özelliğini kullanarak nasıl metod eklenebileceğine göz atacağız.
-
JavaScript'te kalıtım
-
OOJS'nin neredeyse tüm korkutucu detayları açıklanmış oldu bu makale size "ebeveyn" sınıftan özellikleri kalıtım alan "çocuk" nesne sınıflarını (yapıcılar) nasıl oluşturacağınızı gösterecek.
-
JSON verileri ile çalışmak
-
JavaScript Nesne Notasyonu web sitelerinde veriyi taşımak ve temsil etmek (yani web sayfasının kullanıcıda görüntülenebilmesi için serverdan veri göndermek) için sıkça kullanılan JavaScript nesne sözdizimine dayalı yapısal veriyi temsil etmek için kullanılan metin tabanlı bir standart biçimdir.  Bununla sıkça karşılaşacağınız için bu makalede JavaScript kullanarak JSON ile çalışmanız ve kendi JSON'unuzu yazmanız için gerekli olan JSON ayrıştırması dahil her şeyi size verdik.
-
Nesne inşa etme uygulaması
-
Önceki makalelerde sağlam temeller üzerinden gitmek için gerekli olan JavaScript nesne teorisini ve sözdizim örneklerine baktık. Bu makalede ise eğlenceli ve renkli bir şey ortaya çıkarmanızı sağlayacak özel JavaScript nesnelerini inşa etmenize olanak sağlayacak bir uygulama yapacağız.
-
- -

Değerlendirmeler

- -
-
Zıplayan toplar demosuna özellikler ekleme
-
Bu değerlendirmede sizden, önceki makaledeki zıplayan toplar demosunu başlangıç noktası olarak almak ve ona ilginç özellikler eklemeniz bekleniyor.
-
diff --git a/files/tr/learn/server-side/django/authentication/index.html b/files/tr/learn/server-side/django/authentication/index.html deleted file mode 100644 index d7f0ccc57d..0000000000 --- a/files/tr/learn/server-side/django/authentication/index.html +++ /dev/null @@ -1,678 +0,0 @@ ---- -title: 'Django Tutorial - 8. Bölüm: Kullanıcı doğrulama ve izinler' -slug: Learn/Server-side/Django/Authentication -translation_of: Learn/Server-side/Django/Authentication -original_slug: Öğren/Server-side/Django/Authentication ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}
- -

Bu eğitimde size, kullanıcılara sizin sitenize kendi hesapları ile giriş yapabilmesi için, nasıl izin vereceğinizi, giriş yapmış ya da yapmamış olmaları durumuna ve izinlerine göre neler yapabileceklerini ve neleri görebileceklerini, nasıl kontrol edebileceğinizi göstereceğiz. Bu eğitimin parçası olarak, Yerel Kütüphane web sitesini, giriş sayfası, çıkış sayfası ve ödünç alınan kitapların görüntülenmesi için kullanıcı ve personele özel sayfalar ekleyerek geliştireceğiz.

- - - - - - - - - - - - -
Ön şartlar:Complete all previous tutorial topics, up to and including Django Tutorial Part 7: Sessions framework.
Amaç:Kullanıcı doğrulama ve izinlerin nasıl kurulacağı ve kullanılacağını anlamak.
- -

Genel bakış

- -

Django provides an authentication and authorisation ("permission") system, built on top of the session framework discussed in the previous tutorial, that allows you to verify user credentials and define what actions each user is allowed to perform. The framework includes built-in models for Users and Groups (a generic way of applying permissions to more than one user at a time), permissions/flags that designate whether a user may perform a task, forms and views for logging in users, and view tools for restricting content.

- -
-

Note: According to Django the authentication system aims to be very generic, and so does not provide some features provided in other web authentication systems. Solutions for some common problems are available as third party packages. For example, throttling of login attempts and authentication against third parties (e.g. OAuth).

-
- -

In this tutorial we'll show you how to enable user authentication in the LocalLibrary website, create your own login and logout pages, add permissions to your models, and control access to pages. We'll use the authentication/permissions to display lists of books that have been borrowed for both users and librarians.

- -

The authentication system is very flexible, and you can build up your URLs, forms, views, and templates from scratch if you like, just calling the provided API to login the user. However, in this article we're going to use Django's "stock" authentication views and forms for our login and logout pages. We'll still need to create some templates, but that's pretty easy.

- -

We'll also show you how to create permissions, and check on login status and permissions in both views and templates.

- -

Doğrulamayı etkinleştirme

- -

Doğrulama iskelet websitesini oluşturduğumuzda (tutorial 2'de) otomatik olarak etkinleştirilmiştir, bu yüzden bu noktada daha fazla bir şey yapmanız gerekmemektedir.

- -
-

Not: django-admin startproject komutunu kullarak uygulamayı oluşturduğumuzda gerekli yapılandırmanın hepsi yapıldı. python manage.py migratekomutunu çağırdığımızda, kullanıcılar ve izinler için veri tabanı tabloları oluşturuldu.

-
- -

Aşağıda gösterildiği gibi, yapılandırma, proje dosyasının (locallibrary/locallibrary/settings.py) INSTALLED_APPS ve MIDDLEWARE kısımlarında kurulmuştur:

- -
INSTALLED_APPS = [
-    ...
-    'django.contrib.auth',  #Core authentication framework and its default models.
-    'django.contrib.contenttypes',  #Django content type system (allows permissions to be associated with models).
-    ....
-
-MIDDLEWARE = [
-    ...
-    'django.contrib.sessions.middleware.SessionMiddleware',  #Manages sessions across requests
-    ...
-    'django.contrib.auth.middleware.AuthenticationMiddleware',  #Associates users with requests using sessions.
-    ....
-
- -

Kullanıcılar ve gruplar oluşturma

- -

Tutorial 4'te Django admin sitesi'ne baktığımızda zaten ilk kullanıcınızı oluşturmuştunuz (python manage.py createsuperuser komutuyla oluşturulan bir superuser idi). Superuser'ımız zaten doğrulanmış ve tüm izinlere sahipti, bu yüzden normal bir site kullanıcısını temsilen bir test kullanıcısı oluşturmamız gerekmektedir. Yapmanın en hızlı yollarından biri olduğu için, locallibrary gruplarımızı ve websitesi oturumlarımızı oluşturmak için admin sitesini kullanıyor olacağız.

- -
-

Not: Aşağıda gösterildiği gibi, ayrıca programatik olarak da kullanıcılar oluşturabilirsiniz. Örneğin, kullanıcıların kendi oturumlarını oluşturmalarını sağlayan bir arayüz geliştiriliyorsa, bunu yapmak zorunda kalabilirsiniz (kullancılara admin sitesine erişim vermemelisiniz).

- -
from django.contrib.auth.models import User
-
-# Create user and save to the database
-user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
-
-# Update fields and then save again
-user.first_name = 'John'
-user.last_name = 'Citizen'
-user.save()
-
-
- -

Aşağıda ilk bir grup ve sonra bir kullanıcı oluşturacağız. Henüz kütüphane üyelerimize ekleme iznimiz olmasa da, sonrasında ihtiyacımız olursa, her bir üyeye ayrı ayrı eklemektense gruba tek bir seferde eklemek daha kolay olacaktır.

- -

Geliştirme sunucusunu başlatın ve yerel web tarayıcınızda admin sitesine gidin (http://127.0.0.1:8000/admin/). Superuser hesabınız için kimlik bilgilerini kullanarak siteye giriş yapın. Admin sitesinin üst seviyesi, "django application" tarafından sıralanmış tüm modellerinizi görüntüler. Authentication and Authorisation kısmından, mevcut kayıtlarını görmek için Users veya Groups bağlantılarına tıklayabilirsiniz.

- -

Admin site - add groups or users

- -

İlk olarak kütüphane üyelerimiz için yeni bir grup oluşturalım.

- -
    -
  1. Yeni bir Group oluşturmak için Add düğmesine (Group'un yanındaki) tıklayın; grup için Name kısmına "Library Members" girin.Admin site - add group
    2. -
  2. Grup için herhangi bir izne ihtiyacımız yok, bu yüzden yalnızca SAVE düğmesine basın (sizi gruplar listesine götürecek).
    3. -
- -

Şimdi yeni bir kullanıcı oluşturalım:

- -
    -
  1. Admin sitesinin anasayfasına geri gidin.
    2. -
  2. Add user diyaloğunu açmak için Users'ın yanındaki Add düğmesine tıklayın.Admin site - add user pt1
    3. -
  3. Test kullanıcınız için uygun bir Username ve Password/Password confirmation girin.
    4. -
  4. Kullanıcıyı oluşturmak için SAVE düğmesine basın.
    -
    - Admin sitesi yeni kullanıcıyı oluşturacak ve hemen sizi username'inizi değiştirebileceğinz ve User modelin isteğe bağlı alanlarına bilgi ekleyebileceğiniz bir Change user ekranına götürecektir. Bu alanlar ad, soyad, e-posta adresi, kullanıcı durumu ve izinleri (yalnızca Active flag ayarlanmalı). Daha aşağıda kullanıcı grupları ve izinlerini belirleyebilir ve kullanıcıyla ilgili önemli tarihleri görebilirsiniz (katılım tarihi ve son giriş tarihi gibi).Admin site - add user pt2
    5. -
  5. Groups kısmında, select Library Member group from the list of Available groups, and then press the right-arrow between the boxes to move it into the Chosen groups box.Admin site - add user to group
    6. -
  6. We don't need to do anything else here, so just select SAVE again, to go to the list of users.
    7. -
- -

That's it! Now you have a "normal library member" account that you will be able to use for testing (once we've implemented the pages to enable them to login).

- -
-

Note: You should try creating another library member user. Also, create a group for Librarians, and add a user to that too!

-
- -

Doğrulama view'lerinizi kurma

- -

Django's provides almost everything you need to create authentication pages to handle login, logout, and password management "out of the box". This includes an url mapper, views and forms, but it does not include the templates — we have to create our own!

- -

In this section we show how to integrate the default system into the LocalLibrary website and create the templates. We'll put them in the main project URLs.

- -
-

Note: You don't have to use any of this code, but it is likely that you'll want to because it makes things a lot easier. You'll almost certainly need to change the form handling code if you change your user model (an advanced topic!) but even so, you would still be able to use the stock view functions.

-
- -
-

Note: In this case we could reasonably put the authentication pages, including the URLs and templates, inside our catalog application. However if we had multiple applications it would be better to separate out this shared login behaviour and have it available across the whole site, so that is what we've shown here!

-
- -

Proje URL'leri

- -

Add the following to the bottom of the project urls.py file (locallibrary/locallibrary/urls.py) file:

- -
#Add Django site authentication urls (for login, logout, password management)
-urlpatterns += [
-    url(r'^accounts/', include('django.contrib.auth.urls')),
-]
-
- -

Navigate to the http://127.0.0.1:8000/accounts/ URL (note the trailing forward slash!) and Django will show an error that it could not find this URL, and listing all the URLs it tried. From this you can see the URLs that will work, for example:

- -
-

Note: Using the above method adds the following urls with names in square brackets, which can be used to reverse the url mappings. You don't have to implement anything else — the above url mapping automatically maps the below mentioned URLs.

-
- -
-
^accounts/login/$ [name='login']
-^accounts/logout/$ [name='logout']
-^accounts/password_change/$ [name='password_change']
-^accounts/password_change/done/$ [name='password_change_done']
-^accounts/password_reset/$ [name='password_reset']
-^accounts/password_reset/done/$ [name='password_reset_done']
-^accounts/reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$ [name='password_reset_confirm']
-^accounts/reset/done/$ [name='password_reset_complete']
-
- -

Now try to navigate to the login URL (http://127.0.0.1:8000/accounts/login/). This will fail again, but with an error that tells you that we're missing the required template (registration/login.html) on the template search path. You'll see the following lines listed in the yellow section up the top:

- -
Exception Type:    TemplateDoesNotExist
-Exception Value:    registration/login.html
- -

The next step is to create a registration directory on the search path and then add the login.html file.

- -

Şablon dizini

- -

The urls (and implicitly views) that we just added expect to find their associated templates in a directory /registration/ somewhere in the templates search path.

- -

For this site we'll put our HTML pages in the templates/registration/ directory. This directory should be in your project root directory, i.e the same directory as as the catalog and locallibrary folders). Please create these folders now.

- -
-

Note: Your folder structure should now look like the below:
- locallibrary (django project folder)
-    |_catalog
-    |_locallibrary
-    |_templates (new)
-                 |_registration

-
- -

To make these directories visible to the template loader (i.e. to put this directory in the template search path) open the project settings (/locallibrary/locallibrary/settings.py), and update the TEMPLATES section's 'DIRS' line as shown.

- -
TEMPLATES = [
-    {
-        ...
-        'DIRS': ['./templates',],
-        'APP_DIRS': True,
-        ...
-
- -

Login template

- -
-

Important: The authentication templates provided in this article are very basic/slightly modified version of the Django demonstration login templates. You may need to customise them for your own use!

-
- -

Create a new HTML file called /locallibrary/templates/registration/login.html. give it the following contents:

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-
-{% if form.errors %}
-<p>Your username and password didn't match. Please try again.</p>
-{% endif %}
-
-{% if next %}
-    {% if user.is_authenticated %}
-    <p>Your account doesn't have access to this page. To proceed,
-    please login with an account that has access.</p>
-    {% else %}
-    <p>Please login to see this page.</p>
-    {% endif %}
-{% endif %}
-
-<form method="post" action="{% url 'login' %}">
-{% csrf_token %}
-
-<div>
-  <td>\{{ form.username.label_tag }}</td>
-  <td>\{{ form.username }}</td>
-</div>
-<div>
-  <td>\{{ form.password.label_tag }}</td>
-  <td>\{{ form.password }}</td>
-</div>
-
-<div>
-  <input type="submit" value="login" />
-  <input type="hidden" name="next" value="\{{ next }}" />
-</div>
-</form>
-
-{# Assumes you setup the password_reset view in your URLconf #}
-<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
-
-{% endblock %}
- -

This template shares some similarities with the ones we've seen before — it extends our base template and overrides the content block. The rest of the code is fairly standard form handling code, which we will discuss in a later tutorial. All you need to know for now is that this will display a form in which you can enter your username and password, and that if you enter invalid values you will be prompted to enter correct values when the page refreshes.

- -

Navigate back to the login page (http://127.0.0.1:8000/accounts/login/) once you've saved your template, and you should see something like this:

- -

Library login page v1

- -

If you try to login that will succeed and you'll be redirected to another page (by default this will be http://127.0.0.1:8000/accounts/profile/). The problem here is that by default Django expects that after login you will want to be taken to a profile page, which may or may not be the case. As you haven't defined this page yet, you'll get another error!

- -

Open the project settings (/locallibrary/locallibrary/settings.py) and add the text below to the bottom. Now when you login you should be redirected to the site home page by default.

- -
# Redirect to home URL after login (Default redirects to /accounts/profile/)
-LOGIN_REDIRECT_URL = '/'
-
- -

Logout template

- -

If you navigate to the logout url (http://127.0.0.1:8000/accounts/logout/) then you'll see some odd behaviour — your user will be logged out sure enough, but you'll be taken to the Admin logout page. That's not what you want, if only because the login link on that page takes you to the Admin login screen (and that is only available to users who have the is_staff permission).

- -

Create and open /locallibrary/templates/registration/logged_out.html. Copy in the text below:

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-<p>Logged out!</p>
-
-<a href="{% url 'login'%}">Click here to login again.</a>
-{% endblock %}
- -

This template is very simple. It just displays a message informing you that you have been logged out, and provides a link that you can press to go back to the login screen. If you go to the logout URL again you should see this page:

- -

Library logout page v1

- -

Password reset templates

- -

The default password reset system uses email to send the user a reset link. You need to create forms to get the user's email address, send the email, allow them to enter a new password, and to note when the whole process is complete.

- -

The following templates can be used as a starting point.

- -

Password reset form

- -

This is the form used to get the user's email address (for sending the password reset email). Create /locallibrary/templates/registration/password_reset_form.html, and give it the following contents:

- -
{% extends "base_generic.html" %}
-{% block content %}
-
-<form action="" method="post">{% csrf_token %}
-    {% if form.email.errors %} \{{ form.email.errors }} {% endif %}
-        <p>\{{ form.email }}</p>
-    <input type="submit" class="btn btn-default btn-lg" value="Reset password" />
-</form>
-
-{% endblock %}
-
- -

Password reset done

- -

This form is displayed after your email address has been collected. Create /locallibrary/templates/registration/password_reset_done.html, and give it the following contents:

- -
{% extends "base_generic.html" %}
-{% block content %}
-<p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p>
-{% endblock %}
-
- -

Password reset email

- -

This template provides the text of the HTML email containing the reset link that we will send to users. Create /locallibrary/templates/registration/password_reset_email.html, and give it the following contents:

- -
Someone asked for password reset for email \{{ email }}. Follow the link below:
-\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
-
- -

Password reset confirm

- -

This page is where you enter your new password after clicking the link in the password-reset email. Create /locallibrary/templates/registration/password_reset_confirm.html, and give it the following contents:

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-
-    {% if validlink %}
-        <p>Please enter (and confirm) your new password.</p>
-        <form action="" method="post">
-            <div style="display:none">
-                <input type="hidden" value="\{{ csrf_token }}" name="csrfmiddlewaretoken">
-            </div>
-            <table>
-                <tr>
-                    <td>\{{ form.new_password1.errors }}
-                        <label for="id_new_password1">New password:</label></td>
-                    <td>\{{ form.new_password1 }}</td>
-                </tr>
-                <tr>
-                    <td>\{{ form.new_password2.errors }}
-                        <label for="id_new_password2">Confirm password:</label></td>
-                    <td>\{{ form.new_password2 }}</td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td><input type="submit" value="Change my password" /></td>
-                </tr>
-            </table>
-        </form>
-    {% else %}
-        <h1>Password reset failed</h1>
-        <p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p>
-    {% endif %}
-
-{% endblock %}
-
- -

Password reset complete

- -

This is the last password-reset template, which is displayed to notify you when the password reset has succeeded. Create /locallibrary/templates/registration/password_reset_complete.html, and give it the following contents:

- -
{% extends "base_generic.html" %}
-{% block content %}
-
-<h1>The password has been changed!</h1>
-<p><a href="{% url 'login' %}">log in again?</a></p>
-
-{% endblock %}
- -

Testing the new authentication pages

- -

Now that you've added the URL configuration and created all these templates, the authentication pages should now just work!

- -

You can test the new authentication pages by attempting to login and then logout your superuser account using these URLs:

- - - -

You'll be able to test the password reset functionality from the link in the login page. Be aware that Django will only send reset emails to addresses (users) that are already stored in its database!

- -
-

Note: The password reset system requires that your website supports email, which is beyond the scope of this article, so this part won't work yet. To allow testing, put the following line at the end of your settings.py file. This logs any emails sent to the console (so you can copy the password reset link from the console).

- -
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
-
- -

For more information, see Sending email (Django docs).

-
- -

Testing against authenticated users

- -

This section looks at what we can do to selectively control content the user sees based on whether they are logged in or not.

- -

Testing in templates

- -

You can get information about the currently logged in user in templates with the \{{ user }} template variable (this is added to the template context by default when you set up the project as we did in our skeleton).

- -

Typically you will first test against the \{{ user.is_authenticated }} template variable to determine whether the user is eligible to see specific content. To demonstrate this, next we'll update our sidebar to display a "Login" link if the user is logged out, and a "Logout" link if they are logged in.

- -

Open the base template (/locallibrary/catalog/templates/base_generic.html) and copy the following text into the sidebar block, immediately before the endblock template tag.

- -
  <ul class="sidebar-nav">
-
-    ...
-
-   {% if user.is_authenticated %}
-     <li>User: \{{ user.get_username }}</li>
-     <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
-   {% else %}
-     <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
-   {% endif %} 
-  </ul>
- -

As you can see, we use if-else-endif template tags to conditionally display text based on whether \{{ user.is_authenticated }} is true. If the user is authenticated then we know that we have a valid user, so we call \{{ user.get_username }} to display their name.

- -

We create the login and logout link URLs using the url template tag and the names of the respective URL configurations. Note also how we have appended ?next=\{{request.path}} to the end of the URLs. What this does is add a URL parameter next containing the address (URL) of the current page, to the end of the linked URL. After the user has successfully logged in/out, the views will use this "next" value to redirect the user back to the page where they first clicked the login/logout link.

- -
-

Note: Try it out! If you're on the home page and you click Login/Logout in the sidebar, then after the operation completes you should end up back on the same page.

-
- -

Testing in views

- -

If you're using function-based views, the easiest way to restrict access to your functions is to apply the login_required decorator to your view function, as shown below. If the user is logged in then your view code will execute as normal. If the user is not logged in, this will redirect to the login URL defined in the project settings (settings.LOGIN_URL), passing the current absolute path as the next URL parameter. If the user succeeds in logging in then they will be returned back to this page, but this time authenticated.

- -
from django.contrib.auth.decorators import login_required
-
-@login_required
-def my_view(request):
-    ...
- -
-

Note: You can do the same sort of thing manually by testing on request.user.is_authenticated, but the decorator is much more convenient!

-
- -

Similarly, the easiest way to restrict access to logged-in users in your class-based views is to derive from LoginRequiredMixin. You need to declare this mixin first in the super class list, before the main view class.

- -
from django.contrib.auth.mixins import LoginRequiredMixin
-
-class MyView(LoginRequiredMixin, View):
-    ...
- -

This has exactly the same redirect behaviour as the login_required decorator. You can also specify an alternative location to redirect the user to if they are not authenticated (login_url), and a URL parameter name instead of "next" to insert the current absolute path (redirect_field_name).

- -
class MyView(LoginRequiredMixin, View):
-    login_url = '/login/'
-    redirect_field_name = 'redirect_to'
-
- -

For additional detail, check out the Django docs here.

- -

Example — listing the current user's books

- -

Now that we know how to restrict a page to a particular user, lets create a view of the books that the current user has borrowed.

- -

Unfortunately we don't yet have any way for users to borrow books! So before we can create the book list we'll first extend the BookInstance model to support the concept of borrowing and use the Django Admin application to loan a number of books to our test user.

- -

Models

- -

First we're going to have to make it possible for users to have a BookInstance on loan (we already have a status and a due_back date, but we don't yet have any association between this model and a User. We'll create one using a ForeignKey (one-to-many) field. We also need an easy mechanism to test whether a loaned book is overdue.

- -

Open catalog/models.py, and import the User model from django.contrib.auth.models (add this just below the previous import line at the top of the file, so User is available to subsequent code that makes use of it):

- -
from django.contrib.auth.models import User
-
- -

Next add the borrower field to the BookInstance model:

- -
borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)
-
- -

While we're here, lets add a property that we can call from our templates to tell if a particular book instance is overdue. While we could calculate this in the template itself, using a property as shown below will be much more efficient.

- -
from datetime import date
-
-@property
-def is_overdue(self):
-    if self.due_back and date.today() > self.due_back:
-        return True
-    return False
- -
-

Note: We first verify whether due_back is empty before making a comparison. An empty due_back field would cause Django to throw an error instead of showing the page: empty values are not comparable. This is not something we would want our users to experience!

-
- -

Now that we've updated our models, we'll need to make fresh migrations on the project and then apply those migrations:

- -
python3 manage.py makemigrations
-python3 manage.py migrate
-
- -

Admin

- -

Now open catalog/admin.py, and add the borrower field to the BookInstanceAdmin class in both the list_display and the fieldsets as shown below. This will make the field visible in the Admin section, so that we can assign a User to a BookInstance when needed.

- -
@admin.register(BookInstance)
-class BookInstanceAdmin(admin.ModelAdmin):
-    list_display = ('book', 'status', 'borrower', 'due_back', 'id')
-    list_filter = ('status', 'due_back')
-
-    fieldsets = (
-        (None, {
-            'fields': ('book','imprint', 'id')
-        }),
-        ('Availability', {
-            'fields': ('status', 'due_back','borrower',)
-        }),
-    )
- -

Loan a few books

- -

Now that its possible to loan books to a specific user, go and loan out a number of BookInstance records. Set their borrowed field to your test user, make the status "On loan" and set due dates both in the future and the past.

- -
-

Note: We won't spell the process out, as you already know how to use the Admin site!

-
- -

On loan view

- -

Now we'll add a view for getting the list of all books that have been loaned to the current user. We'll use the same generic class-based list view we're familiar with, but this time we'll also import and derive from LoginRequiredMixin, so that only a logged in user can call this view. We will also choose to declare a template_name, rather than using the default, because we may end up having a few different lists of BookInstance records, with different views and templates.

- -

Add the following to catalog/views.py:

- -
from django.contrib.auth.mixins import LoginRequiredMixin
-
-class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
-    """
-    Generic class-based view listing books on loan to current user.
-    """
-    model = BookInstance
-    template_name ='catalog/bookinstance_list_borrowed_user.html'
-    paginate_by = 10
-
-    def get_queryset(self):
-        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')
- -

In order to restrict our query to just the BookInstance objects for the current user, we re-implement get_queryset() as shown above. Note that "o" is the stored code for "on loan" and we order by the due_back date so that the oldest items are displayed first.

- -

URL conf for on loan books

- -

Now open /catalog/urls.py and add an url() pointing to the above view (you can just copy the text below to the end of the file).

- -
urlpatterns += [
-    url(r'^mybooks/$', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'),
-]
- -

Template for on loan books

- -

Now all we need to do for this page is add a template. First, create the template file /catalog/templates/catalog/bookinstance_list_borrowed_user.html and give it the following contents:

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-    <h1>Borrowed books</h1>
-
-    {% if bookinstance_list %}
-    <ul>
-
-      {% for bookinst in bookinstance_list %}
-      <li class="{% if bookinst.is_overdue %}text-danger{% endif %}">
-        <a href="{% url 'book-detail' bookinst.book.pk %}">\{{bookinst.book.title}}</a> (\{{ bookinst.due_back }})
-      </li>
-      {% endfor %}
-    </ul>
-
-    {% else %}
-      <p>There are no books borrowed.</p>
-    {% endif %}
-{% endblock %}
- -

This template is very similar to those we've created previously for the Book and Author objects. The only thing "new" here is that we check the method we added in the model (bookinst.is_overdue) and use it to change the colour of overdue items.

- -

When the development server is running, you should now be able to view the list for a logged in user in your browser at http://127.0.0.1:8000/catalog/mybooks/. Try this out with your user logged in and logged out (in the second case, you should be redirected to the login page).

- -

Add the list to the sidebar

- -

The very last step is to add a link for this new page into the sidebar. We'll put this in the same section where we display other information for the logged in user.

- -

Open the base template (/locallibrary/catalog/templates/base_generic.html) and add the line in bold to the sidebar as shown.

- -
 <ul class="sidebar-nav">
-   {% if user.is_authenticated %}
-   <li>User: \{{ user.get_username }}</li>
-   <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li>
-   <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
-   {% else %}
-   <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
-   {% endif %}
- </ul>
-
- -

Nasıl görünüyor?

- -

Herhangi bir kullanıcı giriş yaptığında, aşağıda görüntülendiği şekilde, kenar çubuğunda My Borrowed bağlantısını ve kitaplar listesini görecekler (ilk kitabın due date'i yok, bir sonraki tutorial'da gidereceğimiz bir bug!).

- -

Library - borrowed books by user

- -

İzinler

- -

İzinler modellerle ilişklidir ve izni olan bir kullanıcı tarafından bir modele uygulanabilecek operasyonları tanımlar. Varsayılan olarak, Django otomatik olarak tüm modellere add, change ve delete izinlerini verir, which izinli kullanıcıların admin sitesi aracılığıyla ilgili eylemleri uygulamaasını sağlar. You can define your own permissions to models and grant them to specific users. You can also change the permissions associated with different instances of the same model.

- -

Testing on permissions in views and templates is then very similar for testing on the authentication status (and in fact, testing for a permission also tests for authentication).

- -

Models

- -

Defining permissions is done on the model "class Meta" section, using the permissions field. You can specify as many permissions as you need in a tuple, each permission itself being defined in a nested tuple containing the permission name and permission display value. For example, we might define a permission to allow a user to mark that a book has been returned as shown:

- -
class BookInstance(models.Model):
-    ...
-    class Meta:
-        ...
-        permissions = (("can_mark_returned", "Set book as returned"),)
- -

We could then assign the permission to a "Librarian" group in the Admin site.

- -

Open the catalog/models.py, and add the permission as shown above. You will need to re-run your migrations (call python3 manage.py makemigrations and python3 manage.py migrate) to update the database appropriately.

- -

Templates

- -

The current user's permissions are stored in a template variable called \{{ perms }}. You can check whether the current user has a particular permission using the specific variable name within the associated Django "app" — e.g. \{{ perms.catalog.can_mark_returned }} will be True if the user has this permission, and False otherwise. We typically test for the permission using the template {% if %} tag as shown:

- -
{% if perms.catalog.can_mark_returned %}
-    <!-- We can mark a BookInstance as returned. -->
-    <!-- Perhaps add code to link to a "book return" view here. -->
-{% endif %}
-
- -

Views

- -

Permissions can be tested in function view using the permission_required decorator or in a class-based view using the PermissionRequiredMixin. The pattern and behaviour are the same as for login authentication, though of course you might reasonably have to add multiple permissions.

- -

Function view decorator:

- -
from django.contrib.auth.decorators import permission_required
-
-@permission_required('catalog.can_mark_returned')
-@permission_required('catalog.can_edit')
-def my_view(request):
-    ...
- -

Permission-required mixin for class-based views.

- -
from django.contrib.auth.mixins import PermissionRequiredMixin
-
-class MyView(PermissionRequiredMixin, View):
-    permission_required = 'catalog.can_mark_returned'
-    # Or multiple permissions
-    permission_required = ('catalog.can_mark_returned', 'catalog.can_edit')
-    # Note that 'catalog.can_edit' is just an example
-    # the catalog application doesn't have such permission!
- -

Example

- -

We won't update the LocalLibrary here; perhaps in the next tutorial!

- -

Challenge yourself

- -

Earlier in this article we showed you how to create a page for the current user listing the books that they have borrowed. The challenge now is to create a similar page that is only visible for librarians, that displays all books that have been borrowed, and which includes the name of each borrower.

- -

You should be able to follow the same pattern as for the other view. The main difference is that you'll need to restrict the view to only librarians. You could do this based on whether the user is a staff member (function decorator: staff_member_required, template variable: user.is_staff) but we recommend that you instead use the can_mark_returned permission and PermissionRequiredMixin, as described in the previous section.

- -
-

Important: Remember not to use your superuser for permissions based testing (permission checks always return true for superusers, even if a permission has not yet been defined!). Instead create a librarian user, and add the required capability.

-
- -

When you are finished, your page should look something like the screenshot below.

- -

All borrowed books, restricted to librarian

- -
    -
- -

Summary

- -

Excellent work — you've now created a website that library members can login into and view their own content, and that librarians (with the correct permission) can use to view all loaned books and their borrowers. At the moment we're still just viewing content, but the same principles and techniques are used when you want to start modifying and adding data.

- -

In our next article we'll look at how you can use Django forms to collect user input, and then start modifying some of our stored data.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}

diff --git a/files/tr/learn/server-side/django/index.html b/files/tr/learn/server-side/django/index.html deleted file mode 100644 index e86962900e..0000000000 --- a/files/tr/learn/server-side/django/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Django Web Framework (Python) -slug: Learn/Server-side/Django -tags: - - Beginner - - CodingScripting - - Intro - - Learn - - NeedsTranslation - - Python - - Server-side programming - - TopicStub - - django -translation_of: Learn/Server-side/Django -original_slug: Öğren/Server-side/Django ---- -

{{draft("Contact Hamish Willee via ~~chrisdavidmills if you have any questions about this work.")}}

- -

Django is an extremely popular and fully featured server-side web framework, written in Python. The module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to get started with using it to create your own web applications.

- -

Prerequisites

- -

Before starting this module you don't need to have any knowledge of Django. You will need to understand what server-side web programming and web frameworks are, ideally by reading the topics in our Server-side website programming first steps module.

- -

A general knowledge of programming concepts and Python is recommended, but not essential to understanding the core concepts.

- -
-

Note: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better then there are numerous free books and tutorials available on the Internet (new programmers might want to check out the Python for Non Programmers page on the python.org wiki).

-
- -

Guides

- -
-
Django Introduction
-
In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some of the advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you then go on to set it up and start playing.
-
Setting up a Django development environment
-
Now that you know what Django is for, we'll show you how to setup and test a Django development environment on Windows, Linux (Ubuntu), and Mac OS X — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.
-
Django Tutorial — The Local Library website
-
The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.
-
Django Tutorial Part 2: Creating a skeleton website
-
This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.
-
Django Tutorial Part 3: Using models
-
This article shows how to define models for the LocalLibrary website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.
-
Django Tutorial Part 4: Django admin site
-
Now that we've created models for the LocalLibrary website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some of ways you can further improve the presentation of the admin site.
-
Django Tutorial Part 5: Creating our home page
-
We're now ready to add the code to display our first full page — a home page for the LocalLibrary that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.
-
Django Tutorial Part 6: Generic list and detail views
-
This tutorial extends our LocalLibrary website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.
-
Django Tutorial Part 7: Sessions framework
-
This tutorial extends our LocalLibrary website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does shows how you can use the session framework to provide peristent behaviour for anonymous users in your own sites.
-
Django Tutorial Part 8: User authentication and permissions
-
In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their permissions. As part of this demonstration we'll extend the LocalLibrary website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.
-
 
-
Forms (TBD)
-
HTML Forms are used to collect user data and send it to a website for processing. Form handling can be complicated, and includes creating the HTML code for the form, validating the entered data on both the client and server, processing/storing the returned data, and returning a response. Django simplifies much of this work, and is even capable of reusing data defined in the model for creating a form — this article shows how.
-
 
-
Testing Django code (TBD)
-
For very basic sites with only a few lines of code, you may be able to get away with manual testing. As your site gets larger, an automated test suite can help to validate new code as it is written and is the only practical way to ensure that changes to not introduce new bugs. This article provides a very brief overview of the recommended way to write and run unit tests in your Django web application.
-
Django web application security (TBD)
-
Protecting user data is an essential part of any website design. We already explained some of the more common security threats in the topic Web security — this article builds on that information,  providing a brief overview of the security features that are provided for Django users out of the box.
-
Deployment to production (TBD)
-
Now that your web application is finished, you will want to upload it to a production server. To make this easier, here we help you find a hosting site that might meet your budget and scaling needs. We then explain some of the changes you need to make to hide any "development settings". Last of all we provide a real "worked example" of how you can install a web application, using hosting on the free tier of the Heroku cloud hosting service.
-
- -

Assessments

- -

The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above

- -
-
DIY Mini Blog (TBD)
-
In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.
-
diff --git a/files/tr/learn/server-side/django/sessions/index.html b/files/tr/learn/server-side/django/sessions/index.html deleted file mode 100644 index 9394b62737..0000000000 --- a/files/tr/learn/server-side/django/sessions/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: 'Django Tutorial Part 7: Sessions framework' -slug: Learn/Server-side/Django/Sessions -tags: - - Başlangıç - - CondingScripting - - Makale - - Python - - Server - - Sunucu - - Tutorial - - django - - django oturumları - - django sessions - - oturumlar - - server-side - - sessions - - sunucu tarafı - - Öğretici - - öğren -translation_of: Learn/Server-side/Django/Sessions -original_slug: Öğren/Server-side/Django/Sessions ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}
- -

Bu tutorial, anasayfaya session temelli bir ziyareti sayacı ekleyerek LocalLibrary websitemizi genişletmektedir. Bu görece basit bir örnek, fakat kendi sitelerinizdeki bilinmeyen kullanıcılar için kalıcı davranış sağlamak için session framework'ünü nasıl kullanacağınızı göstermektedir.

- - - - - - - - - - - - -
Ön şartlar:Django Tutorial 6. Bölüm: Generic list ve detail view'lar dahil önceki tüm tutorial konularını tamamlayın
Amaç:Session'ların nasıl kullanıldığını anlamak.
- -

Genel Bakış

- -

Önceki tutorial'larda oluşturduğumuz LocalLibrary websitesi, kullanıcıların katalogdaki kitap ve yazarlara göz atmalarını sağlar. İçerik, veri tabanından dinamik olarak üretilirken, tüm kullanıcılar siteyi kullandıklarında esasen aynı sayfalar ve bilgi türlerine erişebilecektir.

- -

"Gerçek" bir kütüphanede, her bir kullanıcıya önceki kullanım ve tercihlerini vs. temel alarak kişiselleştirilmiş bir deneyim sunmayı isteyebilirsiniz. Örneğin, kullanıcının daha önce kabul ettiği uyarı iletilerini siteyi veya mağazayı bir sonraki ziyaret edişlerinde gizleyebilir ve tercihlerine (örn. her bir sayfada görüntülenmesini istedikleri arama sonucu sayısı gibi) saygı duyabilirsiniz. 

- -

Session framework'ü her bir site ziyaretçisine dayalı keyfi veriler depolamanızı ve geri almanızı sağlayarak, bu tür davranışları uygulamanızı sağlar. 

- -

Sessions Nedir?

- -

Web tarayıcılar ve sunucular arasındaki tüm iletişim, stateless bir HTTP protokolü aracılığıyladır.  Protokolün stateless oluşundan kasıt, client ve server arasındaki iletilerin birbirlerinden tamamen bağımsız olduğudur— önceki iletilere dayalı davranış veya "dizi" kavramı bulunmamaktadır. Sonuç olarak, bir istemci ile devam eden ilişkileri takip eden bir siteye sahip olmak istiyorsanız, bunu kendiniz uygulamanız gerekiyor.

- -

Sessions are the mechanism used by Django (and most of the Internet) for keeping track of the "state" between the site and a particular browser. Session'lar her bir tarayıcı için keyfi veriler depolamanızı sağlar ve tarayıcı bağlandığında bu verileri sitede bulabilirsiniz. Session ile ilişkili her bir veri öğesi  Individual data items associated with the session are then referenced by a "key", which is used both to store and retrieve the data.

- -

Django uses a cookie containing a special session id to identify each browser and its associated session with the site. The actual session data is stored in the site database by default (this is more secure than storing the data in a cookie, where they are more vulnerable to malicious users). You can configure Django to store the session data in other places (cache, files, "secure" cookies), but the default location is a good and relatively secure option.

- -

Session'ları Etkinleştirme

- -

Sessions iskelet websitesini oluşturduğumuzda (tutorial 2'de) otomatik olarak etkinleştirilir.

- -

Aşağıda görüldüğü gibi, yapılandırma, proje dosyasının (locallibrary/locallibrary/settings.py) INSTALLED_APPS ve MIDDLEWARE kısımlarına kurulur:

- -
INSTALLED_APPS = [
-    ...
-    'django.contrib.sessions',
-    ....
-
-MIDDLEWARE = [
-    ...
-    'django.contrib.sessions.middleware.SessionMiddleware',
-    ....
- -

Session'ları Kullanma

- -

You can access the session attribute in the view from the request parametresi (an HttpRequest passed in as the first argument to the view). This session attribute represents the specific connection to the current user (or to be more precise, the connection to the current browser, as identified by the session id in the browser's cookie for this site).

- -

session attribute'u view'ınızda istediğiniz kadar yazıp okuyabileceğiniz sözlük benzeri bir nesne olup, dilediğiniz gibi değiştirilebilirdir. You can do all the normal dictionary operations, including clearing all data, testing if a key is present, looping through data, etc. Most of the time though, you'll just use the standard "dictionary" API to get and set values.

- -

The code fragments below show how you can get, set, and delete some data with the key "my_car", associated with the current session (browser). 

- -
-

Note: One of the great things about Django is that you don't need to think about the mechanisms that tie the session to your current request in your view. If we were to use the fragments below in our view, we'd know that the information about my_car is associated only with the browser that sent the current request.

-
- -
# Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present
-my_car = request.session['my_car']
-
-# Get a session value, setting a default if it is not present ('mini')
-my_car = request.session.get('my_car', 'mini')
-
-# Set a session value
-request.session['my_car'] = 'mini'
-
-# Delete a session value
-del request.session['my_car']
-
- -

The API also offers a number of other methods that are mostly used to manage the associated session cookie.  For example, there are methods to test that cookies are supported in the client browser, to set and check cookie expiry dates, and to clear expired sessions from the data store. You can find out about the full API in How to use sessions (Django belgeleri).

- -

Session Verisini Kaydetmek

- -

Varsayılan olarak, Django yalnızca session veri tabanını kaydeder ve session değiştirildiğinde veya silindiğinde istemciye session çerezini gönderir. Önceki kısımlarda görüldüğü gibi session anahtarını kullanarak bazı verileri güncellerseniz, sonrasında bu konuda endişelenmenize gerek kalmaz! Örneğin:

- -
# This is detected as an update to the session, so session data is saved.
-request.session['my_car'] = 'mini'
- -

Session verisi içersinde bazı bilgileri güncellerseniz, sonrasında Django session'a bir değişiklik yaptığınızı ve veriyi kaydettiğinizi fark etmeyecektir (örneğin, aşağıda gösterildiği gibi, "my_car" verinizin  içerisindeki "wheels" verinizi değiştirmek üzereyseniz). Bu durumda session'ı açık bir şekilde değiştirilmiş olarak işaretlemeniz gerekecektir.

- -
# Session object not directly modified, only data within the session. Session changes not saved!
-request.session['my_car']['wheels'] = 'alloy'
-
-# Set session as modified to force data updates/cookie to be saved.
-request.session.modified = True
-
- -
-

Not: Davranışı değiştirebilirsiniz; böylece site veri tabanını güncelleyecek/proje ayarlarınıza (locallibrary/locallibrary/settings.py) SESSION_SAVE_EVERY_REQUEST = True komutunu ekleyerek her bir request'teki çerezi gönderecektir.

-
- -

Basit Örnek — Ziyaret Sayısını Almak

- -

Basit bir gerçek dünya örneği olarak, mevcut kullanıcıya LocalLibrary anasayfasını kaç kere ziyaret ettiklerini söyleyemesi için kütüphanemizi güncelleyeceğiz.

- -

/locallibrary/catalog/views.py dosyasını açın ve aşağıda kalın olarak gösterilen değişiklikleri yapın. 

- -
def index(request):
-    ...
-
-    num_authors=Author.objects.count()  # The 'all()' is implied by default.
-
-    # Number of visits to this view, as counted in the session variable.
-    num_visits=request.session.get('num_visits', 0)
-    request.session['num_visits'] = num_visits+1
-
-    # Render the HTML template index.html with the data in the context variable.
-    return render(
-        request,
-        'index.html',
-        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors,
-            'num_visits':num_visits}, # num_visits appended
-    )
- -

Here we first get the value of the 'num_visits' session key, setting the value to 0 if it has not previously been set. Each time a request is received, we then increment the value and store it back in the session (for the next time the user visits the page). The num_visits variable is then passed to the template in our context variable.  

- -
-

Note: We might also test whether cookies are even supported in the browser here (see How to use sessions for examples) or design our UI so that it doesn't matter whether or not cookies are supported.

-
- -

Add the line seen at the bottom of the following block to your main HTML template (/locallibrary/catalog/templates/index.html) at the bottom of the "Dynamic content" section to display the context variable:

- -
<h2>Dynamic content</h2>
-
-<p>The library has the following record counts:</p>
-<ul>
-<li><strong>Books:</strong> \{{ num_books }}</li>
-<li><strong>Copies:</strong> \{{ num_instances }}</li>
-<li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
-<li><strong>Authors:</strong> \{{ num_authors }}</li>
-</ul>
-
-<p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p>
-
- -

Değişikliklerinizi kaydedin ve test sunucusunu yeniden başlatın. Sayfayı her yenilediğinizde, numara güncellenmelidir.

- -
    -
- -

Özet

- -

Bilinmeyen kullanıcılarla etkileşiminizi arttırmak için oturumları kullanmanın ne kadar kolay olduğunu artık biliyorsunuz.

- -

Sıradaki makalelerimizde, authentication ve authorisation (izin) framework'ünü açıklayacağız ve kullanıcı hesaplarını nasıl destekleyeceğinizi göstereceğiz.

- -

Ayrıca bakın

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}

diff --git a/files/tr/learn/server-side/django/skeleton_website/index.html b/files/tr/learn/server-side/django/skeleton_website/index.html deleted file mode 100644 index 1c617bcc75..0000000000 --- a/files/tr/learn/server-side/django/skeleton_website/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: 'Django Tutorial 2. Bölüm: Websitesi İskeleti Oluşturmak' -slug: Learn/Server-side/Django/skeleton_website -translation_of: Learn/Server-side/Django/skeleton_website -original_slug: Öğren/Server-side/Django/website_iskeleti ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
- -

Django Tutorial serimizin ikinci yazısında, içine siteye özgü ayarları, path'leri, model'leri, view'ları ve template'leri yerleştireceğimiz bir websitesi projesinin "iskelet"ini nasıl oluşturağınızı anlatacağız.

- - - - - - - - - - - - -
Gereksinimler:Django geliştirme ortamı kur. Django Tutorial'i gözden geçir.
Amaç:Kendi website projelerinizi oluşturmak için Django araçlarını kullanabilmek
- -

Genel Bakış

- -

Bu yazıda, içine siteye özgü ayarları, path'leri, model'leri, view'ları ve template'leri(bunlardan sonra bahsedeceğiz) yerleştireceğimiz bir websitesi projesinin "iskelet"ini nasıl oluşturağınızı anlatacağız..

- -

Süreç gayet açık:

- -
    -
  1. django-admin tool to create the project folder, basic file templates, and project management script (manage.py).
    2. -
  2. Use manage.py to create one or more applications. -
    -

    Note: A website may consist of one or more sections, e.g. main site, blog, wiki, downloads area, etc. Django encourages you to develop these components as separate applications, which could then be re-used in different projects if desired. 

    -
    -
    3. -
  3. Register the new applications to include them in the project.
    4. -
  4. Hook up the url/path mapper for each application.
    5. -
- -

For the Local Library website the website folder and its project folder will be named locallibrary, and we'll have just one application named catalog. The top level folder structure will therefore be as follows:

- -
locallibrary/         # Website folder
-    manage.py         # Script to run Django tools for this project (created using django-admin)
-    locallibrary/     # Website/project folder (created using django-admin)
-    catalog/          # Application folder (created using manage.py)
-
- -

The following sections discuss the process steps in detail, and show how you can test the changes. At the end of the article we discuss some of the other site-wide configuration you might also do at this stage.

- -

Projeyi Oluşturma

- -

İlk olarak komut istemi/terminali açın,  sanal ortamda olduğunuza emin olun, Django uygulamalarının bulunmasını istediğiniz yeri açın(cd komutuyla) (belgeler klasörü gibi kolay bulabileceğiniz bir yer olsun) ve  yeni websiteniz için yeni bir klasör oluşturun (biz django_projects olarak oluşturduk). Sonra cd komutuyla o klasöre girin:

- -
mkdir django_projects
-cd django_projects
- -

Gösterildiği gibi django-admin startproject komutuyla yeni projeyi oluşturun ve sonra klasörün içine girin.

- -
django-admin startproject locallibrary
-cd locallibrary
- -

django-admin aracı aşağıda görünen şekilde bir klasör/dosya yapısı oluşturur:

- -
locallibrary/
-    manage.py
-    locallibrary/
-        __init__.py
-        settings.py
-        urls.py
-        wsgi.py
- -

Bizim çalıştığımız klasör şuna benzer şekilde görünmeli:

- -
../django_projects/locallibrary/
- -

locallibrary proje altklasörü websitemiz için giriş noktası:

- -
    -
  • __init__.py Python'a bu klasöre Python paketi olarak davranması gerektiğini söyleyen boş bir dosya.
    • -
  • settings.py tüm website ayarlarının olduğu dosya. Buraya oluşturduğumuz uygulamaları, static dosyalarımızın bulunduğu yeri, veritabanı ayarlarını vs. kaydederiz.  
    • -
  • urls.py sitemizin url-view eşlemelerinin tanımladığımız yer. Burada tüm url eşlemelerini tanımlayabilsek de bazı eşlemeleri ileride göreceğimiz gibi uygulamalara bölmek daha yaygın kullanılır.
    • -
  • wsgi.py Django uygulamamızın web sunucusuyla iletişim kurmasına yardım eder. Şablon olarak düşünebilirsiniz.
    • -
- -

manage.py betiği(script) uygulama oluşturmakta, veritabanı işlemlerinde ve geliştirme ortamı sunucusunu(yerel sunucu: 127.0.0.1:8000) başlatmakta kullanılır. 

- -

Catalog uygulamasını oluşturma

- -

locallibrary projemizin içinde duracak olan catalog uygulamasını oluşturmak için aşağıdaki komutu çalıştırın (projemizin manage.py betiğinin de bulunduğu klasörde çalıştırılmalı):

- -
python3 manage.py startapp catalog
- -
-

Not: Yukarıdaki komut Linux/macOS X içindir. Windows'taki komut şu şekilde olmalı: py -3 manage.py startapp catalog

- -

Windows kullanıyorsanız, bu modül boyunca python3 yerine  py -3 yazmalısınız.

- -

Python 3.7.0 kullanıyorsanız sadece  py manage.py startapp catalog kullanmalısınız.

-
- -

Bu araç yeni bir klasör oluşturup içini uygulamamızın muhtelif kısımları için kullanılacak dosyalarla(aşağıda kalın olarak yazıldı) doldurur. Dosyaların çoğu amaçlarına uygun olarak isimlendirilmiştir (mesela view'lar views.py'da, Model'ler models.py'da, test'ler tests.py'da, site yönetim sayfası ayarları admin.py'da, uygulama kayıtları apps.py'da bulunur). Ayrıca bu dosyalar ilişkili oldukları nesnelerle çalışırken kullanılabilecek minimal bir kod şablonu da içerir.

- -

Proje klasörünün son hali şu şekilde görünmeli:

- -
locallibrary/
-    manage.py
-    locallibrary/
-    catalog/
-        admin.py
-        apps.py
-        models.py
-        tests.py
-        views.py
-        __init__.py
-        migrations/
-
- -

In addition we now have:

- -
    -
  • A migrations folder, used to store "migrations" — files that allow you to automatically update your database as you modify your models. 
    • -
  • __init__.py — an empty file created here so that Django/Python will recognise the folder as a Python Package and allow you to use its objects within other parts of the project.
    • -
- -
-

Note: Have you noticed what is missing from the files list above? While there is a place for your views and models, there is nowhere for you to put your url mappings, templates, and static files. We'll show you how to create them further along (these aren't needed in every website but they are needed in this example).

-
- -

Registering the catalog application

- -

Now that the application has been created we have to register it with the project so that it will be included when any tools are run (for example to add models to the database). Applications are registered by adding them to the INSTALLED_APPS list in the project settings. 

- -

Open the project settings file django_projects/locallibrary/locallibrary/settings.py and find the definition for the INSTALLED_APPS list. Then add a new line at the end of the list, as shown in bold below.

- -
INSTALLED_APPS = [
-    'django.contrib.admin',
-    'django.contrib.auth',
-    'django.contrib.contenttypes',
-    'django.contrib.sessions',
-    'django.contrib.messages',
-    'django.contrib.staticfiles',
-    'catalog.apps.CatalogConfig', 
-]
- -

The new line specifies the application configuration object (CatalogConfig) that was generated for you in /locallibrary/catalog/apps.py when you created the application.

- -
-

Note: You'll notice that there are already a lot of other INSTALLED_APPS (and MIDDLEWARE, further down in the settings file). These enable support for the Django administration site and as a result lots of the functionality it uses (including sessions, authentication, etc).

-
- -

Specifying the database

- -

This is also the point where you would normally specify the database to be used for the project — it makes sense to use the same database for development and production where possible, in order to avoid minor differences in behaviour.  You can find out about the different options in Databases (Django docs). 

- -

We'll use the SQLite database for this example, because we don't expect to require a lot of concurrent access on a demonstration database, and also because it requires no additional work to set up! You can see how this database is configured in settings.py (more information is also included below):

- -
DATABASES = {
-    'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
-        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
-    }
-}
-
- -

Because we are using SQLite, we don't need to do any further setup here. Let's move on!

- -

Other project settings

- -

The settings.py file is also used for configuring a number of other settings, but at this point you probably only want to change the TIME_ZONE — this should be made equal to a string from the standard List of tz database time zones (the TZ column in the table contains the values you want). Change your TIME_ZONE value to one of these strings appropriate for your time zone, for example:

- -
TIME_ZONE = 'Europe/London'
- -

There are two other settings you won't change now, but that you should be aware of:

- -
    -
  • SECRET_KEY. This is a secret key that is used as part of Django's website security strategy. If you're not protecting this code in development, you'll need to use a different code (perhaps read from an environment variable or file) when putting it into production. 
    • -
  • DEBUG. This enables debugging logs to be displayed on error, rather than HTTP status code responses. This should be set to False on production as debug information is useful for attackers, but for now we can keep it set to True.
    • -
- -

Hooking up the URL mapper

- -

The website is created with a URL mapper file (urls.py) in the project folder. While you can use this file to manage all your URL mappings, it is more usual to defer mappings to the associated application.

- -

Open locallibrary/locallibrary/urls.py and note the instructional text which explains some of the ways to use the URL mapper. 

- -
"""locallibrary URL Configuration
-
-The `urlpatterns` list routes URLs to views. For more information please see:
-    https://docs.djangoproject.com/en/2.0/topics/http/urls/
-Examples:
-Function views
-    1. Add an import:  from my_app import views
-    2. Add a URL to urlpatterns:  path('', views.home, name='home')
-Class-based views
-    1. Add an import:  from other_app.views import Home
-    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
-Including another URLconf
-    1. Import the include() function: from django.urls import include, path
-    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
-"""
-from django.contrib import admin
-from django.urls import path
-
-urlpatterns = [
-    path('admin/', admin.site.urls),
-]
-
- -

The URL mappings are managed through the urlpatterns variable, which is a Python list of path() functions. Each path() function either associates a URL pattern to a specific view, which will be displayed when the pattern is matched, or with another list of URL pattern testing code (in this second case, the pattern becomes the "base URL" for patterns defined in the target module). The urlpatterns list initially defines a single function that maps all URLs with the pattern admin/ to the module admin.site.urls , which contains the Administration application's own URL mapping definitions.

- -
-

Note: The route in path() is a string defining a URL pattern to match. This string might include a named variable (in angle brackets), e.g. 'catalog/<id>/'. This pattern will match a URL like /catalog/any_chars/ and pass any_chars to the view as a string with parameter name id). We discuss path methods and route patterns further in later topics.

-
- -

Add the lines below to the bottom of the file in order to add a new list item to the urlpatterns list. This new item includes a path() that forwards requests with the pattern catalog/ to the module catalog.urls (the file with the relative URL /catalog/urls.py).

- -
# Use include() to add paths from the catalog application
-from django.conf.urls import include
-from django.urls import path
-
-urlpatterns += [
-    path('catalog/', include('catalog.urls')),
-]
-
- -

Now let's redirect the root URL of our site (i.e. 127.0.0.1:8000) to the URL 127.0.0.1:8000/catalog/; this is the only app we'll be using in this project, so we might as well. To do this, we'll use a special view function (RedirectView), which takes as its first argument the new relative URL to redirect to (/catalog/) when the URL pattern specified in the path() function is matched (the root URL, in this case).

- -

Add the following lines, again to the bottom of the file:

- -
#Add URL maps to redirect the base URL to our application
-from django.views.generic import RedirectView
-urlpatterns += [
-    path('', RedirectView.as_view(url='/catalog/')),
-]
- -

Leave the first parameter of the path function empty to imply '/'. If you write the first parameter as '/' Django will give you the following warning when you start the development server:

- -
System check identified some issues:
-
-WARNINGS:
-?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'.
-Remove this slash as it is unnecessary.
-If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'.
-
- -

Django does not serve static files like CSS, JavaScript, and images by default, but it can be useful for the development web server to do so while you're creating your site. As a final addition to this URL mapper, you can enable the serving of static files during development by appending the following lines. 

- -

Add the following final block to the bottom of the file now:

- -
# Use static() to add url mapping to serve static files during development (only)
-from django.conf import settings
-from django.conf.urls.static import static
-
-urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
-
- -
-

Note: There are a number of ways to extend the urlpatterns list (above we just appended a new list item using the += operator to clearly separate the old and new code). We could have instead just included this new pattern-map in the original list definition:

- -
urlpatterns = [
-    path('admin/', admin.site.urls),
-    path('catalog/', include('catalog.urls')),
-    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
-] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
-
- -

In addition, we included the import line (from django.urls import include) with the code that uses it (so it is easy to see what we've added), but it is common to include all your import lines at the top of a Python file.

-
- -

As a final step, create a file inside your catalog folder called urls.py, and add the following text to define the (empty) imported urlpatterns. This is where we'll add our patterns as we build the application. 

- -
from django.urls import path
-from catalog import views
-
-
-urlpatterns = [
-
-]
-
- -

Testing the website framework

- -

At this point we have a complete skeleton project. The website doesn't actually do anything yet, but its worth running it to make sure that none of our changes have broken anything. 

- -

Before we do that, we should first run a database migration. This updates our database to include any models in our installed applications (and removes some build warnings).

- -

Running database migrations

- -

Django uses an Object-Relational-Mapper (ORM) to map Model definitions in the Django code to the data structure used by the underlying database. As we change our model definitions, Django tracks the changes and can create database migration scripts (in /locallibrary/catalog/migrations/) to automatically migrate the underlying data structure in the database to match the model.

- -

When we created the website Django automatically added a number of models for use by the admin section of the site (which we'll look at later). Run the following commands to define tables for those models in the database (make sure you are in the directory that contains manage.py):

- -
python3 manage.py makemigrations
-python3 manage.py migrate
-
- -
-

Important: You'll need to run the above commands every time your models change in a way that will affect the structure of the data that needs to be stored (including both addition and removal of whole models and individual fields).

-
- -

The makemigrations command creates (but does not apply) the migrations for all applications installed in your project (you can specify the application name as well to just run a migration for a single project). This gives you a chance to checkout the code for these migrations before they are applied — when you're a Django expert you may choose to tweak them slightly!

- -

The migrate command actually applies the migrations to your database (Django tracks which ones have been added to the current database).

- -
-

Note: See Migrations (Django docs) for additional information about the lesser-used migration commands.

-
- -

Running the website

- -

During development you can test the website by first serving it using the development web server, and then viewing it on your local web browser. 

- -
-

Note: The development web server is not robust or performant enough for production use, but it is a very easy way to get your Django website up and running during development to give it a convenient quick test. By default it will serve the site to your local computer (http://127.0.0.1:8000/), but you can also specify other computers on your network to serve to. For more information see django-admin and manage.py: runserver (Django docs).

-
- -

Run the development web server by calling the runserver command (in the same directory as manage.py):

- -
python3 manage.py runserver
-
- Performing system checks...
-
- System check identified no issues (0 silenced).
- August 15, 2018 - 16:11:26
- Django version 2.1, using settings 'locallibrary.settings'
- Starting development server at http://127.0.0.1:8000/
- Quit the server with CTRL-BREAK.
-
- -

Once the server is running you can view the site by navigating to http://127.0.0.1:8000/ in your local web browser. You should see a site error page that looks like this:

- -

Django Debug page for Django 2.0

- -

Don't worry! This error page is expected because we don't have any pages/urls defined in the catalogs.urls module (which we're redirected to when we get an URL to the root of the site). 

- -
-

Note: The above page demonstrates a great Django feature — automated debug logging. An error screen will be displayed with useful information whenever a page cannot be found, or any error is raised by the code. In this case we can see that the URL we've supplied doesn't match any of our URL patterns (as listed). The logging will be turned off during production (when we put the site live on the Web), in which case a less informative but more user-friendly page will be served.

-
- -

At this point we know that Django is working! 

- -
-

Note: You should re-run migrations and re-test the site whenever you make significant changes. It doesn't take very long!

-
- -

Challenge yourself

- -

The catalog/ directory contains files for the views, models, and other parts of the application. Open these files and inspect the boilerplate. 

- -

As you saw above, a URL-mapping for the Admin site has already been added in the project's urls.py. Navigate to the admin area in your browser and see what happens (you can infer the correct URL from the mapping above).

- -
    -
- -

Summary

- -

You have now created a complete skeleton website project, which you can go on to populate with urls, models, views, and templates.

- -

Now the skeleton for the Local Library website is complete and running, it's time to start writing the code that makes this website do what it is supposed to do. 

- -

See also

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/tr/learn/server-side/index.html b/files/tr/learn/server-side/index.html deleted file mode 100644 index 10a879b683..0000000000 --- a/files/tr/learn/server-side/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Server-side website programming -slug: Learn/Server-side -tags: - - Beginner - - CodingScripting - - Intro - - Landing - - Learn - - NeedsTranslation - - Server - - Server-side programming - - Topic - - TopicStub -translation_of: Learn/Server-side -original_slug: Öğren/Server-side ---- -

{{draft("Contact Hamish Willee via ~~chrisdavidmills if you have any questions about this work.")}}

- -

The Dynamic Websites – Server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.

- -

Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using HTML, CSS, and JavaScript), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.

- -

In the modern world of web development, learning about server-side development is highly recommended.

- -

Learning pathway

- -

Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.

- -

A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Simlarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".

- -

You will need to understand "how the web works". We recommend that you first read the following topics:

- - - -

With that basic understanding you'll be ready to work your way through the modules in this section. 

- -

Modules

- -

This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . 

- -
-
Server-side website programming first steps
-
This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.
-
Django Web Framework (Python)
-
Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.
-
Express (node.js/Javascript) Web Framework (TBD)
-
Express is a popular web framwork, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.
-
diff --git a/files/tr/mdn/about/index.html b/files/tr/mdn/about/index.html deleted file mode 100644 index 23852801e3..0000000000 --- a/files/tr/mdn/about/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: MDN Web Docs Hakkında -slug: MDN/About -tags: - - Dokümantasyon - - Lisanslar - - Telif Hakkı - - Topluluk -translation_of: MDN/About -original_slug: MDN/Hakkinda ---- -
{{MDNSidebar}}
- -
{{IncludeSubNav("/en-US/docs/MDN")}}
- -

MDN Web Docs (previously known as MDN — the Mozilla Developer Network) is an evolving learning platform for Web technologies and the software that powers the Web, including:

- - - -

Hedefimiz

- -

MDN's mission is simple: provide developers with the information they need to easily build projects on the open Web. If it's an open technology exposed to the Web, we want to document it.

- -

We also provide documentation about Mozilla products and how to build and contribute to Mozilla projects.

- -

If you're not sure whether a particular topic should be covered on MDN, read Does this belong on MDN?

- -

Nasıl yardım edebilirsin

- -

You don't need to be a professional coder or writer to help MDN! We have lots of ways you can help, from reviewing articles to be sure they make sense, to contributing text, to adding sample code. In fact, there are so many ways to help that we have a Getting Started page that helps you pick tasks to do based on your interests and how much time you have to spare!

- -

You can also help by promoting MDN on your own blog or website.

- -

MDN topluluğu

- -

Our community is a global one. We have amazing contributors all around the world who work in lots of different languages. If you'd like to learn more about us, or if you need help with MDN, check out our discussion forum or IRC channel! You can also keep up with what we're up to by following our Twitter account, @MozDevNet. You can also send tweets our way if you see something wrong or if you'd like to offer feedback (or great big thank yous) to our writers and contributors.

- -

Using MDN Web Docs content

- -

MDN's content is available free of charge, and under open source licenses.

- -

Telif hakları ve lisanslar

- -

MDN's content is entirely available under various open source licenses. This section covers the types of content we provide and what licenses are in effect for each.

- -

Documentation and articles

- -

MDN wiki documents have been prepared with the contributions of authors from both inside and outside the Mozilla Foundation. Unless otherwise indicated, the content is available under the terms of the Creative Commons Attribution-ShareAlike license (CC-BY-SA), v2.5 or any later version.

- -

When reusing MDN content, you need to ensure two things:

- -
    -
  1. -

    Attribution is given to the original content.

    - -

    Please attribute "Mozilla Contributors" and include a hyperlink (online) or URL (in print) to the specific wiki page for the content being sourced. For example, to provide attribution for this article, you can write:

    - -
    -

    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

    -
    - -

    Note that in the example, "Mozilla Contributors" links to the history of the cited page. See Best practices for attribution for further explanation.

    -
    2. -
  2. -

    Your reuse is published under the same license as the original content—CC-BY-SA v2.5 or any later version.

    -
    3. -
- -

Code samples and snippets

- -

Code samples added on or after August 20, 2010 are in the public domain (CC0). No licensing notice is necessary, but if you need one, you can use: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".

- -

Code samples added to this wiki before August 20, 2010 are available under the MIT license; you should insert the following attribution information into the MIT template: "© <date of last wiki page revision> <name of person who put it in the wiki>".

- -

You can determine which license a code sample is available under by browsing through the article's history. To view the history:

- -
    -
  1. Click the Edit in wiki button in the article header.  This takes you to the same article on the editable, wiki version of MDN Web Docs (but does not actually put the article in edit mode).  
    2. -
  2. Click the gear-shaped icon in the header of the wiki article, and choose History in the menu that appears.
    3. -
  3. Click View All, and then look for the most recent revision that occurred before August 20, 2010 (if any).
    4. -
  4. Click the date stamp of that revision to see the version of the article on that date.
    5. -
- -

If the sample exists in the revision you selected, then it was added before the licensing changed and is available under the terms of the MIT license. If it is not there, or there are no revisions before August 20, 2010, then it was added after the change and is in the public domain.

- -

Contributions

- -

If you wish to contribute to this wiki, you must make your documentation available under the Attribution-ShareAlike license (or occasionally an alternative license already specified by the page you are editing), and your code samples available under Creative Commons CC-0 (a Public Domain dedication). Adding to this wiki means you agree that your contributions will be made available under those licenses.

- -

Some older content was made available under a license other than those described above; these are indicated at the bottom of each page by way of an Alternate License Block.

- -
-

No new pages may be created using alternate licenses.

-
- -

Copyright for contributed materials remains with the author unless the author assigns it to someone else.

- -

If you have any questions or concerns about anything discussed here, please contact the MDN administrators.

- -

Logos, trademarks, service marks and wordmarks

- -
-

The rights in the trademarks, logos, and service marks of the Mozilla Foundation, as well as the look and feel of this web site, are not licensed under the Creative Commons license, and to the extent they are works of authorship (like logos and graphic design), they are not included in the work that is licensed under those terms. If you use the text of documents, and wish to also use any of these rights, or if you have any other questions about complying with our licensing terms for this collection, you should contact the Mozilla Foundation here: licensing@mozilla.org.

- -

Linking to MDN

- -

See this article for guidance on linking to MDN for best practices when linking.

- -

Downloading content

- -

Single pages

- -

You can retrieve the content of a single page on MDN by adding URL parameters to specify what format you want.

- -

Third-party tools

- -

You can view MDN content via third-party tools like Dash (for macOS) and Zeal (for Linux and Windows).

- -

Kapeli also publishes offline MDN docs covering HTML, CSS, JavaScript, SVG, and XSLT.

- -

Reporting problems with MDN Web Docs

- -

See How to report a problem on MDN.

- -

History of MDN Web Docs

- -

The MDN Web Docs (previously Mozilla Developer Network (MDN), previously Mozilla Developer Center (MDC), a.k.a. Devmo) project started in early 2005, when the Mozilla Foundation obtained a license from AOL to use the original Netscape DevEdge content. The DevEdge content was mined for still-useful material, which was then migrated by volunteers into this wiki so it would be easier to update and maintain.

- -

The name was changed to MDN Web Docs in June 2017. See The Future of MDN: A Focus on Web Docs for the rationale behind this decision.

- -

You can find more history of MDN on our 10th anniversary celebration page, including an oral history by some of the people who were involved.

- -

Mozilla Hakkında

- -

Whether you want to learn more about who we are, how to be a part of Mozilla or just where to find us, you've come to the right place. To find out what drives us and makes us different, please visit our mission page.

diff --git a/files/tr/mdn/at_ten/index.html b/files/tr/mdn/at_ten/index.html deleted file mode 100644 index 2f7446ff3b..0000000000 --- a/files/tr/mdn/at_ten/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: MDN 10'unda -slug: MDN/At_ten -translation_of: MDN_at_ten -original_slug: MDN_onunda ---- -
İnternetinizin 10 yıldır belgelenmesini kutlayın.
- -
-
-

MDN'in Tarihi

- -

2005'in başında, idealistlerden oluşan küçük bir takım, tüm Web geliştiriciler için yeni, ücretsiz ve topluluk yapımı bir online kaynak oluşturmak için yola çıktı. Dahice ama sıradışı fikirleri günümüzün Mozilla Developer Network'ü haline geldi—Tüm açık kaynak web projeleri için ham madde. On yıldan sonra, Global topluluğumuz her zamankinden daha büyük,ve  hala beraber dökümantasyon, web teknolojileri için örnek kod ve öğrenme kaynakları, CSS, HTML, JavaScript ve özgür Web'i güçlü kılan herşeyi oluşturmaya devam ediyoruz.

- -

Daha Fazla about the history

- -

MDN'e katkı

- -

On yıldır, MDN topluluğu özgür Web'i belgeliyor. Yazım hatalarını düzeltmeden yep yeni bir API'nin tüm takımını yazmaya, herkes sunmak için bir şeye sahip ve no contribution is too large or too small. Mozillians topluluğumuzun seçkin üyeleri tarafından 90,000 üzerinde yazılmış veya tercüme edilmiş sayfaya sahibiz. Sen de onlardan biri olabilirsin.

- -

Daha fazla about contributing

- -

 

- -

 

-
- -
{{TenthCampaignQuote}}
- - - -
    -
  1. MDN 10'unda
    2. -
  2. MDN'in tarihi
    3. -
  3. MDN'e katkı
    4. -
-
diff --git a/files/tr/mdn/contribute/feedback/index.html b/files/tr/mdn/contribute/feedback/index.html deleted file mode 100644 index 1695efe07d..0000000000 --- a/files/tr/mdn/contribute/feedback/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: MDN hakkında geri bildirim gönder -slug: MDN/Contribute/Feedback -translation_of: MDN/Contribute/Feedback ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav ( "/ tr / docs / MDN")}}
- -

Mozilla Geliştirici Ağı'na Hoşgeldiniz! Önerileriniz ya da MDN'i kullanmada problemleriniz varsa, doğru yerdesiniz.

- -

Geri bildirim sunmakla ilgilendiğiniz gerçeği sizi Mozilla topluluğunun bir parçası haline getirir ve ilginiz için şimdiden teşekkür ederiz.

- -

İçgörünüzü sunmak için çeşitli seçenekleriniz vardır; bu makale size yardımcı olacaktır.

- -

Belgelendirme Güncelliği

- -

Herşeyden önce, belgelendirme ile ilgili bir problem gördüğünüzde, hataları düzeltme özgürlüğünüz bulunmaktadır.

- -
    -
  1. Github kullanarak oturum açın.
    2. -
  2. Düzenleyiciyi açmak için herhangi bir sayfadaki mavi Edit düğmesini tıklayın.
    3. -
  3. Değişiklikleri tamamladığınızda Publish düğmesini tıklayın.
    4. -
- -

Buradaki belgeler bir wikidedir ve bir gönüllü ekibi ve ücretli personel tarafından küratörlüğünü yapar, bu yüzden utangaç olmayın - dilbilginiz mükemmel olmak zorunda değildir. Bir hata yaparsanız temizleriz; zarar yok!

- -

MDN belgelerine katkıda bulunmak hakkında daha fazla bilgi için:

- - - -

Sohbete katıl

- -

Bizimle konuş! MDN içeriği üzerinde çalışan diğer insanlarla iletişim kurmanın birkaç yolu vardır.

- -

(Senkronize) Sohbet

- -

-

(Asynchronous) Discussions

- - -

Longer-term discussions happen on our MDN discussion forum. You can post to the forum via email to mdn@mozilla-community.org. If you join the forum, you can choose to have notifications about discussions sent to you via email as well.

- -

Sorun Bildir

- -

Belge Sorunları

- -

Eğer belge içerisinde bir sorun görür ve herhangi bir sebeple onu düzeltemezseniz sorunu bildirebilirsiniz! Bu formu herhangi bir belge sorunu için, basit bir düzeltme ya da yeni bir içerik talebi için kullanabilirsiniz. Daha önce de belirtildiği gibi, değişiklikleri kendinize katkıda bulunmaya davet ediyoruz, ancak bu seçenek sizin için de kullanılabilir.

- -

Site sorunları

- -

Eğer MDN web sitesi üzerinde problemlerle karşılaşırsanız ya da siteyle ilgili yeni özellikler için fikirleriniz varsa MDN geliştirici takımına bildirimde bulunabilirsiniz. 

diff --git a/files/tr/mdn/contribute/getting_started/index.html b/files/tr/mdn/contribute/getting_started/index.html deleted file mode 100644 index 3c2d3639af..0000000000 --- a/files/tr/mdn/contribute/getting_started/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: MDN ile Başlarken -slug: MDN/Contribute/Getting_started -tags: - - Başlarken - - Giriş - - MDN Meta - - Rehber - - Yeni başlayanlar -translation_of: MDN/Contribute/Getting_started ---- -
{{MDNSideBar}}
- -

Biz geliştiricilerden oluşan, marka, tarayıcı veya platform gözetmeden, daha iyi bir internet için kaynaklar inşa eden özgür bir topluluğuz. Herkes katkıda bulunabilir ve katkıda bulunan herkes bizi daha güçlü yapar. Beraber İnternetteki inovasyonlarımıza devam edip çoğunluğun iyiliği için hizmet edebiliriz.

- -

MDN'nin her parçası (dökümanlar, demolar ve sitenin kendisi)  geliştiricilerin özgür topluluğu tarafından oluşturulmuştur, ama sizin katkılarınız olmadan da yapılamazdı!

- -

3 Basit Adımda MDN

- -

MDN herkesin içerik ekleyip düzenleyebildiği bir wiki'dir. Bir programcı olmanıza veya teknoloji hakkında çok şey bilmenize gerek yok. Yapılması gereken çok şey var, basitten (düzeltme okuması ve dilbilgisi düzeltme) karmaşık olanlara kadar (API dökümantasyonu yazmak).

- -

Katkıda bulunmak kolay ve güvenlidir. Hata yapsanız bile kolaylıkla düzeltilir. Eğer yaptıklarınızın tam olarak nasıl görünmesi gerektiğini bilmiyorsanız veya dil bilginiz o kadar iyi değilse bile, endişelenmeyin! MDN'deki içeriklerin olabildiğince iyi olduğuna emin olmak için çalışan bir takımımız var. Biri sizin çalışmanız üzerinden geçip düzenli ve güzel yazıldığına emin olacaktır. Bildiklerinizi paylaşın ve güçlü yanlarınızı takip edin.

- -

Adım 1: MDN Hesabı Oluşturun

- -

MDN'e katkıda bulunmaya başlamak için, bir MDN hesabına ihtiyacınız var. Ayrıntılar için how to create an account sayfasına bakın. MDN hesabı oluşturmadan önce bir GitHub hesabına ihtiyacınız olduğunu unutmayın, çünkü şu anda doğrulama için GitHub kullanıyoruz.

- -

Adım 2: Yapacağınız işi seçin

- -

Şu an üye girişi yapmış bulunmaktasınız, aşağıdaki farklı iş türlerinin açıklamalarını okuyun ve size en uygun olanı seçin. İstediğiniz işi seçebilir ve katkıda bulunmaya başlayabilirsiniz.

- -

Adım 3: Görevi yapın

- -

Yapacağınız görev türüne karar verdikten sonra, ilgili sayfayı, kod örneğini, vb. bulun ve yapın!

- -

İşi mükemmel yapmak konusunda endişelenmeyin; diğer MDN Gönüllüleri gözden kaçan hataları düzeltmek için buradalar. Eğer sorularınız olursa mail listelerindeki bilgiler ve cevaplarınızı alabileceğiniz sohbet kanalları için Community sayfasını ziyaret edin.

- -
-

Note: Eğer gerçek site üzerinde değişiklik yapmadan önce denemeler yapmak istiyorsanız, deneylerinizi yapabileceğiniz bir Sandbox sayfamız bulunmaktadır. Lütfen bu sayfa üzerinde yapacağınız değişikleri sınırlayın. Lütfen bu sayfa üzerinde sırf ne olacağını görmek için gereksiz değişiklikler yapmayın; bu diğerlerinin düzeltmesi gereken bir karışıklık yaratıyor.

-
- -

Seçtiğiniz işi tamamladıktan sonra, başka bir işi almakta özgür hissedin veya other things you can do on MDN sayfasını ziyaret edin.

- -

Olası iş türleri

- -

Yeteneklerinize ve ilgi alanlarınıza göre katkıda bulunmak için takip edeceğiniz birden çok yol var. Bazı işler zorlayıcı olsa da, çok fazla basit işimiz de var. Bir çoğu sadece 5 dakika (veya daha az!) zamanınızı alıyor. İş ve işin kısa açıklaması ile birlikte hangi tür işin yaklaşık ne kadar zaman aldığını bulacaksınız.

- -

Seçenek 1: Kelimeleri seviyorum

- -

Bize hali hazırdaki dökümanları kontrol ederek veya düzenleyerek ve doğru etiketleri uygulayarak yardımcı olabilirsiniz.

- - - -
Not: Eğer bir döküman inceliyor veya yenisini yazıyorsanız, Style Guide sayfasını incelemenizi rica ediyoruz. Bu dökümanların tutarlı olduğuna emin olmanızı sağlayacaktır.
- -

Seçenek 2: Kodlamayı seviyorum

- -

Daha fazla kod örneğine ihtiyacımız var! Ayrıca sitemizin platformu Kuma'nın geliştirilmesinde de yardımcı olabilirsin!

- - - -

Seçenek 3: Hem kodlamayı hem de kelimeleri seviyorum

- -

Elimizde, yeni makaleler yazmak, teknik doğruluk için döküman incelemek veya dökümanları sahiplenmek gibi hem teknik hem de dil becerileri gerektiren işler var.

- - - -

Seçenek 4: MDN' i kendi dilimde istiyorum

- -

MDN'deki Bütün yerellleştirme ve çeviri işleri bizim müthiş gönüllü topluluğumuz tarafından tarafından yapılıyor.

- - - -

Seçenek 5: Bazı yanlış bilgiler buldum ama nasıl düzelteceğimi bilmiyorum

- -

Bulduğunuz sorunları filing a documentation bug sayfasından bildirebilirsiniz. (5 dakika)

- -

Aşağıdaki bilgileri kullanın:

- - - - - - - - - - - - - - - - - - - - - - - - -
Bugzilla fieldValue
productDeveloper Documentation
component[uygun bir başlık seçin, veya hangisinin doğru olduğuna emin değilseniz "General" başlığını seçin]
URLSorunu bulduğunuz sayfanın adresi
DescriptionAs much as you know or have time to describe about the problem and where to find correct information. This can include people ("talk to so-and-so") as well as Web links.
- -

MDN'de yapabileceğiniz diğer Şeyler

- - diff --git a/files/tr/mdn/contribute/howto/create_and_edit_pages/index.html b/files/tr/mdn/contribute/howto/create_and_edit_pages/index.html deleted file mode 100644 index ee54c74064..0000000000 --- a/files/tr/mdn/contribute/howto/create_and_edit_pages/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Sayfalar nasıl oluşturulur ve düzenlenir -slug: MDN/Contribute/Howto/Create_and_edit_pages -tags: - - Başlangıç - - Giriş - - Klavuz - - Nasıl -translation_of: MDN/Contribute/Howto/Create_and_edit_pages -original_slug: MDN/Contribute/Howto/Sayfalar_nasil_olusturulur_duzenlenir ---- -
bilgisayar tamircisi
diff --git a/files/tr/mdn/contribute/howto/index.html b/files/tr/mdn/contribute/howto/index.html deleted file mode 100644 index 81a6f8d02f..0000000000 --- a/files/tr/mdn/contribute/howto/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: How-to guides -slug: MDN/Contribute/Howto -tags: - - Landing - - MDN Meta - - NeedsTranslation - - TopicStub -translation_of: MDN/Contribute/Howto ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Bu makaleler, MDN'ye katkıda bulunma hedeflerini gerçekleştirmek için adım adım kılavuzlar kullanılarak sağlanır.

- -

{{LandingPageListSubpages}}

diff --git a/files/tr/mdn/contribute/index.html b/files/tr/mdn/contribute/index.html deleted file mode 100644 index ca83df13aa..0000000000 --- a/files/tr/mdn/contribute/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: MDN'ye Katkıda Bulunmak -slug: MDN/Contribute -tags: - - Başlangıç - - Belgelendirme - - Kılavuz - - MDN -translation_of: MDN/Contribute ---- -
{{MDNSidebar}}
- -

Merhabalar! Bu sayfayı ziyaret ederek, MDN'ye katkıda bulunmanın ilk adımını attınız. Buradaki kılavuzlar MDN'ye katkıda bulunmanın her kısmını anlatıyor: tasarım kurallarını, yazı düzenleyicisini, araçları kullanmayı ve daha fazlasını.

- -
-
-

Katkıda bulunanlar için kılavuzlar

- -
-
Başlarken
-
İlk katkınızı yaparken size yardım edecek hızlı ve kısa bir başlangıç kılavuzu.
-
İçerik ve Tasarım Kılavuzu
-
MDN içerik ve tasarım kılavuzu size yazım stili, sayfa yapısı ve içerik düzeni hakkında detaylı bilgi verir. Bunun sebebi yazdığınız içeriğin MDN'nin diğer içeriklerine uygun olmasını sağlamaktır.
-
Düzenleyici Kılavuzu
-
MDN'nin düzenleyicisini tanımak için kapsamlı bir kılavuz.
-
Makaleleri Değerlendirme
-
MDN'deki bütün dökümanların olabildiğince kullanışlı ve okunaklı olabilmesi için teknik ve yazımsal değerlendirme kılavuzu.
-
Terminolojimiz ve Geleneklerimiz
-
Terminoloji ve gelenekler kılavumuz sizlere terimleri nasıl açıklayacağınız hakkında bilgi verir.
-
MDN Topluluğu ile Çalışmak
-
MDN'ye katkıda bulunurken aklınıza takılacak soruların cevapları için size topluluk ile iletişim kurmayı ve onlardan nasıl yardım alabileceğinizi öğreten bir kılavuz.
-
Sık Sorulan Sorular
-
MDN'ye katkıda bulunurken en çok sorulan soruların cevapları ve ipuçları.
-
- -
-
Kuma'ya Katkıda Bulunmak
-
Kuma projesine katkıda bulunma kılavuzu. Kuma, MDN Web Sitesini temelini oluşturan projedir.
-
-
- -
-

Nasıl yapılır?

- -

Nasıl-Yapılırlar kılavuzlarımız MDN'ye katkıda bulunurken belli şeyleri nasıl yapacağınızı adım adım anlatan talimatlardır.

- -
-
CSS özellik dokümantasyonu nasıl oluşturulur?
-
CSS özelliklerinin dökümantasyonunu hazırlama kılavuzu. Bütün CSS özellik dökümanları stil ve düzen olarak bu makalede açıklandığı gibi olmalıdır.
-
HTML element dökümantasyonu nasıl oluşturulur?
-
Bu kılavuz HTML elementlerini dökümante ederken diğer makalelere uymanız için gereken bilgileri içerir.
-
Doğru bir şekilde etiketleme nasıl yapılır?
-
Bu kılavuz size MDN'deki bazı etiketlerin standart anlamlarını ve etiketleme yaparken uymanız gereken kuralları öğretir.
-
Web Şartnamesi nasıl okunur?
-
Bu kılavuz size standart Web Şartnamesini düzgünce okumayı ve yorumlamayı öğretir. O makaleleri okumak bazen can alıcı olabiliyor, onları okumayı ve yorumlamayı öğrenebilirseniz bu sizlerin daha iyi bir dökümantasyon hazırlamasına neden olabilir.
-
- -

Yerelleştirme

- -
-
Yerelleştirme Kılavuzu Turu
-
Bu kılavuz size MDN'deki dökümanları nasıl çevireceğiniz hakkında kısa bilgiler sunar.
-
Yerelleştirme Kılavuzu
-
Bu kılavuz size nasıl çeviri yapmanız gerektiği hakkında detaylı bilgiler sunar.
-
Yerelleştirme Projeleri
-
Kendi dilinizdeki yerelleştirme projesini bulun - eğer yoksa da nasıl yeni bir tane başlatabileceğinizi öğrenin!
-
-
-
- -

 

diff --git a/files/tr/mdn/index.html b/files/tr/mdn/index.html deleted file mode 100644 index 386beab511..0000000000 --- a/files/tr/mdn/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: The MDN project -slug: MDN -tags: - - Documentation - - MDN -translation_of: MDN ---- -
{{MDNSidebar}}
- -

Mozilla Developer Network (MDN), bizlerin açık Web, Mozilla Teknolojileri, Firefox OS ve diğer web teknolojileri hakkında dökümantasyon yaptığımız bir wikidir. İçerik eklemek veya düzenlemek isteyen herkese açıktır. Bir programcı olmanıza veya teknoloji hakında çok şey bilmenize gerek yoktur; tamamlanacak birçok basitten karmaşığa (gözden geçirmekten ve yazım düzeltmekten, API dökümantasyonu yazmaya kadar) farklı görevler vardır.

- -
-

MDN Web Dokümantasyonunun amacı; geliştiricilere kolay bir şekilde web tabanlı projeler yapabilmeleri için ihtiyaç duydukları bilgileri sağlamaktır.
- Seni de yardım etmeye davet ediyoruz!

-
- -

Yardımınıza ihtiyacımız var! Bu kolay. İzin almak ya da hata yapmak hakkında endişelenmeyin. Ayrıca, lütfen MDN Topluluğu'nu tanıyın; size yardım etmek için buradayız!

- -
    -
  • Yeniler için hızlı başlangıç - -

    MDN'de yenisin ve buranın daha iyi hale getirilmesi için nasıl yardım edeceğini mi öğrenmek istiyorsun? Buradan başla!

    -
    • -
  • Gelişmiş bir kullanıcıyım -

    Rahat hissettiken sonra, MDN gönüllüleri için hazırlanmış bütün ve derinlemesine rehberimize erişin.

    -
    • -
  • Dünyaya Yay -

    Eğer MDN'yi seversen, dünyaya yayılmasına yardım et! MDN'yi tanıtmak için sanatsal içerikler, araçlar ve rehberler bulun.

    -
    • -
diff --git a/files/tr/mdn/tools/index.html b/files/tr/mdn/tools/index.html deleted file mode 100644 index 912a00f053..0000000000 --- a/files/tr/mdn/tools/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: MDN tools -slug: MDN/Tools -tags: - - Landing - - MDN Meta - - NeedsTranslation - - Tools - - TopicStub -translation_of: MDN/Tools ---- -
{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}
- -

MDN offers a number of features that make it easier to track progress, manage content, and keep up with the latest changes to the site.

- -

{{LandingPageListSubpages}}

diff --git a/files/tr/mdn/tools/kumascript/troubleshooting/index.html b/files/tr/mdn/tools/kumascript/troubleshooting/index.html deleted file mode 100644 index 87b7e85fe3..0000000000 --- a/files/tr/mdn/tools/kumascript/troubleshooting/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Troubleshooting KumaScript errors -slug: MDN/Tools/KumaScript/Troubleshooting -tags: - - HRCTelekom - - KumaScript - - Kılavuz - - MDN Meta - - sabır -translation_of: MDN/Tools/KumaScript/Troubleshooting -original_slug: MDN/Kuma/Troubleshooting_KumaScript_errors ---- -
{{MDNSidebar}} 
- -
-

KumaScript bir sayfada görünen hatalar onların büyük korkutucu kırmızı kutularda, okuyuculara-koyarak, ama neyse bir MDN hesabı olan herkese böyle bir hatayı düzeltmek için bir belgeyi düzenleyebilir çok olabilir. Bir sayfa bir hata varsa bunun listesine eklenir hatalarla belgeler . Sitesi editörler düzenli bulup düzeltme hataları için bu listeyi gözden geçirin. Bu makale KumaScript hatası dört tip ayrıntıları ve bazı bunları düzeltmek için uygulayabileceğiniz adımları tekrarlayın.

-
- -

DocumentParsingError

- -

DocumentParsingErrorKumaScript belgenin kendisinde sorun anlayış şey olduğunda hataları görünür. En sık karşılaşılan neden bir yazım hatasıdır makro .

- -

Kontrol:

- -
-
Bir makro çağırmak amacı gütmeden küme parantezleri kullanın.
-
bir makro uğramadan bir belgede yazma \ {gerekiyorsa böyle bir \ ile kaçabilir: \\{
-
Makro parametrede özel karakterin kullanın.
-
Eğer onlar böyle bir \ ile kaçan edilebilir bir makro parametrenin bir "a \ içini ya kullanmanız gerekirse: \\ya\"
-
Makro parametreler arasındaki virgül eksik.
-
Makro parametreler ancak parametrelerin listesinin sonunda bir virgül (,) ile sınırlanmış olması gerekir; örneğin \{\{anch("top", "Back to top")}}.
-
Bir makro çağrısı içinde görünen HTML etiketleri
-
Eğer bir makroya stil uygularsanız, örneğin bir, çünkü çoğu zaman kıracak </code>etiketinin kaynak kodda makro kodu içinde görünmüş olabilir. Orada ne olduğunu görmek ve gereksiz stil kaldırmak için kaynak görünümünü kontrol edin.
-
- -
    -
- -

TemplateLoadingError

- -

TemplateLoadingErrorKumaScript bulmakta zorluk sahip olduğunda hataları görünür makro bir sayfada dahil etmek.

- -

Kontrol:

- -
-
Makro adları veya yeniden adlandırılmış makroları yanlış yazılmış.
-
Sen doğru adlandırılmış olup olmadığını görmek için makro için şablon sayfasını ziyaret deneyebilirsiniz. Şablon sayfanın URL adresinin sonuna şablon adını ekleyerek yapılabilir https://developer.mozilla.org/en-US/docs/Template: — örneğin şablon sayfası \{\{anch("top", "Back to top")}}  olan https://developer.mozilla.org/en-US/docs/Template:anch .
-
- Kısmi bir listesi vardır MDN'yi için makrolar bakıyorsun mevcut makro veya onun doğru / yeni yazım içerebilir.
-
- -
-

İpucu: Sen hızlı ve kolay yapabiliriz bir ekleyerek belirli bir makro atlamak için arama anahtar kelimesini Firefox'a. <<< DAHA ÇOK YAKINDA >>

-
- -

TemplateExecutionError

- -

TemplateExecutionErrorKumaScript makro bir hatayla karşılaştığında hataları görünür. Bu hatalar sadece yönetici kullanıcılar tarafından sabit ve böcek olarak rapor alınması gerektiği ortaya edilebilir.

- -

Zaten sabit edilmemiş olduğunu görmek için bir hata kontrolü bildirmeden önce. Sen basılı tutarak size sayfanın yeni bir kopyasını vermek KumaScript zorlayarak yapabilirsiniz shiftEğer (sayfayı yenileyin iken Shift + Ctrl + R Windows / Linux üzerinde Shift + Cmd + R Mac'te).

- -

Hata devam ederse, Hata bildir . Sayfanın URL'sini ve hata metnini ekleyin.

- -

Hata & Bilinmeyen

- -

Bu kategori hataları onlar hata diğer tür biri değilse sonuna kadar olduğunu.

- -

Genellikle (ama her zaman değil) bu hatalar MDN'yi tüm etkileyen bir sorun ile ilgilidir ve bir iki dakika bekledikten sonra basılı tutarak uzak silinebilir shiftsayfayı yenileyin ederken ( Shift + Ctrl + R Windows / Linux üzerinde, Shift + Cmd + R Mac),. Bu hata devam ederse lütfen bir hatayı bildirmek . Sayfanın URL'sini ve hata metnini ekleyin.

- -

HRC Telekom

- -

ağaçlı tepe

- -

HurCloud

- -

Sebir Teknoloji

diff --git a/files/tr/mdn/yari/index.html b/files/tr/mdn/yari/index.html deleted file mode 100644 index e6bf90982e..0000000000 --- a/files/tr/mdn/yari/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: 'Kuma: MDN''s wiki platform' -slug: MDN/Yari -tags: - - Kuma - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Kuma -original_slug: MDN/Kuma ---- -
{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Kuma is the Django code that powers MDN Web Docs.

- -

{{SubpagesWithSummaries}}

- -

Get involved with Kuma

- -

To get involved with Kuma:

- - diff --git a/files/tr/mozilla/add-ons/index.html b/files/tr/mozilla/add-ons/index.html deleted file mode 100644 index f754e3a366..0000000000 --- a/files/tr/mozilla/add-ons/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Eklentiler -slug: Mozilla/Add-ons -tags: - - Eklentiler - - Landing - - Mozilla - - uzantılar -translation_of: Mozilla/Add-ons -original_slug: Mozilla/Eklentiler ---- -
Mozilla uygulamalarını değiştirin ve genişletin.
- -

Eklentiler, Gecko-tabanlı uygulamalara (Firefox,SeaMonkey ve Thunderbird gibi) yeni fonksiyonellikler eklerler. İki çeşit ana eklenti tipi vardır: Uzantılar, uygulamaya yeni özellikler eklerler, ve Temalar ise kullanıcı arayüzünü modifiye ederler.

- -

Her iki eklenti tipi için Mozilla, AMO diye bilinen, addons.mozilla.org'da bir dizinde çalışır. AMO'ya gönderdiğiniz eklentiler, gözden geçirilir ve incelemeyi geçtikten sonra  kullanıcılara uygun hale gelir. Eklentiler AMO'ya gönderilmek zorunda değildir, ama gönderilirse, kullanıcılar gözden geçirilmiş eklentilere güvenebilirler ve kullanışlı eklentiler için bir kaynak olan AMO görünürlüğünden faydalanabilirsiniz.

- -

Eklentiler, onları barındıran uygulamanın davranışını büyük ölçüden etkileyebilirler. Bu sebeple eklentilerin, kullanıcılara iyi bir deneyim sağlamasına yardım etmek için kuralları geliştirdik.Bu kurallar, eklenti addons.mozilla.org'da barındırılsın ya da barındırlmasın, bütün eklentiler için geçerlidir.

- -
-

Uzantılar

- -

Uzantılar, Firefox ve Thunderbird gibi Mozilla uygulamarına yeni fonksiyonellikler eklerler. Sekmeleri yönetmek için farklı bir yol gibi yeni özellikler ekleyebilir veya belirli web sitelerinin kullanılabilirliğini ve güvenliğini atırmak için web içeriğini değiştirebilirler.

- -

Uzantıları yaratabileceğiniz üç farklı teknik vardır: Add-on SDK-tabanlı uzantılar, manüel olarak önyüklenmiş yeniden başlatma gerektirmeyen uzantılar, legacy uzantılar.

- - - -
-

WebExtensions

- -

Biz, WebExtensions olarak adlandırılan ve Firefox için ve aynı zaman Google ve Opera tarafından kullanılanılan sistemlerle büyük ölçüde uyumlu olacak, eklenti geliştirmenin yeni bir yolu olan bir sistem üzerinde çalışıyoruz.

- -

Gelecekte, Firefox için tercih edilen bir uygulama geliştirme yolu olacaktır.

- -

Şu anda bu uygulama deneyseldir, ama yine de bir göz atmak isterseniz see the docs here bağlantısından dökümanlara ulaşabilirsiniz.

-
- -

Eğer yapabiliyorsanız, yeniden başlatma gerektirmeyen mekanızmayı kullanan Add-on SDK-tabanlı tekniği kullanmak uygundur, eğer bu teknik sizin ihtiyacınız için yeterli değilse, manuel olanı, JavaScript API'leri kullanmayan ikinci yöntemi uygulayın.

- -

Teknik seçiminde daha fazla bilgi için, okuyun comparison.

- -

Hata ayıklama

- -

Eklenti geliştirmede, hangi satırlarda hatalar yapıldığını görmek hata ayıklama olmadan mümkün değildir. Masaüstü için Setting Up a Development Environment, mobil için(Android/iOS) Debugging Firefox for Android with WebIDE 'ya göz atın. Mobil cihazlarda meydana gelen hataları yakalamak için masaüstü tarayıcı araçlarından WebIDE kullanılır.

- -
-
-

Önerilen Pratikler

- -

Uzantınızı hangi teknikle geliştirdiğinizin önemi olmamasına rağmen, mümkün olduğunca iyi bir kullanıcı deneyimi sağlaması için birkaç yönerge vardır.

- -
-
Performans
-
Uzantınızın hızlı, duyarlı ve bellek-tasarruflu olmasını sağlamak için.
-
Güvenlik
-
Zararlı web sitelerinin uzantınızı etkisi altına almamasını sağlamak için.
-
Etiquette
-
uzantınızın diğer uzantılar ile uyum içerisinde çalışması için.
-
-
- -
-

Uygulama Özel

- -

Çoğu dokümantasyon, masaüstü Firefox için geliştirme yapıyor olduğunuz varsayar. Eğer diğer bir Gecko tabanlı uygulama için geliştirme yapıyorsanız, bilmeniz gereken başlıca farklılıklar vardır.

- -
-
Thunderbird
-
Thunderbird mail istemcisi için uzantılar geliştirmek için.
-
Firefox Android
-
Firefox Android için uzantılar geliştirmek için.
-
SeaMonkey
-
SeaMonkey yazılım takımı için uzantılar geliştirmek için.
-
-
-
- -
-

Temalar

- -

Temalar, kullanıcı arayüzünü ihtiyaca göre düzenleyebileceğiniz eklentilerdir. İki çeşit tema vardır: Lightweight temalar ve complete temalar.

- -
-
-

Lightweight temalar, diğerine göre uygulanması daha basittir, fakat sağladığı düzenleme alanı çok limitlidir.

-
- -
-

Complete temalar ile kullanıcı arayüzünde daha derin modifikasyonlar yapabilirsiniz. Complete temaların dökümantasyonu güncel değildir, ancak olası güncelleştirmeler aynı linke bağlıdır.

-
-
- -
-

Diğer çeşit eklentiler

- -

Search engine plugins basit ve özel bir çeşit eklenti tipidir: arama alanına yeni bir arama motoru eklerler.

- -

Plugins help the application understand web content that it does not natively support. NPAPI plugins are a legacy technology and new sites should not use them. In general, plugins are not available on most modern mobile systems including, and websites should transition away from using plugins.

- -
{{AddonSidebar}}
diff --git a/files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html deleted file mode 100644 index 3f4af92620..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Extending the developer tools -slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools -tags: - - DevTools - - Eklenti - - Kılavuz - - Türkçe Web App DevOp - - Uzantıları - - WebExtensions - - İhtiyaçları Ayrıcalıkları -translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools -original_slug: Mozilla/Eklentiler/WebExtensions/Extending_the_developer_tools ---- -
{{AddonSidebar}}
- -
-

API'leri dayanmasına rağmen onlar Firefox 55. bulunmayan bu sayfa devtools API'leri açıklamaktadır Krom devtools API'ler , henüz Firefox'ta uygulanmadı ve bu nedenle burada belgelere alınmamıştır hala pek çok özellik vardır. Özellikleri şu anda bakın eksik olduğunu görmek için devtools API'larından Sınırlamaları .

-
- -

Sen tarayıcının yerleşik geliştirici araçlarını genişletmek için WebExtensions API'leri kullanabilirsiniz. Bir devtools uzantısı oluşturmak için, "include devtools_page içinde" tuşuna manifest.json :

- -
"Devtools_page": "devtools / devtools-sayfa.html"
- -

Bu anahtarın değeri sizin uzantısı ile birlikte olmuş bir HTML dosyasına işaret eden bir URL'dir. URL Manifest.json dosyasının kendisini göreli olmalıdır.

- -

HTML dosyası devtools sayfası olarak adlandırılır, uzantısında özel bir sayfa tanımlar.

- -

devtools sayfa

- -

devtools sayfa tarayıcı devtools açıldığında yüklenen ve kapatıldığında kaldırılır. dolayısıyla birden fazla devtools sayfa - - devtools pencere tek bir sekme ile ilişkili olduğu için, birden fazla devtools pencere için oldukça mümkün olduğunu Not aynı anda var olması.

- -

Devtools sayfa görünür bir DOM yok, ama kullanan JavaScript kaynaklarını içerebilir <script>etiketleri. Kaynaklar uzantısı kendisi ile birlikte alınmalıdır. Kaynaklar erişebilirsiniz:

- - - -

Not devtools sayfasının başka WebExtension API'leri erişmek etmediğini ve arka plan sayfası devtools API'ler erişim elde etmez. Bunun yerine, devtools sayfa ve arka plan sayfasını kullanarak iletişim kurmalıdır runtimemesajlaşma API'leri. İşte bir örnek:

- -
<! DOCTYPE html>
-<Html>
-  <Head>
-    <Meta karakter seti = "UTF-8">
-  </ Head>
-  <Body>
-    </ Script> <script src = "devtools.js">
-  </ Body>
-</ Html>
- -

devtools.js dosyası dev araçları uzantıları yaratarak gerçek kod düzenleyecek.

- -

paneller oluşturma

- -

devtools pencere barındıran ayrı bir dizi araç - JavaScript Debugger, Ağ İzleyicisi, vb. üst kısmında sekmeler Bir sıra farklı araçlar arasındaki kullanıcı anahtarı sağlar. Her aracın kullanıcı arayüzü barındırmak penceresi "paneli" olarak adlandırılır.

- -

Kullanımı devtools.panels.create()API, sen devtools penceresinde kendi paneli oluşturabilir:

- -
browser.devtools.panels.create (
-  "Benim Paneli", // başlık
-  "Simgeleri / star.png", // simgesi
-  "Devtools / paneli / panel.html" // içerik
-) .Ve ((newPanel) => {
-  newPanel.onShown.addListener (initialisePanel);
-  newPanel.onHidden.addListener (unInitialisePanel);
-});
- -

Panelin başlığı, simge ve içerik: Bu üç zorunlu argüman alır. Bir döner Promisebir çözer ki devtools.panels.ExtensionPanelyeni bir panel ifade eden nesne.

- -

Hedef pencere ile etkileşimde

- -

Geliştirici araçları her zaman belirli bir tarayıcı sekmesine eklenir. Bu geliştirici araçları için "hedef" veya "teftiş pencere" olarak adlandırılır. Sen kullanarak denetlenmiş pencere ile etkileşime girebilir devtools.inspectedWindowAPI.

- -

Hedef penceresinde kod çalıştırma

- -

devtools.inspectedWindow.eval()Teftiş pencerede kod çalıştırmasına bir yol sağlar.

- -

Bu biraz kullanmak gibidir {{WebExtAPIRef ( "tabs.executeScript ()")}} bir içerik komut enjekte ancak bunlarla önemli bir farkla:

- -
    -
  • içerik komut aksine, komut dosyaları kullanılarak yüklenen devtools.inspectedWindow.eval()yok olsun bir "DOM temiz görünümü" olduğunu, bunlar sayfa komut dosyaları tarafından yapılan sayfaya değişiklikleri görebilirsiniz.
    • -
- -
-

DOM temiz bir görünüm yardım amaçlanan, bir güvenlik özelliğidir geldiğini hatırlatırız yerli DOM işlevleri davranışını yeniden tanımlanarak uzantıları kandırma gelen düşman sayfaları engeller. Bu araçlar siz) eval (kullanarak çok dikkatli olmak gerekiyor ve eğer yapabilirsen normal içerik komut dosyası kullanmalısınız.

-
- -

Komut dosyaları kullanılarak yüklenen  devtools.inspectedWindow.eval()içerik komut ile tanımlanan herhangi JavaScript değişkenleri görmüyorum de.

- -

içerik komut ile çalışma

- -

Bir devtools belge doğrudan erişimi yok {{WebExtAPIRef ( "tabs.executeScript ()")}} Bir içerik komut dosyası enjekte etmek gerekirse, bu nedenle, devtools belge arka plan komut bir mesaj göndermesi gerekir inject bunu soran senaryo. devtools.inspectedWindow.tabIdHedef sekmesinin kimliğini sağlar: devtools belge arka plan komut dosyasına bu geçebilir ve arka plan komut sırayla içine geçebilir {{WebExtAPIRef ( "tabs.executeScript ()")}}:

- -
// devtools-panel.js
-
-const scriptToAttach = "document.body.innerHTML = 'DevTools'un Hi';";
-
-window.addEventListener () ( "click" => {
-  browser.runtime.sendMessage ({
-    Tabla: browser.devtools.inspectedWindow.tabId,
-    komut: scriptToAttach
-  });
-});
- -
// background.js
-
-işlev handleMessage (istek, gönderen, sendResponse) {
-  browser.tabs.executeScript (request.tabId {
-    kod: request.script
-  });
-}
-
-browser.runtime.onMessage.addListener (handleMessage);
- -

Hedef penceresinde çalışan içerik komut ve devtools belgeye arasındaki değişim mesajlarına gerekiyorsa, {{WebExtAPIRef ( "runtime.connect ()")}} ve {{WebExtAPIRef ( "runtime.onConnect kullanmak iyi bir fikirdir ")}} arkaplan sayfası ile devtools belgeye arasında bağlantı kurmak için. arka plan sayfası ardından sekme kimlikleri ve {{WebExtAPIRef ( "runtime.Port")}} nesneler arasında bir eşleme korumak ve iki kapsamları arasındaki iletileri yönlendirmek için kullanabilir.

- -

- -

devtools API'ler sınırlamaları

- -

Chrome dayanmaktadır Bu API'ler API'leri DevTools'un, ancak birçok özellik hala Chrome ile karşılaştırıldığında, eksik. Bu bölümde yine devtools API'leri etkin geliştirme aşamasındadır ve gelecekteki yayınlara çoğu desteği eklemek beklediklerini Firefox 54. Not itibariyle uygulanmadı özellikleri.

- -

devtools.inspectedWindow

- -

Aşağıdaki desteklenmez:

- -
    -
  • inspectedWindow.getResources()
    • -
  • inspectedWindow.onResourceAdded
    • -
  • inspectedWindow.onResourceContentCommitted
    • -
- -

Seçeneklerden hiçbiri için inspectedWindow.eval()desteklenir.

- -

Komut dosyaları kullanılarak enjekte inspectedWindow.eval()tüm Konsolunun komut satırı yardımcı işlevlerini kullanamazsınız, ancak $0ve inspect(...)her ikisi (Firefox 55 başlayarak) desteklenir.

- -

devtools.panels

- -

Aşağıdaki desteklenmez:

- -
    -
  • panels.elements
    • -
  • panels.sources
    • -
  • panels.setOpenResourceHandler()
    • -
  • panels.openResource()
    • -
  • panels.ExtensionPanel.createStatusBarButton()
    • -
  • panels.Button
    • -
  • panels.ElementsPanel
    • -
  • panels.SourcesPanel
    • -
- -

Örnekler

- -

Webextensions-örnekler GitHub'dan Repo, devtools panelleri kullanmak uzantıları bazı örnekler sunulmaktadır:

- - diff --git a/files/tr/mozilla/add-ons/webextensions/index.html b/files/tr/mozilla/add-ons/webextensions/index.html deleted file mode 100644 index c4a3cfc16a..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Tarayıcı uzantıları -slug: Mozilla/Add-ons/WebExtensions -tags: - - Eklentiler - - WebExtensions - - İniş -translation_of: Mozilla/Add-ons/WebExtensions -original_slug: Mozilla/Eklentiler/WebExtensions ---- -
{{AddonSidebar}}
- -

Uzantılar, bir tarayıcının yeteneğini genişletebilir ve değiştirebilir. Firefox eklentileri, uzantıları geliştirmek için çapraz tarayıcı sistemi olan Web Eklenti API'leri kullanılarak oluşturulmuştur. Google Chrome, Opera ve  W3C Taslak Topluluk Grubu tarafından deteklenen  API uzantısı büyük ölçekteki sistemlerle uyumludur. Bu tarayıcılar için yazılan uzantılar bir çok durumda Firefox'ta yada bir kaç değişiklikle Microsoft Edge ile çalışacaktır. Bu API aynı zamanda çoklu prosesli Firefox'la tamamen uyumludur.

- -

Eğer fikir veya sorularınız varsa, yada eski add-on'nuzu Web eklenti API'lerini kullanarak uyarlamak için yardıma ihtiyaç duyarsanız, bize dev-addons mail listesi yada IRC üzerinden  #webextensions aracılığı ile ulaşabilirsiniz.

- -
-
-

Başlarken

- - - -

Kavramlar

- - - -

Kullanıcı Arayüzü

- - - -

Nasıl Yapılır

- - - -
    -
- -

Uyarlama

- - - -

Firefox İşakışı

- - -
- -
-

Referans

- -

JavaScript API'leri

- - - -
{{ListSubpages ( "/ tr / Eklentiler / WebExtensions / API")}}
- -

Bildirim Anahtarları

- - - -

 

- -
{{ListSubpages ( "/en-US/Add-ons/WebExtensions/manifest.json")}}
-
-
- -

 

diff --git a/files/tr/mozilla/add-ons/webextensions/user_interface/index.html b/files/tr/mozilla/add-ons/webextensions/user_interface/index.html deleted file mode 100644 index b7c071d37a..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/user_interface/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: User interface -slug: Mozilla/Add-ons/WebExtensions/user_interface -tags: - - Kullanıcı arayüzü - - WebExtensions - - İniş -translation_of: Mozilla/Add-ons/WebExtensions/user_interface -original_slug: Mozilla/Eklentiler/WebExtensions/user_interface ---- -
{{AddonSidebar}}
- -

Kullanım WebExtension API'leri onların işlevselliği kullanıcıya sunulabilir böylece birkaç kullanıcı arayüzü seçenekleri ile sağlandığını uzantılar. bu seçeneklerden bir özeti bu bölümde her kullanıcı arayüz seçeneği için daha ayrıntılı tanıtımıyla, aşağıda verilmiştir.

- -
-

Uzantınızda mükemmel bir kullanıcı deneyimi yaratmak için bu UI bileşenlerini kullanarak tavsiye için lütfen Kullanıcı deneyimi en iyi uygulamaları makale.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UI seçeneğiAçıklamaMisal
Araç Çubuğu düğme (tarayıcı eylem)tıklandığında uzantısı bir olay gönderir Tarayıcı araç çubuğunda bir düğme. Varsayılan olarak, düğme tüm sekmelerin görünür.Örnek bir araç çubuğu düğmesi (tarayıcı eylem) gösteren.
Bir ile Çubuğu düğmesi açılırdüğme tıklandığında o araç çubuğu tarayıcıda bir düğmeye bir açılır pencere açılır. Popup kullanıcı etkileşimi yönetir bir HTML belgesinde tanımlanmıştır.Bir araç çubuğu düğmesini pop-up örneği
Adres çubuğu düğmesi (sayfa aksiyon)tıklandığında uzantısı bir olay gönderir tarayıcının adres çubuğunda bir düğme. Varsayılan olarak, düğme tüm sekmelerin gizli.Örnek bir adres çubuğu düğmesini gösteren (sayfa aksiyon)
Bir ile Adres çubuğu düğmesi açılırdüğmesi tıklandığında açılan tarayıcı adres çubuğunda bir düğmeyi bir açılır pencere. Popup kullanıcı etkileşimi yönetir bir HTML belgesinde tanımlanmıştır.Adres çubuğu düğmesinin bir popup örneği
Bağlam menü öğesibir ya da tarayıcının bağlam menüleri daha menü öğeleri onay kutularını ve radyo düğmeleri. Ayrıca, menüler ayırıcılar ekleyerek yapılandırılabilir. menü öğeleri tıklandığında bir olay uzantısı gönderilir.bağlam menü demo örnekten bir WebExtension tarafından eklenen içerik menü öğeleri, örneği
Kenar çubuğu -

Bir HTML dokümanı sayfa başına benzersiz içerik seçeneği ile, bir web sayfası yanında görüntülenen. uzantı yüklendiğinde kenar çubuğu daha sonra kullanıcının kenar çubuğu görünürlük seçimi itaat, açılır. Kenar çubuğunda içinde kullanıcı etkileşimi kendi HTML belgesi tarafından gerçekleştirilmektedir.

- 		bir kenar çubuğu Örnek
Seçenekler sayfaEğer kullanıcıların değişebileceğini Uzantınız için tercihlerini belirlemek sağlayan bir sayfa. kullanıcı tarayıcının eklenti yöneticisinden bu sayfaya erişebilirsiniz.Örnek favori renkleri örnekte eklenen seçenekler sayfa içeriğini gösteren.
Uzatma sayfaUzantınızda dahil kullanın web sayfaları pencere veya sekme içindeki formları, yardım veya gerekli diğer herhangi bir içerik sağlamak.Basit bir paket sayfası örneği müstakil bir panel olarak görüntülenir.
BildirimGeçici bildirimleri temel işletim sisteminin bildirimleri mekanizması yoluyla kullanıcıya görüntülenir. Kullanıcı bir bildirim veya bir bildirim kapanır (ya otomatik olarak veya kullanıcının isteği üzerine) tıkladığında uzantısına bir olay gönderir.Uzatma tetiklenen sistemi bildirimi Örnek
Adres çubuğu öneriKullanıcı bir anahtar kelime girdiğinde Özel adres çubuğu önerilerinin sunun.Örnek Adres çubuğu önerilerini firefox_code_search WebExtension en özelleştirme sonucunu gösteren.
Geliştirici araçları paneliilişkili HTML dokümanı ile bir sekme o tarayıcının geliştirici araçları görüntüler.Örnek Adres çubuğu önerilerini firefox_code_search WebExtension en özelleştirme sonucunu gösteren.
- -

kılavuzları nasıl yapılır şu bu kullanıcı arayüzü seçeneklerden bazılarını oluşturmak için adım adım rehberlik:

- - diff --git a/files/tr/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/tr/mozilla/add-ons/webextensions/what_are_webextensions/index.html deleted file mode 100644 index 266752739d..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Eklenti nedir? -slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -tags: - - Eklentiler - - Web eklentileri -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -original_slug: Mozilla/Eklentiler/WebExtensions/Eklenti_nedir ---- -
{{AddonSidebar}}
- -

 

- -

Bir eklenti bir web tarayıcısına özellikler ve fonksiyonlar ekler. Eklenti, Html, Css ve Javascript gibi benzer web tabanlı teknolojilerle oluşturulur. Bir web sayfasındaki JavaScript ile aynı web API'larından yararlanabilir, ancak bir uzantının kendi JavaScript API kümesine de erişimi vardır. Bu sizin eklenti ile bir web sayfasında yapabileceğinizden daha fazla şeyi yapabileceğiniz anlamına gelir. İşte yapabileceğiniz şeylere birkaç örnek:

- -

Bir web sitesini geliştirin veya tamamlayın: Web sitenizden ek tarayıcı içi özellikler veya bilgi sunmak için bir eklenti kullanın. Kullanıcıların, sunduğunuz hizmeti iyileştirmek için ziyaret ettikleri sayfalardan ayrıntıları toplamasına izin verin.

- -

- -

Örnekler: Amazon Assistant for Firefox, OneNote Web Clipper, and Grammarly for Firefox

- -

Kullanıcıların kişiselleştirmesine izin verin: Tarayıcı eklentisi web sayfalarındaki içeriği değiştirebilir. Örneğin kullanıcılar ziyaret ettiği bir sayfada sevdiği bir logoyu veya resmi arkaplan resmi olarak ekleyebilir. Eklentiler kullanıcılara Firefox UI arayüzünü güncelleştirmelerine izin verebilir. Aynı yolla bağımsız tema eklentileri yapabilir.

- -

- -

Örnekler: MyWeb New Tab, Tabliss, ve VivaldiFox

- -

Web sayfasına içerik ekleyin veya silin: Kullanıcıların web sayfalarındaki rahatsız edici reklamları engellemelerine, bir web sayfasında bir ülke veya şehir söz konusu olduğunda bir seyahat rehberine erişim sağlamasına veya tutarlı bir okuma deneyimi sunmak için sayfa içeriğini yeniden biçimlendirmesine yardımcı olmak isteyebilirsiniz. Hem sayfanın hem HTML hem de CSS’ye erişme ve bunları güncelleme yeteneği sayesinde, eklentiler kullanıcıların web’i istedikleri gibi görmelerine yardımcı olabilir.

- -

- -

Örnekler: uBlock Origin, Reader, ve Toolbox for Google Play Store™

- -

Araçlar ve yeni gözatma özellikleri ekleyin: Görev çubuğuna yeni özellikler ekleyin, ya da linklerden, sayfadaki yazıdan, resimlerden kare kod oluşturun. Esnek UI seçenekleri ve WebExtensions API'lerinin gücü ile bir tarayıcıya kolayca yeni özellikler ekleyebilir ve herhangi bir web sitesinin özelliğini veya fonksiyonunu artırabilirsiniz. 

- -

- -

Örnekler: QR Code Image Generator, Swimlanes for Trello, ve Tomato Clock

- -

Oyunlar: çevrimdışı özellikli oyun sunun ya da yeni oyun özelliklerini keşfedin; örneğin, by incorporating gameplay into everyday browsing.

- -

 

- -

Örnekler: Asteroids in Popup, Solitaire Card Game New Tab, ve 2048 Prime.

- -

Geliştirici araçları ekleyin: Web geliştirme araçlarını işiniz olarak sağlayabilir veya paylaşmak istediğiniz web geliştirmeye faydalı bir teknik veya yaklaşım geliştirebilirsiniz. Her iki durumda da, geliştirici araç çubuğuna yeni bir sekme ekleyerek yerleşik Firefox geliştirici araçlarını geliştirebilirsiniz.

- -

- -

Örnekler: Web Developer, Web React Developer Tools, and aXe Developer Tools

- -

 

- -

Firefox için eklentiler WebExtensions APIleri, geliştirici eklentileri çarpraz tarayıcı sistemi kullanılarak inşa edilir. API büyük ölçüde Google Chrome ve Opera tarafından desteklenen extension API ile uyumludur. Bu tarayıcılar için yazılan uzantılar, çoğu durumda yalnızca birkaç değişiklikle Firefox veya Microsoft Edge'de çalışır. API multiprocess Firefox ile de tam uyumludur. 

- -

Eğer sorunuz, fikriniz ya da eski bir apiyi yenisine uyumlu hale getirme ile ilgili yardıma ihtiyacınız varsa bize dev-addons mailing list ya da #extdev üzerinden ulaşabilirsiniz.  IRC.

- -

 

- -

Sırada ne var?

- -
    -
- - diff --git a/files/tr/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/tr/mozilla/add-ons/webextensions/your_first_webextension/index.html deleted file mode 100644 index 7efafe5d0f..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: İlk Eklentin -slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -tags: - - Rehber - - WebEklentileri -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -original_slug: Mozilla/Eklentiler/WebExtensions/İlk_Eklentin ---- -
{{AddonSidebar}}
- -
Bu makalede Firefox için bir eklenti baştan sona nasıl oluşturulur onu inceleyeceğiz. Eklenti "mozilla.org" vey alt alan adlarından yüklenen tüm sayfalara kırmızı kenarlık ekleyecek.
- -
- -
Bu örnek için kaynak kodlar GitHub'ta: https://github.com/mdn/webextensions-examples/tree/master/borderify.
- -
- -

İlk olarak Firefox 45 veya sonraki bir versiyona ihtiyacımız olacak.

- -

Eklentiyi yazmak

- -

Yeni bir dizin oluşturup içine girelim. Örneğin terminalden şu şekilde yapabiliriz:

- -
mkdir borderify
-cd borderify
- -

manifest.json

- -

Şimdi "manifest.json" isimli yeni bir dosya oluşturarak dosyanın içeriğine aşağıdakileri ekleyelim.

- -
{
-
-  "manifest_version": 2,
-  "name": "Borderify",
-  "version": "1.0",
-
-  "description": "mozilla.org ile eslesen tum sayfalara kırmızı kenarlık ekler.",
-
-  "icons": {
-    "48": "icons/border-48.png"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- -
    -
  • İlk 3 özellik olan: manifest_version, name, ve version, zorunlu alanlar ve bu eklenti için gerekli üstveriyi içeriyor.
    • -
  • description isteğe bağlı bir alan. Ancak Eklenti Yöneticisi'nde göründüğü için eklenmesi tavsiye ediliyor.
    • -
  • icons isteğe bağlı bir alan. Eklenti Yöneticisi'nde gösterilecek ikonu belirtmek için kullanıldığından eklenmesi tavsiye ediliyor.
    • -
- -

Buradaki en ilginç özellik content_scripts. Bu kısımda hangi örüntüye uyan web sayfaları için Firefox'un eklenti script'lerini yüklemesi gerektiğini söylüyor. Bu örnekte Firefox'a "borderify.js" i "mozilla.org" veya onun alt adresinden sunulan tüm HTTP veya HTTPS sayfalar için yüklemesini istiyoruz.

- - - -
-

Bazı durumlarda eklentin için bir kimlik(id) belirtmen gerekebilir. Gerektiğinde manifest.json da  applications içerisine gecko.id özelliğini ekle:

- -
"applications": {
-  "gecko": {
-    "id": "borderify@example.com"
-  }
-}
-
- -

icons/border-48.png

- -

Eklentimizin bir ikonu olmalı. İkonumuz Eklenti Yöneticisi'nde eklentimiz listelenirken yanında gözükecek.manifest.json dosyamız ikonumuzun şu dizinde olacağını söylüyor: "icons/border-48.png".

- -

"borderify" dizini içerisinde "icons" klasörünü oluştur. "border-48.png" isimli bir ikon koy.  Google Material Desing ikon paketinden alınmış ve Creative Commons Attribution-ShareAlike lisansına sahip örneğimizdeki ikonu kullanabilirsin.

- -

Eğer kendi ikonunu kendin ayarlamak istiyorsan ikon 48x48 piksel olmalı. Yüksek çözünürlüklü cihazlar için 96x96 piksel ikon da ayarlayabilirsin. Ancak o durumda icons altında 96 olarak 96x96'lık ikonu belirtmen gerekir:

- -
"icons": {
-  "48": "icons/border-48.png",
-  "96": "icons/border-96.png"
-}
- -

Alternatif olarak SVG dosyası kullanabilirsin ve doğru biçimde ölçeklenir. (Doğrusu: SVG kullanıyorsan ve ikon yazı içeriyorsa, SVG düzenleyicinin "convert to path" özelliğini kullanıp yazıyı düzleştirmek isteyebilirsin. Bu sayede pozisyonu ve boyutu doğru olarak ölçeklenir.)

- - - -

borderify.js

- -

Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:

- -
document.body.style.border = "5px solid red";
- -

This script will be loaded into the pages that match the pattern given in the content_scripts manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.

- - - -

Trying it out

- -

First, double check that you have the right files in the right places:

- -
borderify/
-    icons/
-        border-48.png
-    borderify.js
-    manifest.json
- -

Installing

- -

Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your extension's directory:

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

The extension will now be installed, and will stay until you restart Firefox.

- -

Alternatively, you can run the extension from the command line using the web-ext tool.

- -

Testing

- -

Now try visiting a page under "mozilla.org", and you should see the red border round the page:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -
-

Don't try it on addons.mozilla.org, though! Content scripts are currently blocked on that domain.

-
- -

Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the extensions's files by clicking the "Reload" button in about:debugging. You can see the changes right away:

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

Packaging and publishing

- -

For other people to use your extension, you need to package it and submit it to Mozilla for signing. To learn more about that, see "Publishing your extension".

- -

What's next?

- -

Now you've got an idea of the process of developing a WebExtension for Firefox, try:

- - diff --git a/files/tr/mozilla/firefox/index.html b/files/tr/mozilla/firefox/index.html deleted file mode 100644 index 0c99f68792..0000000000 --- a/files/tr/mozilla/firefox/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Firefox -slug: Mozilla/Firefox -translation_of: Mozilla/Firefox ---- -
{{FirefoxSidebar}}
- -

Firefox, Mozilla'nın masa üstünde Windows, OS X , Linux ve Android mobil cihazlarda ulaşılabilir olan popüler Web tarayıcısıdır. Firefox, Web geliştiricileri ve kullanıcılar için en güncel Web teknolojileri, güçlü geliştirme araçları ve geniş uyumluluğu ile birlikte harika bir seçimdir.

- -

Firefox, kodların büyük çoğunluğu büyük gönüllü topluluğumuzun katkıları ile geliştirilen açık kaynak kodlu bir projedir. Burada Firefox projesine nasıl katkıda bulunacağınızı ve aynı zamanda Firefox add-ons yapısı, Firefox'ta geliştirici araçlarını kullanma ve diğer görevler hakkında linkler bulacaksınız.

- -
-

Firefox'ta nasıl add-ons yapacağınızı, Firefox'un kendisini, iç yapısını ve alt proje işlerini nasıl geliştireceğinizi ve derleyeceğinizi öğrenin.

-
- -
    -
  • Geliştirici Sürüm Notları - -

    Geliştirici odaklı sürüm notları; Firefox'un her versiyonu ile gelen add-ons 'ları ve Web sitesinin yeni kabiliyetlerinin neler olduğunu öğrenin.

    -
    • -
  • Proje Dökümanları -

    Firefox'un iç yapısı ve derleme sistemi hakında detaylı bilgilere ulaşın ve böylece kodları içerisinde yolunuzu bulabilirsiniz.

    -
    • -
  • Geliştirici Rehberi -

    Geliştirici rehberimiz, Firefox'un kodlarını nasıl temin edeceğinizi ve derleyeceğinizi, kodlar içerisinde yolunuzu nasıl bulacağınızı ve projeye nasıl katkıda bulunacağınız hakkında detaylı bilgiler sağlar.

    -
    • -
- -

Firefox'un dört tane kanalı bulunmaktadır. Sürüm kanalı, dünya etrafında milyonlarca insan tarafından kullanılan günlük kullanım içindir. Diğer kanallar testçiler,  firefox'u benimseyenler ve ciddi meraklıları içindir.

- -
    -
  • Gecelik Firefox - -

    Firefox'un Gecelik derlemeleri sadece test amaçlıdır.

    - Download Nightly
    • -
  • Firefox Aurora -

    Deneysel bir ortamda en yeni yenilikler.

    - Download Aurora
    • -
  • Firefox Beta -

    Daha kararlı bir ortamda en yeni özellikler.

    - Download Beta
    • -
  • Firefox -

    Denendi, Test edildi ve Dünyada milyonlarca insan tarafından kullanıldı.

    - Download Firefox
    • -
diff --git a/files/tr/mozilla/firefox/releases/63/index.html b/files/tr/mozilla/firefox/releases/63/index.html deleted file mode 100644 index 527ce29553..0000000000 --- a/files/tr/mozilla/firefox/releases/63/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Geliştiriciler için Firefox 63 -slug: Mozilla/Firefox/Releases/63 -translation_of: Mozilla/Firefox/Releases/63 ---- -
{{FirefoxSidebar}}
- -
{{draft}}
- -

Bu makale Firefox 63 üzerinde yapılan değişiklikler hakkında geliştiricilerini etkileyecek bilgiler sağlamaktadır. Firefox 63, Firefox'un Gecelik versiyonu ve 23 Ekim 2018 yayımlanacak.

- -

Web Geliştiricileri için Değişiklikler

- -

Geliştirici Araçları

- -
    -
  • {{Glossary("CORS")}} hatası meydana geldiğinde ve konsolda rapor edildiğinde Firefox ilgili sayfadan CORS hata dökümanı 'na link vermektedir ({{bug(1475391)}}).
    • -
- -

Kaldırılanlar

- -

 

- -

HTML

- -

Değişiklik yok.

- -

Kaldırılanlar

- -

 

- -

CSS

- -
    -
  • Destek için {{Cssxref(":defined")}} pseudoclass eklendi.
    • -
  • Destek için {{cssxref("row-gap")}}, {{cssxref("column-gap")}} ve {{cssxref("gap")}} Flex layout 'a eklendi.
    • -
- -

Kaldırılanlar

- -

SVG

- -

Değişiklik yok.

- -

Kaldırılanlar

- -

JavaScript

- -

Değişiklik yok.

- -

Kaldırılanlar

- -

API'ler

- -

Yeni API'ler

- -
    -
  • {{domxref("MediaCapabilities", "Media Capabilities API")}} tamamlandı.
    • -
- -

DOM

- -
    -
  • {{domxref("Element.toggleAttribute()")}} metodu tamamlandı ({{bug(1469592)}}).
    • -
- -

DOM Olayları

- -

Değişiklik yok.

- -

Service workers

- -

Değişiklik yok.

- -

Media, Web Audio, and WebRTC

- -
    -
  • {{domxref("MediaDevices.enumerateDevices()")}} metodu şimdi medya cihazları çıkışını numaralandırılıyor ; önceden, Firefox 'ta yanlızca medya araçları girişini numaralandırılıyordu ({{bug(1152401)}}).
    • -
  • Spesifikasyonlardan çıkarıldığından beri Web Audio API üzerindeki limitli Doppler effekti {{domxref("PannerNode")}} kaldırıldı. {{domxref("AudioListener")}}, {{domxref("AudioListener.dopplerFactor", "dopplerFactor")}} ve {{domxref("AudioListener.speedOfSound", "speedOfSound")}} özellikleri ile birlikte PannerNode metodu {{domxref("PannerNode.setVelocity", "setVelocity()")}} özelliği kaldırıldı  ({{bug(1148354)}}).
    • -
  • {{domxref("ConstantSourceNode")}} Web Audio API node tipi şimdi spesifikasyonları eşleştirmek için varsayılan olarak 1 değil 2 kanala sahiptir ({{bug(1413283)}}).
    • -
- -

Canvas and WebGL

- -
    -
  • Yeni powerPreference özelliği {{domxref("HTMLCanvasElement.getContext()")}}'e eklendi. Bu MacOS işletim sisteminde çoklu GPU sistemlerinde yüksek GPU kullanımı yerine düşük GPU gücü kullanan applet'lere ve kritik olmayan performans WebGL uygulamalarına izin verir ({{bug(1349799)}}) .  
    • -
- -

Kaldırılanlar

- -

CSSOM

- -

Değişiklik yok.

- -

Kaldırılanlar

- -

HTTP

- -

Değişiklik yok.

- -

Kaldırılanlar

- -

Güvenlik

- -

Değişiklik yok.

- -

Kaldırılanlar

- -

Eklentiler

- -

Değişiklik yok.

- -

Kaldırılanlar

- -

Diğerleri

- -

Değişiklik yok.

- -

Kaldırılanlar

- -

Add-on Geliştiricileri için Değişiklikler

- -

API Değişiklikleri

- -
    -
  • -

    Kurulu arama motorlarını geri almak için "arama" API'si eklendi.

    -
    • -
- -

Bakınız

- -
    -
  • Site uyumluluğu için Firefox 63'e bakınız.
    • -
- -

Eski Versiyonlar

- -

{{Firefox_for_developers(62)}}

diff --git a/files/tr/mozilla/firefox/releases/81/index.html b/files/tr/mozilla/firefox/releases/81/index.html deleted file mode 100644 index d7291cf17a..0000000000 --- a/files/tr/mozilla/firefox/releases/81/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Firefox 81 for developers -slug: Mozilla/Firefox/Releases/81 -translation_of: Mozilla/Firefox/Releases/81 ---- -

{{FirefoxSidebar}}

- -

Bu makale, Firefox 81'de geliştiricileri etkileyecek değişiklikler hakkında bilgi sağlar. Firefox 81, Firefox'un güncel Beta sürümüdür ve 22 Eylül 2020'de piyasaya sürülecektir .

- -

Web geliştiricileri için değişiklikler

- -

Geliştirici Araçları

- -

Değişiklik yok

- -

Konsol

- -

Hata ayıklayıcı

- -

Diğer Aletler

- -

HTML

- -
    -
  • <iframe>Öğenin sandboxnitelik şimdi destekler allow-downloadsbelirteç. ({{hata (1558394)}})
    • -
- -

Kaldırmalar

- -
    -
  • Standart dışı mozallowfullscreenöznitelik desteği, bölümünden kaldırıldı <iframe>. allow="fullscreen"Bunun yerine kullanmayı düşünün . ({{hata (1657599)}})
    • -
- -

CSS

- -

Değişiklik yok

- -

Kaldırmalar

- -
    -
  • Standart olmayan {{CSSxRef (":: - moz-focus-external")}} sözde öğesi kaldırıldı.
    • -
- -

JavaScript

- -

Değişiklik yok

- -

Kaldırmalar

- -

HTTP

- -
    -
  • Firefox artık standart olmayan Content-Disposition üstbilgilerini, boşluk içeren, alıntılanmamış bir dosya adıyla kabul ediyor . ({{hata (1440677)}})
    • -
- -

Kaldırmalar

- -

API'ler

- -

Değişiklik yok

- -

DOM

- -
    -
  • Worker ve SharedWorker artık yürütülen komut dosyası için kesinlikle bir JavaScript MIME türü uyguluyor. ({{hata (1569123)}})
    • -
- -

Medya, WebRTC ve Web Audio

- -

Kaldırmalar

- -

WebAssembly

- -

Değişiklik yok

- -

Kaldırmalar

- -

Eklenti geliştiricileri için değişiklikler

- - - -

Kaldırmalar

- -

Ayrıca bakınız

- - - -

eski versiyonlar

- -

{{Firefox_for_developers (80)}}

diff --git a/files/tr/mozilla/firefox/releases/index.html b/files/tr/mozilla/firefox/releases/index.html deleted file mode 100644 index 8c23f95aa8..0000000000 --- a/files/tr/mozilla/firefox/releases/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Firefox developer release notes -slug: Mozilla/Firefox/Releases -tags: - - Firefox - - NeedsTranslation - - TopicStub -translation_of: Mozilla/Firefox/Releases ---- -
{{FirefoxSidebar}}

This page provides links to the "Firefox X for developers" articles for each Firefox release. These notes let you see what features were added and bugs eliminated in each version of Firefox.

-
- {{ListSubpages("",1,1,1)}}
diff --git a/files/tr/mozilla/index.html b/files/tr/mozilla/index.html deleted file mode 100644 index 220a8e1145..0000000000 --- a/files/tr/mozilla/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Mozilla -slug: Mozilla -tags: - - NeedsTranslation - - TopicStub -translation_of: Mozilla ---- -
- {{draft}}
-

This will soon be an awesome landing page for Mozilla internals. For now, it's not.

-
- {{LandingPageListSubpages}}
diff --git a/files/tr/orphaned/fennec_(firefox_mobile)/index.html b/files/tr/orphaned/fennec_(firefox_mobile)/index.html deleted file mode 100644 index 0f0f83ab8e..0000000000 --- a/files/tr/orphaned/fennec_(firefox_mobile)/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Mobile -slug: orphaned/Fennec_(Firefox_Mobile) -tags: - - Firefox - - Mobile - - firefox fennec - - mobil - - mobile firefox -original_slug: Fennec_(Firefox_Mobile) ---- -

fennec_logo.png

-

Firefox'un cep telefonları için olan sürümüdür. Ekran görüntüleri aşağıdaki gibidir. Yakında daha ayrıntılı bilgiye buradan erişebileceksiniz.

-

fennec_ss1.png

-

fennec_ss2.png

-

fennect_ss3.png

diff --git a/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html b/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html deleted file mode 100644 index 947424114f..0000000000 --- a/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Kutu Modeli' -slug: orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks -tags: - - Başlangıç - - CSS -translation_of: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks -original_slug: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks ---- -
{{LearnSidebar}}
- -
- -

Bu görevin amacı, CSS Kutu Modeli hakkında anlayşınızı kontrol etmenize yardımcı olmaktır.

- -
-

Not: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ayrıca kodu indirmek ve görevler üzerinde çalışmak için CodePen, jsFiddle veya Glitch gibi çevrimiçi bir araç kullanmakta faydalı olabilir.

- -

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme veya daha fazla yardım")}} bülümüne bakabilirsiniz.

-
- -

Kutu Model Bir

- -

Aşağıdaki iki kutudan biri standart kutu modeli, diğeri ise alternatif kutu modelini kullanıyor. .alternate sınıfına kurallar ekleyerek ikinci kutunun genişliğini , ilk kutunun görsel genişliğiyle eşleşecek şekilde değiştirin. İşin sonunda görseliniz aşağıdaki resim gibi görünmelidir.

- -

Two boxes of the same size

- -

Bitmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}

- -
-

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

-
- -

Kutu Modeli İki

- -

Bu görevde kutuya şunları ekleyin:

- -
    -
  • 5px, siyah ve noktalı bir kenarlık.
    • -
  • 20px üst kenar boşluğu.
    • -
  • 1em sağ kenar boşluğu.
    • -
  • 40px bir alt kenar boşluğu.
    • -
  • 2em'lik bir sol kenar boşluğu.
    • -
  • her tarafına 1em'lik dolguA box with a dotted border
    • -
- -

Örneği resimdeki gibi yeniden oluşturmak için aşağıdaki canlı kodu yeniden düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}

- -
-

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

-
- -

Kutu Modeli Üç

- -

Bu örnekte, satıriçi öğenin bir kenar boşluğu, dolgusu ve kanarlığı vardır, ancak üstündeki ve altındaki çizgiler diğer öğelerin üzerine binmektedir. Öğeyi satır içinde tutarken kenar boşluğunun, dolgusunun ve kenarlığının boyutunun diğer satırlar tarafından dikkate alınmasını sağlamak için CSS'nize ne ekleyebilirsiniz.?

- -

An inline box with space between it and the text around it.

- -

Resimdeki görüntüyü oluşturabilmek için aşağıdaki kodu yeniden düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}

- -
-

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

-
- -

Değerlendirme veya daha fazla yardım

- -

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

- -

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

- -
    -
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. -
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: -
      -
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • -
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • -
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • -
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • -
    -
    3. -
diff --git a/files/tr/orphaned/mdn/community/index.html b/files/tr/orphaned/mdn/community/index.html deleted file mode 100644 index b4fd7d8688..0000000000 --- a/files/tr/orphaned/mdn/community/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Join the MDN community -slug: orphaned/MDN/Community -tags: - - MDN Meta - - Rehber - - Topluluk -translation_of: MDN/Community -original_slug: MDN/Community ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/en-US/docs/MDN")}}
- -
-

MDN web dökümanları vikiden daha fazlasıdır: Açık Web teknolojileri hakkında dökümanlar oluşturulan , birlikte çalışan yazılım geliştiricilerinden oluşan bir topluluktur. 

-
- -

MDN'e katkıda bulunmanızdan hoşnut oluruz, bunun yanında MDN topluluğuna katılmanız bizi daha da mutlu eder. Aşağıda nasıl bağlanacağınza dair üç adım verilmiştir.

- -
    -
  1. MDN üyeliği oluşturun.
    2. -
  2. Tartışmalara katılın.
    3. -
  3. Ne olduğunu takip edin.
    4. -
- -

Topluluk nasıl çalışır

- -

Sonraki paragraflar MDN topluluğunun nasıl çalıştığını açıklamaktadır..

- -
-
-
-
Topluluk Görevleri
-
Çeşitli sorumluları olan çeştili roller anlatılmaktadır.
-
Döküman Turları 
-
Döküman turlarının organizyonu ve çeşitli öneriler, kısayollar paylaşılmaktadır.
-
Ne olduğunu Takip Edin
-
MDN sizi   Mozilla Developer Network Topluluğu taradından oluşturulur.  Burada nasıl bilgi paylaşılacağı anlatılmaktadır.
-
- -
-
-
- -
-
-
MDN Topluluk Tartışmaları
-
MDN'deki "işler" MDN web sitesinde görülür ancak topluluk tartışmalara (Eşzamanlı) ve Anlık Mesajlaşma toplantıları ile işleyişe katkıda bulunabilir.
-
Topluluk İçinde Çalışmak
-
Katkı hakkındaki en önemli konulardan biri MDN topluluğu ile nasıl çalışılacağını bilmektir. Bu makale çeşitli öneriler ile yazarlar ve geliştiriciler arasında bağlantı  kurmada yardımcı olmayı amaçlamaktadır.
-
-
-
diff --git a/files/tr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/tr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 930ccb397e..0000000000 --- a/files/tr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Bir editör incelemesi nasıl yapılır? -slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review -translation_of: MDN/Contribute/Howto/Do_an_editorial_review -original_slug: MDN/Contribute/Howto/Editor_incelemesi_nasil_yapilir ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Editör incelemeleri bir yazıda yazım hataları, imla hataları, dil bilgisi, kullanım veya metinsel hataları düzeltmekten ibarettir. Katkıda bulunanların tamamı dil uzmanları değildir, ancak bilgilerine bakılmaksızın, kopyalama, düzenleme ve son okuma/düzeltmeye ihtiyaç duyan son derece yararlı makale yazmış olacaklardır. Bu bir editör incelemesinde yapılır.

- -

Bu makale, MDN'nin içeriğinin doğru olduğundan emin olmak için bir editör incelemesinin nasıl yapılacağını açıklar.

- -
-
Görev nedir?
-
Bir "editör incelemesi gerektiriyor" olarak işaretlenmiş makalelerin kopyalama-düzenleme ve son okuması/düzenlemesi.
-
Nerede yapılması gerekiyor?
-
Bir "editör incelemesi gerektiriyor" olarak işaretlenmiş makalelerde yapılması gerekiyor.
-
Görevi yapmak için bilmeniz gereken şey nedir?
-
İyi İngilizce dil bilgisi ve yazım becerilerine sahip olmanız gerekir. Bir editör incelemesi, dil bilgisi, yazım denetimi ve ifadelerin doğru ve mantıklı olmasını sağlamak ve MDN yazım sitili rehberinin izlenmesiyle ilgilidir.
-
Bunu yapmanın adımları nelerdir?
-
-
    -
  1. İncelenecek bir makale seçin: -
      -
    1. Editörlük incelemesine ihtiyaç duyan makaleler listesine gidin. Bu liste, editör incelemesinin talep edildiği tüm sayfaları listeler.
      2. -
    2. İngilizce başlığına sahip ve sayfa yolu Template ile başlamayan bir sayfa seçin. (Template: sayfalar MDN makro kodu içermektedir.)
      3. -
    3. Sayfayı yüklemek için makale bağlantısını tıklayın.
      4. -
    -
    2. -
  2.  Yazım hatalarını, dil bilgisini veya kullanım hatalarını yakından takip ederek makaleyi okuyun. Seçtiğiniz ilk sayfa sizin için uygun değilse farklı bir sayfaya geçmekten çekinmeyin..
    3. -
  3. Herhangi bir hata yoksa makaleyi gözden geçirilmiş olarak işaretlemek için düzenlemenize gerek yoktur. Sayfanın sol kenar çubuğundaki "hızlı inceleme" kutusunu bulun:
    - Screenshot of the editorial review request sidebar box
    4. -
  4. Editöryel(Editorial) kutusundaki seçimi kaldırın ve Kaydet(Save) düğmesine tıklayın.
    5. -
  5. Düzeltilmesi gereken hatalar bulursanız: -
      -
    1. Sayfanın üst kısmındaki Düzenle(Edit) düğmesini tıklayın; Bu sizi MDN editörüne getiriyor.
      2. -
    2. Bulduğunuz yazım hatalarını, yazım kurallarını, dilbilgisi veya kullanım hatalarını düzeltin. Her şeyi düzeltmek zorunda değilsiniz, ancak tüm makalenin tam bir incelemesini yaptığınızı makul bir derecede eminseniz, editörlük inceleme talebini yerine getirdiğinizden emin olun..
      3. -
    3. Makalenin en altında Revizyon Yorumu (Revision Comment) düğmesine basın; açıklama kısmına 'Editöryel inceleme: sabit yazım hataları, dilbilgisi ve yazım denetimi' gibi birşey yazabilirsiniz. Bu diğer katkıda bulunanlar ve site editorleri tarafından sayfada ne değişti neden değiştiyi bilmeleri içindir.
      4. -
    4. İnceleme Gerekli mi(Review Needed)? Editöryel(Editorial) kutusunun seçimini kaldırın. Bu, sayfanın Revizyon Yorumu(Revision Comment) bölümünün hemen altında yer alır.
      5. -
    5. Yayınla (Publish) düğmesine tıklayın.
      6. -
    -
    6. -
- -
-

Değişiklikleriniz kaydedildikten hemen sonra görünmeyebilir; Sayfa işlenirken ve kaydedilirken bir gecikme olabilir.

-
-
-
diff --git a/files/tr/orphaned/mdn/editor/basics/index.html b/files/tr/orphaned/mdn/editor/basics/index.html deleted file mode 100644 index 5a7aaea8c6..0000000000 --- a/files/tr/orphaned/mdn/editor/basics/index.html +++ /dev/null @@ -1,428 +0,0 @@ ---- -title: MDN editor basics -slug: orphaned/MDN/Editor/Basics -translation_of: MDN/Editor/Basics -original_slug: MDN/Editor/Basics ---- -
{{MDNSidebar}}

Editing content on MDN is easy; you can use the built-in WYSIWYG editor to create, edit, and improve articles and other pages almost anywhere on the site. The editor window, shown below, is comprised of eight key boxes. This section will provide information about each section so you know how to use our entire editing environment.

-
-

Note: We're constantly working on improvements to MDN, so there will be times when this documentation or the screen shots below may be slightly out-of-date. We'll periodically update this documentation, though, to avoid it being unusably behind.

-
-

-

Page controls

-

The page controls area offers buttons affecting the page as a whole:

-
-
- Save and keep editing
-
- Saves the page without closing the editor; this lets you periodically save your work, creating an entry in the page history that you can revert to if you need to, or in case you need to stop working and come back to it later. This option is not available when creating new pages. See {{anch("The revision comment box")}} to learn how to include a revision comment on your saved article.
-
- Save changes
-
- Saves the page and closes the editor, returning you to view the page in standard browsing mode. See {{anch("The revision comment box")}} to learn how to include a revision comment on your saved article.
-
- Preview changes
-
- Opens a new tab or window showing the page as it exists in your editor, rendered as if you were browsing to it. This includes executing any macros you use in-content. Your work is not saved when you use this option. This lets you check to be sure you haven't made any errors in your macro syntax or other formatting that may prevent the page from rendering correctly.
-
- Discard changes
-
- Cancels your edit, disposing of any changes you've made without saving them. You're returned to the page in standard browsing mode.
-
-

The page info box

-

The page info box contains information about the page, but also can be expanded to offer additional page controls. By default, it displays the page's title and the date and time at which a local draft was saved; the local draft, stored on your computer, is used as a backup in case you accidentally navigate away from the editor or your browser crashes.

-

You can click the "Edit Page Title and Properties" link to switch to a view offering additional page controls. This view looks like this:

-

-

This view allows you to change the page's display title and the depth of the page's table of contents. The display title is the title shown in the browser's title bar (or tab bar) and as the title of the page at the top of the article and in the breadcrumb bar, as appropriate. It doesn't affect the page's URL.

-
-

Note: It's worth noting that we prefer short URLs and descriptive titles; for example, the article about the Kuma API has the title "The Kuma API" but its URL slug (the part after the site's root) is Project:MDN/Kuma/API, where "API" represents this page.

-
-

The TOC (table of contents) level lets you specify how deeply into the article's heading levels the table of contents automatically displayed on the page should go. By default, heading levels {{HTMLElement("h2")}} through {{HTMLElement("h4")}} are included in the TOC, so that the TOC has a three-level depth. However, you can set this to any of those, as well as "No TOC" (to not display a TOC at all, such as on landing pages) or to show all levels in the TOC.

-

As is the case with all changes you might make, changes in the page info box do not take effect unless you save the page.

-

The toolbar

-

The editor's toolbar offers features that let you adjust the appearance and flow of the article as you work. There are two rows of buttons (more if the width of your window is narrow enough that they wrap, but generally two) and a third row that shows the hierarchy of HTML elements leading up to where you are. In the screenshot below, for example, you're writing inside a top-level {{HTMLElement("p")}} block.

-

-

The toolbar's buttons are divided into seven groups. Let's look at each; we will examine the buttons in each group in order left-to-right.

-

Document options

-

The document options box provides options for document-level manipulations:

-

 

-
-
- Source mode toggle
-
- The source mode toggle button lets you toggle between editing using the WYSIWYG interface and in raw HTML source mode. We strongly request that you try to avoid using source mode, as it's very easy to wind up with content that doesn't match our style guide or, worse, doesn't work right at all. Currently, though, the editor has some quirks that make it impossible to do certain things without resorting to source mode.
-
- Save and keep editing
-
- A duplicate for the main "Save and keep editing" button.
-
- Save and exit
-
- Just like the main "Save changes" button.
-
- Paste as plain text
-
- Opens a dialog into which you can paste text; the text has all styling stripped from it so that you don't inadvertently introduce unwanted styles into the site content. Once you've pasted your text, you can (optionally) make changes, then click a button to insert it into the article you're working on.
-
-
-

Note: When pasting content into MDN, please be aware that if pasting styled content (including, for example, syntax highlighting in code being copied from another site) that you may be bringing along unwanted and unneeded additional styles or classes. Please be careful not to do this; if necessary, review your edit in source mode to remove these unnecessary styles and classes (or check it before pasting, or use the "Paste as plain text" option instead).

-
-
-
- Paste from Word
-
- On Windows, lets you paste text from Microsoft Word and have it adjusted to work reasonably well in MDN's wiki. We prefer for you to not use this (the results will work but are not typically style guide compliant), but it's there for a few teams that need it.
-
- Check spelling
-
- Starts the spell checker.
-
- Spell check as you type
-
- Presents a submenu that lets you control and configure the as-you-type spell checker.
-
- Find
-
- Opens the Find panel in "Find" mode, which lets you search your document for a specified string.
-
- Replace
-
- Opens the Find panel in "Find and replace" mode, allowing you to find strings and replace them with new ones.
-
-

It's worth noting that the Find and Replace buttons both take you to the same dialog box, which offers several configurable options for finding and optionally replacing text.

-

Block-level options

-

These buttons provide options affecting or creating blocks in your article.

-
-
- Insert/remove bulleted list
-
- Creates or removes a bulleted list from your article. Once you're working in a bulleted list, each time you press return, you will start a new bullet. The tab key can be used to indent a level, and shift-tab will outdent a level. Pressing return on an empty bullet will exit bullet list mode. Right-clicking on the list lets you choose to edit the list's properties (specifically, the shapes of the bullets).
-
- Insert/remove numbered list
-
- Creates or removes a numbered list from your article. Once you're working in a numbered list, each time you press return, you will start a new bullet. The tab key can be used to indent a level, and shift-tab will outdent a level. Pressing return on an empty bullet will exit numbered list mode. Right-clicking the list offers the option to open the properties dialog for the list; the properties include the style of the numbers (numbers, letters, Roman numerals, etc, and what number to start with).
-
- Definition list
-
- Creates a new definition list. Definition lists consist of a series of titles and definitions (this list you're reading right now is an example).
-
- Definition title
-
- Creates a new title in a definition list. If you're not already editing a definition list, a new one is created for you. Pressing return after entering a definition title automatically starts you editing a definition description.
-
- Definition description
-
- Creates a new description in a definition list. Pressing return on a description line automatically starts a new title. Pressing return twice will exit definition list mode.
-
- Decrease indent
-
- Shifts the indentation level to the left once; this is the same as shift-tab while in a list.
-
- Increase indent
-
- Shifts the indentation level to the right once; this is the same as tab while in a list.
-
- Blockquote
-
- Inserts a blockquote. Please do not use this. Blockquotes are not part of our standard style guide, and this button will be removed in the near future.
-
- Image
-
- Inserts a new image into the article. See {{anch("Adding images to an article")}} below for details on how to use this option.
-
- Table
-
- Inserts a table into the article. See {{anch("Working with tables")}} for more information on tables in articles.
-
- Text color
-
- Lets you set the text foreground color. Please do not use this. We will switch to using CSS styles for all coloring soon.
-
- Background color
-
- Lets you set the text background color. Please do not use this. We will switch to using CSS styles for all coloring soon.
-
- Text direction left-to-right
-
- Sets LTR as the current text typing direction. Used only when covering localization/internationalization topics.
-
- Text direction right-to-left
-
- Sets RTL as the current text typing direction. Used only when covering localization/internationalization topics.
-
-

Maximize

-

This is an odd box, in that it consists of just one button: Maximize. This button causes the editor interface (that is, the toolbar and the edit box) to take over your entire browser window, giving you as much space as possible to write.

-

Headings

-

The heading buttons let you insert a heading. Click one of these buttons to create a new heading at the corresponding depth. By default, H2 through H4 are included in the table of contents, but you can change this, as described in {{anch("The page info box")}}.

-

Formatting styles

-

The next box is a drop-down menu offering a selection of special formatting options. These are:

-
-
- None
-
- Removes all styling from the current block.
-
- Note box
-
- Creates a note box, as seen below. You should always start a note box with "Note:" in bold letters.
-
-
-

Note: This is a note box.

-
-
-
- Warning box
-
- Creates a warning box, as seen below. These should always begin with "Warning:" in bold letters.
-
-
-

Warning: This is a warning box.

-
-
foo = bar()
-
-
- Callout box
-
- Creates a new callout box. We are phasing this kind of box out in favor of a new design, so it shouldn't be used for new content.
-
- Two columns
-
- Makes the selected text or the current block two columns instead of one, on browsers that support it.
-
- Three columns
-
- Makes the selected text or the current block three columns instead of one, on browsers that support it.
-
- Syntax box
-
- Creates a syntax box, such as the one shown below. You need to use the "PRE" button as well, to create a {{HTMLElement("pre")}} block inside it. You probably won't see the yellow box until you do.
-
- Right sidebar
-
-
- Special note
- This is a right sidebar.
- Creates a light grey sidebar that floats to the right of content. You may enter small amounts of text in these boxes to draw special attention to them.
-
- SEO summary
-
- This special style is used to indicate a sentence or two that should be used as the article's summary for SEO purposes. It's also used by macros that automatically construct landing pages. If you don't specify this, MDN automatically uses the first paragraph of your article, but sometimes that's not the optimal text (or it's too much text), so this lets you override that.
-
-

Code samples and redirects

-

These buttons are mostly used for providing preformatted text (usually code samples), but our "insert redirect" button is, for some reason, here too.

-
-
- PRE
-
- Inserts a {{HTMLElement("pre")}} (preformatted text) block, or turns the current block into one. All code samples or examples of text output to a terminal should be in one of these blocks.
-
- Syntax highlighter
-
- The syntax highlighter lets you choose a language for which to apply syntax highlighting to the{{HTMLElement("pre")}} (preformatted text) block; if you're not already in such a block, this will create one for you. Simply choose the language and you're good to go.
-
- Insert code sample template
-
- This button is used by the live sample system to help you quickly insert a new live sample. You don't need to use it, but it's there for convenience. See {{anch("Using the live sample system")}} for details on using this and other live sample features.
-
- Insert code sample iframe
-
- Inserts an {{HTMLElement("iframe")}} into the document, displaying a given live sample. See {{anch("Using the live sample system")}} for details on using this and other live sample features.
-
- Create a redirect
-
- Inserts a redirect. See {{anch("Creating redirects")}} for further information.
-
- -

The final group of toolbar buttons includes options for creating and maintaining links and anchors, as well as for applying inline styles to content.

-
-
- Link
-
- Creates a new link. This button opens the link editor dialog, which is covered under {{anch("Creating and editing links")}} below.
-
- Unlink
-
- Removes the link at the insertion point.
-
- Anchor
-
- Creates an anchor at the insertion point.
-
- Bold
-
- Toggles boldface text mode.
-
- Italic
-
- Toggles italic text mode.
-
- Underline
-
- Toggles underlined text mode.
-
- Code
-
- Toggles {{HTMLElement("code")}} mode. This is used for inline presentation of variable names, function names, object names, filenames, and so forth.
-
- Strike through
-
- Toggles strikethrough mode.
-
- Superscript
-
- Toggles superscript mode. Please note that we don't use footnotes on MDN, so you should rarely if ever need this button.
-
- Remove format
-
- Removes the current formatting from the selection.
-
- Align left
-
- Makes the current block left-aligned. Please do not use this. We will be using CSS styles for all alignment tasks starting very soon.
-
- Center
-
- Centers the current block. Please do not use this. We will be using CSS styles for all alignment tasks starting very soon.
-
- Align right
-
- Makes the current block right-aligned. Please do not use this. We will be using CSS styles for all alignment tasks starting very soon.
-
-

The edit box

-

The edit box is, of course, where you actually do your writing. Right-clicking in the edito box will offer appropriate additional options depending on the context of your click; clicking in a table will offer table-related options and clicking in a list will offer list-related options, for example.

-

The revision comment box

-

After you've made your changes, it's strongly recommended you add a comment to your revision. This is displayed in the revision history for the page, as well as on the Revision Dashboard. It helps to explain or justify your changes to others that may review your work later. To add a revision comment, simply type the note into the revision comment box before clicking either of the save buttons at the top of the page.

-
-

Note: We know that the revision comment box being so far away from the save buttons doesn't make any sense. We're working on design changes that will fix that.

-
-

The tags box

-

Page tags help categorize and organize information, and help us identify pages that need special attention. Tags are also used to mark pages that are obsolete and may need to be deprecated or even deleted. It's incredibly useful to have good, clean tags on pages, so be sure to have good tags on articles you contribute to.

-

The tag box is near the bottom of the editor page, and looks like this:

-

The tag editing box showing three tags.

-

Adding a tag

-

To add a new tag, simply click in the box and start typing:

-

Screen thot: the tag box after typing a new tag but before pressing Enter.

-

Here we see the three already existing tags (as button-like objects) and our new tag as unadorned text. When we press Enter or Tab key (or comma), the new tag is committed to the list, and the list looks like this:

-

Screen shot: the tag box with our new tag in place.

-

For a list of recommended tags, as well as a usage guide for specific tags, please see MDN tagging standards.

-

Removing a tag

-

There are two ways to remove a tag: you can click on the "x" icon next to its name in its button, or you can click to its right in the editor box and press the delete key on your keyboard.

-

Committing your changes

-

Your changes are not saved unless you click one of the save buttons at the top of the editor window. Scroll back to the top of the window if you don't see the buttons, then click one of the two green save buttons. Now your change has been committed.

-

The reviews box

-

MDN uses reviews to try to monitor and improve the quality of its content. This works by setting a flag on an article indicating that a review is needed. You can learn more about technical reviews and editorial review in the How to guides.

-

To request a review on the article you've worked on, simply toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.

-

Be sure to click one of the save buttons after making your selections, to commit your review request.

-

The attachments box

-

The attachments box lets you upload files to MDN for use in MDN content, as well as see what files are being used by the current document.

-
-

Note: Due to a quirk in our current implementation, files are not associated with pages unless they're actually used in the page. So if you upload an attachment and don't make use of it before you save the article, it will not appear on the attachments list. So be sure to link to it or embed the image right away.

-
-

To add an attachment to the page, simply click the "Attach Files" button; this expands the attachment box to look like this:

-

-

As you see, there's a table that lets you select a file to upload, then give it a title and, optionally, a description and an additional comment. The title is mandatory, and should describe the file so its usage context is understandable. Once the fields are filled out and you've selected your file, click the "Upload" button to send it to MDN.

-
-

Note: Only a select few types of files are permitted as attachments on MDN: GIF, JPEG, PNG, SVG, and HTML. Photoshop images are permitted but should be avoided except in very specific cases. Any other file types will not be allowed by the upload form.

-
-

Feel free to open this page in the editor and look at its attachment list at the bottom to get a feel for it.

-

Once a file has been attached, it will appear (by its title, as you specified in the form) in the image properties dialog box when using images in your article. See {{anch("Adding images to an article")}} for details on this interface. To link to other types of files, copy the URL from the attachments box and use that as your link target when adding links to the page using the link button in the toolbar.

-

Keyboard shortcuts

-

There are a number of convenient keyboard shortcuts available to help you avoid taking your hands off the keyboard while you work.  The shortcuts are listed for Windows and Linux; on Mac, instead of using the Control key, you can use the Command key.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ShortcutDescription
Ctrl-ASelect all
Ctrl-CCopy to clipboard
Ctrl-VPaste from clipboard
Ctrl-XCut
Ctrl-ZUndo
Ctrl-YRedo
Ctrl-KOpen link editor
Ctrl-BBold
Ctrl-IItalic
Ctrl-OToggle <code> style.
Ctrl-Shift-OToggle source view mode.
Ctrl-PToggles the <pre> style on the current block.
Ctrl-UUnderline
Ctrl-SSave changes and close the editor
Ctrl-Shift-SSave changes without closing the editor
Ctrl-2 through Ctrl-6Select header level 2-6
Ctrl-Shift-LToggles between bulleted list, numbered list, and paragraph format
TabIncreases indent level if in indent mode, otherwise inserts two spaces as a tab.  Inside tables, this jumps to the next cell, or inserts a new row if there is no next cell.  If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.
Shift-TabDecreases indent level if in indent mode.  Inside tables, this jumps to the previous cell, or inserts a new row if there is no previous cell.  If the cursor is currently in the page title or in a header, the cursor jumps to the next paragraph.
Shift-SpaceInserts a non-breaking space (&nbsp;)
Shift-Enter -

Exits out of the current block.  For example, if you're currently editing a <pre> block, shift-Enter exits the block, putting you back in the body of the article.

-
-

Note: Not currently implemented; see {{bug(780055)}}.

-
-
- diff --git a/files/tr/orphaned/mdn/editor/index.html b/files/tr/orphaned/mdn/editor/index.html deleted file mode 100644 index df8d6f9a64..0000000000 --- a/files/tr/orphaned/mdn/editor/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: MDN Düzenleyici Rehberi -slug: orphaned/MDN/Editor -tags: - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Editor -original_slug: MDN/Editor ---- -

Sayfada düzenleme uygulaması MDN Web dökümanları wiki sayfası, yeni içerik sağlamak için kolaylık sağlar. Bu rehber bu düzenleyiciyi nasıl kullanıp üretim verimliliğinizi nasıl arttıracağınızı gösterecek. Lütfen Mozilla Sözleşmesini okuyun herhangi bir düzenleme yapmadan evvel.

- -

MDN stil rehberi biçimlendirme ve içeriğin stili konusunda bilgilere sahiptir. Tercih edilen dilbilgisi ve yazım kuralları dahil.

diff --git a/files/tr/orphaned/mdn/kuma/server_charts/index.html b/files/tr/orphaned/mdn/kuma/server_charts/index.html deleted file mode 100644 index 27bed9aceb..0000000000 --- a/files/tr/orphaned/mdn/kuma/server_charts/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Server charts -slug: orphaned/MDN/Kuma/Server_charts -tags: - - Kuma - - MDN Meta Türkçe -translation_of: MDN/Kuma/Server_charts -original_slug: MDN/Kuma/Server_charts ---- -
{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}
- -

This page lists MDN server status charts.

- -

Last 30 minutes

- -

Error Rate

- -

{{EmbedNewRelicChart("2fKQPvMkSwU", 300)}}

- -

Kuma web app response time (Average)

- -

{{EmbedNewRelicChart("43yJ3xwUecU", 300)}}

- -

Kuma web app response time (Percentiles)

- -

{{EmbedNewRelicChart("6NzEi7ZBdoN", 300)}}

- -

Last 24 Hours

- -

Error Rate

- -

{{EmbedNewRelicChart("kVeeXx52g0l", 300)}}

- -

Kuma web app response time (Average)

- -

{{EmbedNewRelicChart("2yWkQ9WbEZW", 300)}}

- -

Kuma web app response time (Percentiles)

- -

{{EmbedNewRelicChart("aeFnbLonmvx", 300)}}

- -

Last 3 Days

- -

Error Rate

- -

{{ EmbedNewRelicChart("iv2F4gQYjFX", 300)}}

- -

Kuma web app response time (Average)

- -

{{EmbedNewRelicChart("ddTq7AKgyaG", 300)}}

- -

Kuma web app response time (Percentiles)

- -

{{EmbedNewRelicChart("bRmyM6ujKA8", 300)}}

- -

Last 3 Months

- -

Error Rate

- -

{{EmbedNewRelicChart("fjJ7HnGYNLd", 300)}}

- -

Kuma web app response time (Average)

- -

{{EmbedNewRelicChart("sIaVOeAxNx", 300)}}

diff --git a/files/tr/orphaned/mdn/tools/page_watching/index.html b/files/tr/orphaned/mdn/tools/page_watching/index.html deleted file mode 100644 index 226080839d..0000000000 --- a/files/tr/orphaned/mdn/tools/page_watching/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Watch or subscribe to a page or set of pages -slug: orphaned/MDN/Tools/Page_watching -translation_of: MDN/Tools/Page_watching -original_slug: MDN/Tools/Page_watching ---- -
{{MDNSidebar}}
- -

MDN'deki bir sayfaya abone olmak, her güncellendiğinde veya değiştirildiğinde e-postayla bilgilendirilmenizi sağlar. İzle düğmesi her MDN sayfasının sağ üst köşesinde bulunur. Abonelik seçeneklerine erişmek için, imleci İzleme menüsünü açıklamak için İzle düğmesinin üzerine getirin:

- -

MDN's Watch menüsünün ekran görüntüsü

- -

Yalnızca bir sayfayı veya o sayfayı ve alt sayfalarını izlemek için bir seçenek belirleyin.

- -

Bir sayfaya abone olun

- -

Bir kullanıcı yalnızca bir sayfayı her düzenlediğinde bir e-posta bildirimi almak için ilk " Sayfa Başlığına Abone Ol" seçeneğini tıklayın .

- -

Bir sayfaya ve tüm alt makalelerine abone olun

- -

Bir kullanıcı o sayfayı ve alt sayfalarını her düzenlediğinde bir e-posta bildirimi almak için ikinci " Sayfa Başlığına ve tüm alt makalelerine abone ol" seçeneğini tıklayın . Buna abonelik talebinde bulunulduktan sonra eklenen alt sayfalar da dahildir, bu nedenle gelecekte daha fazla alt sayfa oluşturulacaksa, bunlar için de bildirim alırsınız.

- -

Bir sayfadan aboneliği iptal et

- -

Aboneliği iptal etmek ve bir sayfayı izlemeyi durdurmak için, İzleme menüsünü tekrar açın ve " Sayfa Başlığından Aboneliği İptal Et " i tıklayın. " Sayfa Başlığından Aboneliği İptal Et" i yalnızca bir sayfaya abone olursanız görürsünüz. Artık sayfa her değiştiğinde bir e-posta almayacaksınız.

- -

Sayfa değişikliği e-postaları

- -

Bir sayfaya abone olursanız, her değişiklik kaydedişinde bir e-posta alırsınız. Bu e-postalar notifications@developer.mozilla.org adresinden gelir ve MDN hesabınıza kayıtlı e-posta adresine gönderilir. Her mesajın bir başlığı vardır:

- -
[MDN] Sayfa " Sayfa başlığı " kullanıcı adına göre değişti
- -

İleti, başlıktaki bilgilerin tekrarlanmasıyla başlar, ardından içeriğin tam olarak neyin değiştiğini gösteren standart bir farkını sunar. Değişiklikler, HTML kaynak kodu olarak gösterilir; bu, MDN bağlamında kullanılmazsa okunması biraz garip olabilir.

- -

Farkın altında, değişiklik üzerinde hareket etmek için kullanabileceğiniz faydalı bağlantıların bir listesi vardır:

- -
    -
  • Değişikliği yapan kullanıcının MDN profilini görüntüleme
    • -
  • MDN'nin yerinde geçmiş özelliğini kullanarak sayfanın önceki ve yeni sürümlerini karşılaştırın
    • -
  • Makalenin kendisini tarayıcınızda görüntüleyin
    • -
  • Makaleyi düzenleyin
    • -
  • Makalenin geçmişine bakın
    • -
- -

E-postanın altında, e-postayı hangi aboneliğin oluşturduğunu belirten bir bildirim bulunur, örneğin "HTML öğesi başvurusu ve tüm alt makaleleri üzerinde düzenlemelere abone oldunuz" ve abonelikten çıkma bağlantısı. Aboneliği iptal etmek için bağlantıyı tıklatırsanız, bu izleme isteği için artık ileti almayacaksınız.

diff --git a/files/tr/orphaned/mozilla/add-ons/webextensions/getting_started_with_web-ext/index.html b/files/tr/orphaned/mozilla/add-ons/webextensions/getting_started_with_web-ext/index.html deleted file mode 100644 index 137630f542..0000000000 --- a/files/tr/orphaned/mozilla/add-ons/webextensions/getting_started_with_web-ext/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Deneyiminize web-ext ile başlayın -slug: orphaned/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext -translation_of: Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext -original_slug: Mozilla/Eklentiler/WebExtensions/Deneyiminize_web-ext_ile_başlayın ---- -
{{AddonSidebar}}
- -

Web-ext bir komut satır aracı olmakla birlikte uygulamaların gelistirmesinde kısmen yardımcı olup bu süreci kolaylaştırmaktadır. Bu Makale web-ext'in yüklenmesi ve çalıştırılması hakkında bilgiler içermektedir.

- -

Installation

- -

web-ext bir node.js bazlı (açık kaynaklı, işlem bazlı ve ölçeklenebilir) uygulama olup nodejs/npm aracı ile yükleyebilirsiniz. Web-ext'in yüklenmesi için kullanılması gereken komut:

- -
npm install --global web-ext
- -

web-ext requires the current LTS (long-term support) version of NodeJS.

- -

To test whether the installation worked run the following command, which displays the web-ext version number:

- -
web-ext --version
- -

Using web-ext

- -

Before you start using web-ext locate an example extension to use—if you don't have one, use one from the webextensions-examples repo.

- -

Testing out an extension

- -

Test an extension in Firefox by cd'ing into your extension's root directory and entering:

- -
web-ext run
- -

This starts Firefox and loads the extension temporarily in the browser, just as you can on the about:debugging page. Note that this web-ext method has the same limitations regarding prompts for permissions and restart features as about:debugging.

- -

See the run reference guide to learn more.

- -

Automatic extension reloading

- -

The run command watches your source files and tells Firefox to reload the extension after you edit and save a file. For example, if you changed the name property in your manifest.json file, Firefox displays the new name. This makes it easy to try out new features because you can see the effect immediately. The automatic reloading feature is active by default, you use it like this:

- -
web-ext run
- -

You can also press the r key in the web-ext terminal to trigger an extension reload.

- -

If you experience unexpected behavior with the reloading feature, please file a bug. You can also disable reloading like this:

- -
web-ext run --no-reload
- -
-

Extension reloading is only supported in Firefox 49 or higher.

-
- -

Testing in different versions of Firefox

- -

To run your extension in a version of Firefox Desktop other than the default, use the --firefox option to specify a full path to the binary file. Here is an example for Mac OS:

- -
web-ext run --firefox=/Applications/FirefoxNightly.app/Contents/MacOS/firefox-bin
- -

On Windows, the path needs to include firefox.exe, for example:

- -
web-ext run --firefox="C:\Program Files\Mozilla Firefox\firefox.exe"
- -

See the run command reference to learn more.

- -

Testing in Firefox 48

- -

Firefox 48 was the first stable version to use the WebExtension platform, but it doesn't allow web-ext to install an extension remotely. You need to run your extension in Firefox 48 using:

- -
web-ext run --pre-install
- -

Testing in Firefox for Android

- -

To run your extension in Firefox for Android, follow these instructions to set up your computer and device.

- -

With your device connected to your development computer, run:

- -
web-ext run --target=firefox-android
- -

This command displays the device ID for your connected Android device or devices. If you don't see a list of device IDs, make sure you set up the device for development correctly.

- -

Now, add the device ID to the command:

- -
web-ext run --target=firefox-android --android-device=<device ID>
- -

If you've multiple versions of Firefox installed, you may need to choose a specific version. For example:

- -
web-ext run --target=firefox-android ... --firefox-apk=org.mozilla.firefox
- -

The first time you run this command, you may need to grant Android permissions for the APK. This is because the command needs read/write access to the device storage, so that Firefox for Android can run on a temporary profile. The web-ext output guides you in how to grant these permissions.

- -

The web-ext command does not alter any of your existing Firefox for Android preferences or data. To see more information about how web-ext is interacting with your device, run the command with --verbose.

- -

See the run command reference to learn more.

- -

Debugging in Firefox for Android

- -

When using web-ext run to test an extension on Firefox for Android, you'll notice a message like this in the console output:

- -
You can connect to this Android device on TCP port 51499
-
- -

This is a remote debugger port that you can connect to with Firefox's developer tools. In this case, you'd connect to host localhost on port 51499.

- -

See this guide for more information about debugging an extension on Firefox for Android.

- -

Testing unsigned extensions

- -

When you execute web-ext run, the extension gets installed temporarily until you close Firefox. This does not violate any signing restrictions. If instead you create a zip file with web-ext build and try to install it into Firefox, you will see an error telling you that the add-on is not signed. You will need to use an unbranded build or use a development build to install unsigned extensions.

- -

Using a custom profile

- -

By default, the run command will create a temporary Firefox profile. To run your extension with a specific profile use the --firefox-profile option, like this:

- -
web-ext run --firefox-profile=your-custom-profile
- -

This option accepts a string containing the name of your profile or an absolute path to the profile directory. This is helpful if you want to manually configure some settings that will always be available to the run command.

- -

Keeping profile changes

- -

The run command does not save any changes made to the custom profile specified by --firefox-profile. To keep changes, add this option:

- -
web-ext run --keep-profile-changes --firefox-profile=your-custom-profile
- -

This may be helpful if your extension has many different run states.

- -
-

This option makes the profile specified by --firefox-profile completely insecure for daily use. It turns off auto-updates and allows silent remote connections, among other things. Specifically, it will make destructive changes to the profile that are required for web-ext to operate.

-
- -

Packaging your extension

- -

Once you've tested your extension and verified that it's working, you can turn it into a package for submitting to addons.mozilla.org using the following command:

- -
web-ext build
- -

This outputs a full path to the generated .zip file that can be loaded into a browser.

- -
-

The generated .zip file doesn't work on Firefox without signing or adding applications.gecko.id key into manifest.json.  For more information, please refer WebExtensions and the Add-on ID page.

-
- -

web-ext build is designed to ignore files that are commonly not wanted in packages, such as .git, node_modules, and other artifacts.

- -

See the build reference guide to learn more.

- -

Signing your extension for self-distribution

- -

As an alternative to publishing your extension on addons.mozilla.org, you can self-host your package file but it needs to be signed by Mozilla first. The following command packages and signs a ZIP file, then returns it as a signed XPI file for distribution:

- -
web-ext sign --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET
- -

The API options are required to specify your addons.mozilla.org credentials.

- -
    -
  • --api-key: the API key (JWT issuer) from addons.mozilla.org needed to sign the extension. This is a string that will look something like user:12345:67.
    • -
  • --api-secret: the API secret (JWT secret) from addons.mozilla.org needed to sign the extension. This is a string that will look something like 634f34bee43611d2f3c0fd8c06220ac780cff681a578092001183ab62c04e009.
    • -
- -
-

If you've listed the extension on addons.mozilla.org, see Signing a test version of a listed extension.

-
- -

See the sign reference guide to learn more.

- -

Signing extensions without an explicit ID

- -

web-ext supports signing extensions that do not declare the applications.gecko.id property in their manifest. The first time you sign an extension without an explicit ID, addons.mozilla.org will generate an ID and web-ext will save it to .web-extension-id in the working directory. You should save the ID file so that you can sign future versions of the same extension. If you lose the ID file, you will have to add back the applications.gecko.id property or use the --id option when signing, for example:

- -
web-ext sign --api-key=... --api-secret=... --id="{c23c69a7-f889-447c-9d6b-7694be8035bc}"
- -

Signing in a restricted environment

- -

If you're working in an environment that restricts access to certain domains, you can try using a proxy when signing:

- -
web-ext sign --api-key=... --api-secret=... --api-proxy=https://yourproxy:6000
- -

See the --api-proxy option to learn more.

- -

The following domains are used for signing and downloading files:

- -
    -
  • addons.mozilla.org
    • -
  • addons.cdn.mozilla.net
    • -
- -

Signing a test version of a listed extension

- -

If you've listed an extension on addons.mozilla.org, use web-ext to create a signed but unlisted version for testing purposes. For example, you may wish to distribute an alpha or beta version to users for early feedback and testing.

- -

First, change the version number in your manifest.json so that it is different from the latest listed version. Then, create the unlisted version by using the --channel option like this:

- -
web-ext sign --channel=unlisted --api-key=... --api-secret=...
- -

This signs and downloads an XPI file that can be installed into Firefox.

- -

Once you've finished testing, to publish the extension you must define --channel as listed, as the channel option defaults to the one used previously. So, after incrementing the version in your manifest.json, run:

- -
web-ext sign --channel=listed --api-key=... --api-secret=...
- -

This publishes and submits your extension for review as if you had uploaded it to addons.mozilla.org.

- -
-

Setting --channel=listed for a new version of a listed extension is not well supported. It uploads your new version to addons.mozilla.org as if you'd submitted it manually. However, the command will fail and you'll have to check addons.mozilla.org/developers/addons for the correct status.

-
- -

See the sign reference guide to learn more.

- -

Checking for code "lint"

- -

Before trying out your extension with the run command or submitting your package to addons.mozilla.org, use the lint command to make sure your manifest and other source files do not contain any errors. You can also set strict_min_version in your extension’s manifest file and lint will report on the permissions, manifest keys, and web extension APIs used that are not available in that version. Example:

- -
web-ext lint
- -

This uses the addons-linter library to walk through your source code directory and report any errors, such as the declaration of an unknown permission.

- -

See the lint reference guide to learn more.

- -

Setting option defaults in a configuration file

- -

You can specify --config=my-config.js to set default values for any option. Here is an example with the build command:

- -
web-ext --config=my-config.js build
- -

The file should be a CommonJS module as understood by NodeJS and must export each configuration value. Here is how you would set the default value of --verbose to true:

- -
module.exports = {
-  verbose: true,
-};
- -

If you want to specify options that only apply to a specific command, you nest the configuration under the command name. Here is an example of adding configuration for --overwrite-dest that only applies to the build command as well as --firefox that only applies to the run command:

- -
module.exports = {
-  // Global options:
-  verbose: true,
-  // Command options:
-  build: {
-    overwriteDest: true,
-  },
-  run: {
-    firefox: 'nightly',
-  },
-};
- -

To create a configuration key for a command line option, you remove the preceding dashes and convert the name to camel case. As you can see from this example, --overwrite-dest was converted to overwriteDest.

- -

If an option can be specified multiple times on the command line then you define it as an array. For example, here is how to specify multiple --ignore-files patterns:

- -
module.exports = {
-  ignoreFiles: [
-    'package-lock.json',
-    'yarn.lock',
-  ],
-};
- -

web-ext will also try to load its configuration options from a "webExt" property included in the package.json file in the current directory:

- -
{
-  "name": "an-extension-src-dir-with-a-package-json",
-  "version": "1.0.0",
-  ...
-  "webExt": {
-    "sourceDir": "dist/extension/"
-  }
-}
-
- -

Automatic discovery of configuration files

- -

web-ext will load existing configuration files in the following order:

- -
    -
  • A config file named .web-ext-config.js in your home directory, for example: - -
      -
    • On Windows: C:\Users\<username>\.web-ext-config.js
      • -
    • On macOS: /Users/<username>/.web-ext-config.js
      • -
    • On Linux: /home/<username>/.web-ext-config.js
      • -
    -
    • -
  • A config property named "webExt" included in a package.json file in the current directory.
    • -
  • A config file named web-ext-config.js in the current directory.
    • -
- -

If a home directory config and a local directory config define the same option, the value from the latter file will be used.

- -

To disable automatic loading of configuration files, set this option:

- -
web-ext --no-config-discovery run
- -

To diagnose an issue related to config files, re-run your command with --verbose. This will tell you which config file affected which option value.

- -

Specifying different source and destination directories

- -

The preceding commands use default directories for the extension source and artifact creation (for example, built .zip files). The defaults are:

- -
    -
  • Source: The directory you are in.
    • -
  • Artifacts: A directory called ./web-ext-artifacts, created inside the current directory.
    • -
- -

You can specify different source and destination directories using the --source-dir and --artifacts-dir options when running your commands. Their values can be relative or absolute paths, but must always be specified as strings. Here is an example of specifying both options when building an extension:

- -
web-ext build --source-dir=webextension-examples/notify-link-clicks-i18n --artifacts-dir=zips
- -

Outputting verbose messages

- -

To see in detail what web-ext is doing when you run a command, include the --verbose option. For example:

- -
web-ext build --verbose
- -

Viewing all commands and options

- -

You can list all commands and options like this:

- -
web-ext --help
- -

You can list options for a specific command by adding it as an argument:

- -
web-ext --help run
- -

Detecting temporary installation

- -

Your extension can detect whether it was installed using web-ext run, rather than as a built and signed extension downloaded from addons.mozilla.org. Listen for the {{WebExtAPIRef("runtime.onInstalled")}} event and check the value of details.temporary.

- -

Using web-ext from a script

- -

You can use web-ext as a NodeJS module. Here is more information, with example code.

- -

See also

- - diff --git a/files/tr/orphaned/tr/index.html b/files/tr/orphaned/tr/index.html deleted file mode 100644 index 9113b51ace..0000000000 --- a/files/tr/orphaned/tr/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Mozilla Geliştirici Ağı -slug: orphaned/Tr -tags: - - MDC - - Mozilla Developer Center - - mdc turkey - - mdc türkiye - - mgm - - mozilla geliştirici merkezi -original_slug: Tr ---- -

logo-only-250x250.pngFirefox Mobile - Android sürümü yayınlandı. Test Etmek isterseniz buraya tıklayınız.

-

Firefox 9(veya son çıkan beta) sürümünü test etmek isterseniz buraya tıklayınız.

-

 Son sürümünü şimdi indirmek için buraya tıklayınız. Web uygulama geliştiricileri ve web tasarımcıları için Firefox 5 geliştirici sürümüne buradan erişebilirsiniz.[EN] Yeni Firefox için 75.000+ fazla temaya buradan ulaşabilirsiniz.

-
- Web Tarayıcıları 2012 anketine katılarak Firefox'un tanıtılmasına yardımcı olabilirsiniz. Buraya tıklayarak oylamaya katılabilirsiniz.
-
-

download-button-primary.png Thunderbird 3 ile e-postalarınıza daha çok hükmedin!

-

fennec_logo.pngMobil Firefox ile her yerde hızlı ve güvenli internetin tadını çıkarın.

- - - - - - - - - - -
-

Geliştirme Konuları

-
-
-
- Web geliştirme
-
- Kılavuzlar ve referanslar ile yararlı web siteleri ve web uygulamaları geliştirebilirsiniz.
-
- Mozilla projesine katılmak
-
- Mozilla kodlarını derlemek, geliştirici kılavuzu, hata raporlama, yerelleştirme kılavuzu ve Mozilla projelerine katkı sağlamak adına öğrenebileceğiniz herşey burada yer almaktadır.
-
-  
-
-  
-
- 		-
-
- Eklenti Geliştirme
-
- Firefox ve Thunderbird uygulamalarına tema,eklenti geliştirmek isterseniz, işinize yarayacak kaynaklar burada yer almaktadır.
-
- Mozilla kodlarını diğer projelerde kullanımı
-
- Mozilla teknolojisini kendi projelerinizde nasıl kullanabileceğinizi öğrenin.
-
- Dökümantasyon sıcak bağlantıları
-
- Son dökümantasyonlar ve bir biri ile ilişikli bağlantıların merkezi bura
-
-
-

 

diff --git a/files/tr/orphaned/web/html-alani/index.html b/files/tr/orphaned/web/html-alani/index.html deleted file mode 100644 index 7ec71baafa..0000000000 --- a/files/tr/orphaned/web/html-alani/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 'HTML: Hypertext Markup Language' -slug: orphaned/Web/HTML-Alani -tags: - - HTML - - HTML5 - - Web -original_slug: Web/HTML-Alani ---- -
{{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.

- -
-
    -
  • HTML'e Giriş - -

    Web geliştirmede yeniyseniz, HTML'nin ne olduğunu ve nasıl kullanılacağını öğrenmek için HTML Temelleri makalemizi mutlaka okuyun.

    -
    • -
  • HTML Dersleri -

    HTML'nin yanı sıra dersler ve örneklerin kullanımı hakkında makaleler için, HTML Öğrenme Alanı'nı inceleyin..

    -
    • -
  • HTML Öğelerinin Açıklamaları -

    Genişletilmiş HTML örnekleri bölümümüzde, HTML'deki her element ve özellik hakkındaki ayrıntıları bulacaksınız.

    -
    • -
- -
-
-

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/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/tr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index 024fd28feb..0000000000 --- a/files/tr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -
{{JSRef("Global_Objects", "Array")}}
- -

Summary

- -

The Array.prototype property represents the prototype for the {{jsxref("Global_Objects/Array", "Array")}} constructor.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Description

- -

{{jsxref("Global_Objects/Array", "Array")}} instances inherit from Array.prototype. As with all constructors, you can change the constructor's prototype object to make changes to all {{jsxref("Global_Objects/Array", "Array")}} instances.

- -

Little known fact: Array.prototype itself is an {{jsxref("Global_Objects/Array", "Array")}}:

- -
Array.isArray(Array.prototype); // true
-
- -

Properties

- -
-
Array.prototype.constructor
-
Specifies the function that creates an object's prototype.
-
{{jsxref("Array.prototype.length")}}
-
Reflects the number of elements in an array.
-
- -

Methods

- -

Mutator methods

- -

These methods modify the array:

- -
-
{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}
-
Copies a sequence of array elements within the array.
-
{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}
-
Fills all the elements of an array from a start index to an end index with a static value.
-
{{jsxref("Array.prototype.pop()")}}
-
Removes the last element from an array and returns that element.
-
{{jsxref("Array.prototype.push()")}}
-
Adds one or more elements to the end of an array and returns the new length of the array.
-
{{jsxref("Array.prototype.reverse()")}}
-
Reverses the order of the elements of an array in place — the first becomes the last, and the last becomes the first.
-
{{jsxref("Array.prototype.shift()")}}
-
Removes the first element from an array and returns that element.
-
{{jsxref("Array.prototype.sort()")}}
-
Sorts the elements of an array in place and returns the array.
-
{{jsxref("Array.prototype.splice()")}}
-
Adds and/or removes elements from an array.
-
{{jsxref("Array.prototype.unshift()")}}
-
Adds one or more elements to the front of an array and returns the new length of the array.
-
- -

Accessor methods

- -

These methods do not modify the array and return some representation of the array.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Returns a new array comprised of this array joined with other array(s) and/or value(s).
-
{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}
-
Determines whether an array contains a certain element, returning true or false as appropriate.
-
{{jsxref("Array.prototype.join()")}}
-
Joins all elements of an array into a string.
-
{{jsxref("Array.prototype.slice()")}}
-
Extracts a section of an array and returns a new array.
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the {{jsxref("Object.prototype.toSource()")}} method.
-
{{jsxref("Array.prototype.toString()")}}
-
Returns a string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toString()")}} method.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Returns a localized string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
-
- -

Iteration methods

- -

Several methods take as arguments functions to be called back while processing the array. When these methods are called, the length of the array is sampled, and any element added beyond this length from within the callback is not visited. Other changes to the array (setting the value of or deleting an element) may affect the results of the operation if the method visits the changed element afterwards. While the specific behavior of these methods in such cases is well-defined, you should not rely upon it so as not to confuse others who might read your code. If you must mutate the array, copy into a new array instead.

- -
-
{{jsxref("Array.prototype.forEach()")}}
-
Calls a function for each element in the array.
-
{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}
-
Returns a new Array Iterator object that contains the key/value pairs for each index in the array.
-
{{jsxref("Array.prototype.every()")}}
-
Returns true if every element in this array satisfies the provided testing function.
-
{{jsxref("Array.prototype.some()")}}
-
Returns true if at least one element in this array satisfies the provided testing function.
-
{{jsxref("Array.prototype.filter()")}}
-
Creates a new array with all of the elements of this array for which the provided filtering function returns true.
-
{{jsxref("Array.prototype.find()")}} {{experimental_inline}}
-
Returns the found value in the array, if an element in the array satisfies the provided testing function or undefined if not found.
-
{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}
-
Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.
-
{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}
-
Returns a new Array Iterator that contains the keys for each index in the array.
-
{{jsxref("Array.prototype.map()")}}
-
Creates a new array with the results of calling a provided function on every element in this array.
-
{{jsxref("Array.prototype.reduce()")}}
-
Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
-
{{jsxref("Array.prototype.values()")}} {{experimental_inline}}
-
Returns a new Array Iterator object that contains the values for each index in the array.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
-
Returns a new Array Iterator object that contains the values for each index in the array.
-
- -

Generic methods

- -

Many methods on the JavaScript Array object are designed to be generally applied to all objects which “look like” Arrays. That is, they can be used on any object which has a length property, and which can usefully be accessed using numeric property names (as with array[5] indexing). TODO: give examples with Array.prototype.forEach.call, and adding the method to an object like {{jsxref("Global_Objects/JavaArray", "JavaArray")}} or {{jsxref("Global_Objects/String", "String")}}. Some methods, such as {{jsxref("Array.join", "join")}}, only read the length and numeric properties of the object they are called on. Others, like {{jsxref("Array.reverse", "reverse")}}, require that the object's numeric properties and length be mutable; these methods can therefore not be called on objects like {{jsxref("Global_Objects/String", "String")}}, which does not permit its length property or synthesized numeric properties to be set.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} 
- -

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

See also

- -
    -
  • {{jsxref("Global_Objects/Array", "Array")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/tr/tools/browser_console/index.html b/files/tr/tools/browser_console/index.html deleted file mode 100644 index d4f4c1015c..0000000000 --- a/files/tr/tools/browser_console/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Browser Console -slug: Tools/Browser_Console -tags: - - Developer - - Tutorial - - WebGL - - WebMechanics - - WebRTC -translation_of: Tools/Browser_Console -original_slug: Araclar/Browser_Console ---- -
    {{ToolsSidebar}}
- -

The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.

- -

So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.

- -

If you also want to use the other web developer tools in the regular Web Toolbox with add-on or browser code, consider using the Browser Toolbox.

- -

Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the gBrowser global, and even with the XUL used to specify the browser's user interface.

- -
-

NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable browser {{Glossary("chrome")}} and add-on debugging toolboxes" (Firefox 40 and later)  option in the developer tool settings.

-
- -

Opening the Browser Console

- -

You can open the Browser Console in one of two ways:

- -
    -
  1. from the menu: select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).
    2. -
  2. from the keyboard: press Ctrl+Shift+J (or Cmd+Shift+J on a Mac).
    3. -
- -

You can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:

- -
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
- -

The Browser Console looks like this:

- -

- -

You can see that the Browser Console looks and behaves very much like the Web Console:

- - - -

Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled Show Content Messages. The following image shows the browser console focused on the same page as above after clicking on the Show Content Messages checkbox.

- -

- -

Browser Console logging

- -

The Browser console logs the same sorts of messages as the Web Console:

- - - -

However, it displays such messages from:

- -
    -
  • web content hosted by all browser tabs
    • -
  • the browser's own code
    • -
  • add-ons.
    • -
- -

Messages from add-ons

- -

The Browser Console displays messages logged by all Firefox add-ons.

- -

Console.jsm

- -

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

- -

One exported symbol from Console.jsm is "console". Below is an example of how to access it, which adds a message to the Browser Console.

- -
Components.utils.import("resource://gre/modules/Console.jsm");
-console.log("Hello from Firefox code"); //output messages to the console
- -

Learn more:

- - - -

HUDService

- -

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla DXR. We see we can not only access the Browser Console but also Web Console.

- -

Here is an example on how to clear the contents of the Browser console:

- -
Components.utils.import("resource://devtools/shared/Loader.jsm");
-var HUDService = devtools.require("devtools/client/webconsole/hudservice");
-
-var hud = HUDService.getBrowserConsole();
-hud.jsterm.clearOutput(true);
- -

If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:

- -
Components.utils.import("resource://devtools/shared/Loader.jsm");
-var HUDService = devtools.require("devtools/client/webconsole/hudservice");
-
-var hud = HUDService.getBrowserConsole();
-
-var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
-clearBtn.addEventListener('mouseover', function() {
-  hud.jsterm.clearOutput(true);
-}, false);
- -

Bonus Features Available

- -

For Add-on SDK add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:

- -
widget = require("sdk/widget").Widget({
-  id: "an-error-happened",
-  label: "Error!",
-  width: 40,
-  content: "Error!",
-  onClick: logError
-});
-
-function logError() {
-  console.error("something went wrong!");
-}
- -

If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:

- -

Click the icon. You'll see output like this in the Browser Console:

- -

- -

For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

- -

Browser Console command line

- -
-

The Browser Console command line is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable chrome debugging" option in the developer tool settings.

-
- -

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

- -

But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window:

- -

- -

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.

- -

Controlling the browser

- -

The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):

- -
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
-newTabBrowser.addEventListener("load", function() {
-  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
-}, true);
-newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
- -

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

- -
-

Note: You can restart the browser with the command Ctrl + Alt + R (Windows, Linux) or Cmd + Alt + R (Mac) This command restarts the browser with the same tabs open as before the restart.

-
- -

Modifying the browser UI

- -

Since the global window object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:

- -
var parent = window.document.getElementById("appmenuPrimaryPane");
-var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
-makeTheTea.setAttribute("label", "A nice cup of tea?");
-parent.appendChild(makeTheTea);
- -

On macOS, this similar code will add a new item to the "Tools" menu:

- -
var parent = window.document.getElementById("menu_ToolsPopup");
-var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
-makeTheTea.setAttribute("label", "A nice cup of tea?");
-parent.appendChild(makeTheTea);
- -

diff --git a/files/tr/tools/debugger/index.html b/files/tr/tools/debugger/index.html deleted file mode 100644 index d3e8c68cc7..0000000000 --- a/files/tr/tools/debugger/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Hata ayıklayıcı -slug: Tools/Debugger -tags: - - '#HataAyıklayıcı #HataAyıklama #JavaScript' -translation_of: Tools/Debugger -original_slug: Araclar/HataAyıklayıcı ---- -
-

Bu sayfa Firefox 52 veya daha üzeri sürümdeki JavaScript Hata Ayıklayıcı'yı tanıtır. Daha önceki sürümlerde nasıl olduğunu görmek için  Debugger (before Firefox 52).

- -

Eğer Firefox 52 veya daha yeni sürüm kullanıyor ve  eski Hata Ayıklayıcı'ya dönmek istiyorsanız, about:config adresini ziyaret edip  "devtools.debugger.new-debugger-frontend" tercihini false yaparak başarabilirsiniz. 

-
- -

{{EmbedYouTube("QK4hKWmJVLo")}}

- -

JavaScript Hata Ayıklayıcı, hataları izlemenize yardımcı olması için JavaScript kodunu adım adım izlemenize veya durumunu değiştirmenize olanak tanır.

- -

Onu Firefox'ta yerel olarak hata ayıklamak için veya uzaktan çalıştırılabilir. Örneğin Android cihazda Android için Firefox çalışırken. Uzaktaki bir hedefe nasıl bağlanıldığını öğrenmek için  Remote debugging sayfasını ziyaret edin.

- -

Hata Ayıklayıcı Firefox'ta yerleşik olarak bulunur, ve bu sayfalar Firefox'ta gömülü bu özelliği açıklar. Ancak onu bağımsız bir web uygulaması olarak da çalıştırabilirsiniz, ve daha sonra onu hata ayıklamak için diğer tarayıcılarda ve düğümde kullanabilirsiniz. Daha fazla detay için projenin GitHub deposuna bakabilirsiniz: project's GitHub repository.

- -

Yeni Hata Ayıklayıcı  — henüz — eski Hata Ayıklayıcı'nın tüm özelliklerini desteklemiyor. Şuradan bakın: Limitations of the new debugger.

- -
-

Kullanıcı Arayüz Turu

- -

Hata Ayıklayıcı'da yolunuzu bulmak için size küçük bir tur : quick tour of the UI.

- -
-

Nasıl?

- -

Hata Ayıklayıcı'da ne yapabileceğinizi bulmak için aşağıdaki Nasıl? Rehberini takip edin:

- -
- -
- -
-

Referans

- -
- -
diff --git a/files/tr/tools/index.html b/files/tr/tools/index.html deleted file mode 100644 index e417962b62..0000000000 --- a/files/tr/tools/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Firefox Geliştirici Araçları -slug: Tools -tags: - - Türkçe Firefox Devop Toolls - - firefox aurora - - geliştirici araçları -translation_of: Tools -original_slug: Araclar ---- -
{{ToolsSidebar}}
- -
HTML, CSS ve JavaScript'i telefonundan ve masaüstü bilgisayarından incele, düzenle ve ayıkla. Geliştirici araçları son sürümleri için Firefox Gelistirici Sürümü'nü indir.
- -
-

Aurora' da neler yeni?

-Son Firefox Aurora dağıtımı Firefox 27' dir, ve geliştirici araçları için bu güncellemeleri içerir: - - -
- -
-

Seçmenler adipiscing lorem ipsum dolor elit, sit amet. Kazanan sonuc Maecenas futbol. Maecenas korkar. Tamam bir, çalışan, çapı yaşamak, olmayan lütfen, kolay Hayat, Hayim. Ama vadi Eleman Am rafa sohbet. Hamil finanse Hemen başlayın.Firefox Geliştirici Araçları'nı HTML and CSS'i incelemek ve düzenlemek, JavaScript'te hata ayıklamak ve sayfa içinde JavaScript'i çalıştırmak için kullanabilirsiniz. Bir sayfayı yüklerken tarayıcınızın karşılaştığı JavaScript ve CSS uyarı ve hatalarını görebilmeye ek olarak, ağ isteklerini görmek için de bu geliştirici araçlarını kullanabilirsiniz. 

- -
Android için Firefox ve yakında Firefox OS çalıştıran kodda hata ayıklamak için geliştirici araçlarını kullanabilirsiniz. Mobil geliştirmeyi hedefleyen araçlar da sağladık: Duyarlı Tasarım Görünümü, bir sitenin küçük bir ekranda nasıl görüneceğini görmenin hızlı bir yoludur ve Firefox OS Simulator, bir Firefox OS uygulamasını masaüstünde gerek kalmadan çalıştırmanıza ve hata ayıklamanıza olanak tanır gerçek bir Firefox OS cihazı kullanmak için.
- -
- -
Firefox eklentileri hata ayıklayıcı API'sına erişebilir, böylece yerleşik araçları genişleten ve geliştiren kendi geliştirici araçlarınızı oluşturabilirsiniz. Uzaktan hata ayıklama protokolü ile kendi hata ayıklama istemcilerinizi ve sunucularınızı uygulayabilir, böylece kendi araçlarınızı kullanarak web sitelerinde hata ayıklama veya Firefox araçlarını kullanarak farklı hedeflerde hata ayıklama yapabilirsiniz.
- -
-

Araç Kutusu

- -

Araç Kutusu, Firefox içindeki tüm Geliştirici Araçları'nı tek çatı altına toplamayı sağlamaktadır.

- -
-
Sayfa Denetçisi
-
Görünüm ve seçili öğe için HTML ve CSS ayarları.
-
Web Konsolu
-
Web sayfası yükleyen browser tarafından gönderilen bilgi, uyarı ve hata mesajlarını görün, ve JavaScript kullanarak sayfayı inceleyin ve degiştirin.
-
Biçim Editörü
-
Sayfanızdaki CSS ayarlarını görün ve düzenleyin.
-
JavaScript Debugger
-
Browserda calışan JavaScript kodunu inceleyin ve değişkenleri takip ederek kodunuzu debug edin.
-
JavaScript Profiler
-
Profiler'ı kullanarak JavaScript'inizin vaktini nerede harcadığını anlayın.
-
Ağ izleyici
-
Bir sayfa yüklendiğinde gerçekleşen bütün ağ taleplerini ve ne kadar süre aldıklarını inceleyin.
-
Shader Editör
-
Görüntüleme ve düzenleme köşe ve kullandığı parçası shader WebGL .
-
-
- -
-

Mobil

- -

Elbette mobil web geliştiricileri de web geliştiricileridir. Bu nedenle wen geliştirme araçlarının çoğunun mobil wen geliştiricilerini de ilgilendiriyor.Fakat sadece mobil geliştirmeyi hedefleyen bazı araçlar da hazırladık.

- -
-
Uzaktan Hata Ayıklama
-
Android cihazında USB üzerinden hata ayıklamak için geliştirici araçlarını kullanın.
-
Firefox OS Simülatör
-
Gerçek bir Firefox OS cihazı kullanmanıza gerek kalmadan masaüstünde Firefox OS uygulamanızı çalıştırın ve hata ayıklayın.
-
Responsive Tasarım Görünümü
-
Tarayıcı pencerenizin boyutunu değiştirmeden web sitenizin veya uygulamanızın farklı ekran boyutlarında nasıl görüneceğini görün..
-
-
- -
-

Bağımsız Araçlar

- -

Bu araçlar Firefox'a dahil edilebilir, ama kullanıcı arayüzleri (GUI) Araç Kutusu'na entegre edilemezler.

- -
-
Çalışma defteri
-
Yazdığınız ve JavaScript yürütmek sağlar Firefox yerleşik bir metin editörü.
-
Tarayıcı Konsol
-
içerik, krom içeren tarayıcıda çalışan tüm JavaScript kodundan mesajlarına bakın ve eklentileri. krom pencerenin bağlamda JavaScript kodunu yürütün.
-
Geliştirici Araç Çubuğu
-
Bir komut satırı arayüzü en sık kullanılan araçlara hızlı erişim için geliştirici Firefox'ta araçları ve düğmelerle işlemek ve çalışmak için.
-
3D Görünüm
-
"Tilt", bu mevcut sayfanın 3D görselleştirme sağlar olarak da bilinir.
-
Yanıp sönen Aracı Boya
-
Boya yanıp sönen aracı siteyle ilgili olası performans sorunları teşhis etmek için yardımcı olaylar karşısında yeniden boyanması ve tarayıcı penceresinin bir kısmını vurgular.
-
-
-
- -
-

Diğer Kaynaklar

- -

Mozilla'nın geliştirici araçları ekibi tarafından tutulan ancak değil bu bölümde listelenmiştir kaynakları yaygın web geliştiricileri tarafından kullanılır. Biz bu listedeki birkaç Firefox eklentileri dahil, fakat tam liste için bkz ettik addons.mozilla.org "Web Geliştirme" kategorisinde .

- -
-
kundakçı
-
bir JavaScript debugger, HTML ve CSS düzenleyici ve gösterici ve ağ monitör de dahil olmak üzere bir çok popüler ve güçlü bir web geliştirme aracı.
-
DOM Ayıklayıcı
-
web sayfaları veya XUL pencerelerin DOM göz, kontrol ve düzenleme.
-
Web Geliştirici
-
Bir menü ve çeşitli web geliştirici araçları ile tarayıcıya bir araç çubuğu ekler.
-
Web Tasarım Aracı
-
Mozilla tarafından geliştirilen araçlar kümesi, insanlar Internet gelişimi ile başlarken amaçlayan.
-
W3C Doğrulayıcı
-
W3C web sitesinin dahil olmak üzere web geçerliliğini kontrol etmek bir dizi araç barındıran HTML ve CSS .
-
JSHint
-
JavaScript kod analiz aracı
-
diff --git a/files/tr/tools/page_inspector/index.html b/files/tr/tools/page_inspector/index.html deleted file mode 100644 index 548d1027e9..0000000000 --- a/files/tr/tools/page_inspector/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Page Inspector -slug: Tools/Page_Inspector -translation_of: Tools/Page_Inspector -original_slug: Araclar/Page_Inspector ---- -

Bir sayfanın HTML'sini ve CSS'sini incelemek ve değiştirmek için Page Inspector'ı kullanın.

- -

Firefox'un yerel kopyasında yüklü olan sayfaları veya Android için Firefox gibi uzak bir hedefi inceleyebilirsiniz. Geliştirici araçlarını uzak bir hedefe nasıl bağlayacağınızı öğrenmek için uzaktan hata ayıklamaya bakın.

- -

Kullanıcı Arayüzü Turu

- -

Page Inspector'daki yolunuzu bulmak için, arayüzü hızlı bir şekilde gezin.

- -

Nasıl

- -

Inspector'la neler yapabileceğinizi öğrenmek için, aşağıdaki kılavuzları inceleyin:

- -
- -
- -

Reference

- -
- -
diff --git a/files/tr/tools/performance/index.html b/files/tr/tools/performance/index.html deleted file mode 100644 index a47a777603..0000000000 --- a/files/tr/tools/performance/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Performance -slug: Tools/Performance -translation_of: Tools/Performance -original_slug: Araclar/Performance ---- -
{{ToolsSidebar}}
- -

The Performance tool gives you insight into your site's general responsiveness, JavaScript and layout performance. With the Performance tool you create a recording, or profile, of your site over a period of time. The tool then shows you an overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile.

- -

You get four sub-tools to examine aspects of the profile in more detail:

- -
    -
  • the Waterfall shows the different operations the browser was performing, such as executing layout, JavaScript, repaints, and garbage collection
    • -
  • the Call Tree shows the JavaScript functions in which the browser spent most of its time
    • -
  • the Flame Chart shows the JavaScript call stack over the course of the recording
    • -
  • the Allocations view shows the heap allocations made by your code over the course of the recording. This view only appears if you checked "Record Allocations" in the Performance tool settings.
    • -
- -

{{EmbedYouTube("WBmttwfA_k8")}}

- -
-

Getting started

- -
-
-
-
UI Tour
-
-

To find your way around the Performance tool, here's a quick tour of the UI.

-
-
-
- -
-
-
How to
-
Basic tasks: open the tool, create, save, load, and configure recordings
-
-
-
- -
-

Components of the Performance tool

- -
-
-
-
Frame rate
-
Understand your site's overall responsiveness.
-
Call Tree
-
Find bottlenecks in your site's JavaScript.
-
Allocations
-
See the allocations made by your code over the course of the recording.
-
-
- -
-
-
Waterfall
-
Understand the work the browser's doing as the user interacts with your site.
-
Flame Chart
-
See which JavaScript functions are executing, and when, over the course of the recording.
-
-
-
-
- -
-

Scenarios

- -
-
-
-
Animating CSS properties
-
Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.
-
-
-
- -
-
-
Intensive JavaScript
-
Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.
-
-
-
- -
-
-
-
-
diff --git a/files/tr/tools/remote_debugging/index.html b/files/tr/tools/remote_debugging/index.html deleted file mode 100644 index 7e5304f2f1..0000000000 --- a/files/tr/tools/remote_debugging/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Remote Debugging -slug: Tools/Remote_Debugging -translation_of: Tools/Remote_Debugging -original_slug: Araclar/Remote_Debugging ---- -

You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the Toolbox to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:

- -

Firefox for Android

-

Remotely debugging Firefox for Android describes how to connect to Firefox on an Android device over USB.

-

Firefox for Metro

-

Remotely debugging Firefox for Metro describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.

-

Firefox OS

-

Using the App Manager includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.

-

Thunderbird

-

Remotely debugging Thunderbird explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.

diff --git a/files/tr/tools/web_console/index.html b/files/tr/tools/web_console/index.html deleted file mode 100644 index a3044762d3..0000000000 --- a/files/tr/tools/web_console/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Web Konsolu -slug: Tools/Web_Console -tags: - - Debugging Guide Tools Turkish - - Türkçe DevOps Web Console Mozilla - - Türkçe Web Development - - Web Machine Türkçe - - Web console Türkçe -translation_of: Tools/Web_Console -original_slug: Araclar/Web_Konsolu ---- -
{{ToolsSidebar}}
- -

 Web Konsolu:

- -
    -
  1. Kayıt bilgileri bir web sayfasıyla ilişkilidir: ağ istekleri, JavaScript, CSS, güvenlik hataları, uyarılar -ve hatalar da-, sayfa içeriğinde çalışan JavaScript kodunda uyarılar ve bilgilendirme mesajları açıkça tutulur.
    2. -
  2. Sayfa içeriğinde JavaScript ifadeleri çalıştırarak bir web sayfasıyla etkileşime girmenizi sağlar
    3. -
- -

{{EmbedYouTube("C6Cyrpkb25k")}}

- -
-
-
-
Web Konsolunu Açmak
-
Web Konsolu nasıl açılır bilgisi.
-
Komut Satırı Tercümanı
-
How to interact with a document using the Console.
-
Bölünmüş Konsol
-
Konsolu diğer araçlarla birlikte kullanın.
-
-
- -
-
-
Konsol mesajları
-
Konsol kayıtlarının detayları.
-
Zengin Çıktı
-
Konsol tarafından kaydedilen nesnelere bakın ve bunlarla etkileşime geçin.
-
Klavye Kısaltmaları
-
Kısayol referansı.
-
-
-
diff --git a/files/tr/tools/web_console/rich_output/index.html b/files/tr/tools/web_console/rich_output/index.html deleted file mode 100644 index 17e558a85e..0000000000 --- a/files/tr/tools/web_console/rich_output/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Zengin Çıktı -slug: Tools/Web_Console/Rich_output -translation_of: Tools/Web_Console/Rich_output -original_slug: Araclar/Web_Konsolu/Zengin_Cikti ---- -
{{ToolsSidebar}}
- -

Web konsolu nesneleri yazdırdığında, sadece nesnenin adından daha zengin bir bilgi kümesi içerir. Bilhassa:

- -
    -
  • belirli tipler için ek bilgi sağlar
    • -
  • nesnenin özelliklerinin detaylı incelenmesini sağlar
    • -
  • DOM öğeleri için daha zengin bilgiler sağlar ve bunları Denetçi'de seçmenize olanak tanır
    • -
- -

Türe Özgü Zengin Çıktı

- -

Web konsolu aşağıdakiler dahil birçok nesne türü için zengin çıktı sağlar:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Object
Array
Date
Promise -

-
RegExp
Window
Document
Element
Event
- -

Nesne Özelliklerini İnceleme

- -

Bir nesne konsolda günlüğe kaydedildiğinde yanında genişletilebileceğini belirten dik bir üçgen bulunur. Üçgene tıkladığınızda nesne içeriğini gösterecek şekilde genişletecektir:

- -

- -

Firefox 67'den başlayarak (şu anda Firefox geliştirici'de kullanılabilir) konsolda görüntülenen nesnelerde gezinmek için klavyenizdeki ok tuşlarını kullanabilirsiniz. Sağ ok tuşu bir nesnenin ayrıntılarını açar ve sol ok tuşu açık nesneleri kapatır.

- -

İstek ayrıntılarının incelenmesi

- -

Nesne ayrıntılarını incelemeye benzer şekilde, you can see the details about a network request directly in the console. İsteğin yanındaki oka tıklayın; Ağ İzleyicisi aracındaki Başlıklar paneline eşdeğer olan bir detay paneli açılacaktır.

- -

{{EmbedYouTube("Cj3Pjq6jk9s")}}

- -

Çıktıyı panoya aktar

- -

Konsol penceresinde çıktı aldığınızda, çıktıyı sağ tıklayıp Görünür mesajları panoya aktar seçeneğini seçerek panoya kaydedebilirsiniz:

- -

- -

Bu çıktının tümünü panoya kopyalar. Sonrasında bir belgeye yapıştırabilirsiniz. Çıktı şöyle görünecektir:

- -
console.log(todoList)
-Array(4) [ {…}, {…}, {…}, {…} ]
-debugger eval code:1:9
-undefined
- -

Diziler gibi nesneleri de genişletirseniz, biraz farklı içerik elde edersiniz. Örneğin, yukarıdaki listedeki diziyi genişleterek aşağıdakileri alıyorum:

- -
console.log(todoList)
-(4) […]
-​
-0: Object { status: "Done", description: "Morning Pages", dateCreated: 1552404478137 }
-​
-1: Object { status: "In Progress", description: "Refactor styles", dateCreated: 1552404493169 }
-​
-2: Object { status: "To Do", description: "Create feedback form", dateCreated: 1552404512630 }
-​
-3: Object { status: "To Do", description: "Normalize table", dateCreated: 1552404533790 }
-​
-length: 4
-​
-<prototype>: Array []
-debugger eval code:1:9
-undefined
- -

DOM düğümlerini vurgulama ve inceleme

- -

Fareyi konsol çıktısındaki herhangi bir DOM öğesinin üzerine getirdiğinizde sayfada vurgulanır:

- -

Yukarıdaki ekran görüntüsünde, konsol çıktısındaki düğümün yanında mavi renkli bir "hedef" simgesi göreceksiniz: seçili düğümü seçerek denetçiye geçmek için tıklayın.

diff --git a/files/tr/tools/web_console/split_console/index.html b/files/tr/tools/web_console/split_console/index.html deleted file mode 100644 index e6ca22812a..0000000000 --- a/files/tr/tools/web_console/split_console/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Bölünmüş Konsol -slug: Tools/Web_Console/Split_console -translation_of: Tools/Web_Console/Split_console -original_slug: Araclar/Web_Konsolu/Bolunmus_Konsol ---- -
{{ToolsSidebar}}
- -

Konsolu diğer araçlarla birlikte kullanabilirsiniz. Araç kutusundaki başka bir araçtayken,  Esc'ye tıklayın ya da Araç Çubuğu menüsündeki "Bölünmüş Konsolu Göster"i seçin. Araç kutusu şimdi yukarıda orijinal araç ve altındaki web konsoluyla birlikte gözükecektir.

- -

Bölünmüş konsolu tekrar Esc'ye tıklayarak ya da "Bölünmüş Konsolu Gizle" butonuyla kapatabilirsiniz.

- -

- -

{{EmbedYouTube("G2hyxhPHyXo")}}

- -

Her zaman olduğu gibi,  $0 elementler için Denetçi'de seçilmiş kısaltmalar şeklinde çalışır:

- -

Bölünmüş konsolu hata ayıklayıcı ile birlikte kullandığınızda, konsolun kapsamı o anda çalışan yığın çerçevesidir. Öyleyse fonksiyonda bir kesme noktasına gelirseniz, kapsam işlevin kapsamı olacaktır. İşlevde tanımlanan nesneler için otomatik tamamlama elde edersiniz ve bunları kolayca değiştirebilirsiniz:

- -

diff --git a/files/tr/tools/web_console/the_command_line_interpreter/index.html b/files/tr/tools/web_console/the_command_line_interpreter/index.html deleted file mode 100644 index 12c6d9d405..0000000000 --- a/files/tr/tools/web_console/the_command_line_interpreter/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Komut Satırı Tercümanı -slug: Tools/Web_Console/The_command_line_interpreter -translation_of: Tools/Web_Console/The_command_line_interpreter -original_slug: Araclar/Web_Konsolu/Komut_Satiri_Tercumani ---- -
{{ToolsSidebar}}
- -

Web Konsolu'nun komut satırını kullanarak gerçek zamanlı bir şekilde JavaScript ifadelerini yorumlayabilirsiniz.

- -

- -

İfadeleri Giriş

- -

İfadeleri girmek için komut satırına yazmanız ve Enter 'a tıklamanız yeterlidir. çoklu satırlı ifadeleri girmek için, Enter yerine Shift+Enter kullanmalısınız.

- -

Yazdığınız ifade mesaj görüntüleme penceresinde yankılanır ve sonuç şöyle olur:

- -

Console output showing syntax highlighting

- -

Enter tuşuna bastığınızda girişiniz tam gözükmüyorsa, Konsol bunu girişinizi tamamlamanızı sağlayan Shift+Enter kombinasyonu olarak kabul eder.

- -

Örneğin, şöyle yazarsanız:

- -
function foo() {
- -

sonra Enter 'a basarsanız, Konsol girişi hemen gerçekleştirmez ama Shift+Enter tuşlarına basmışsınız gibi davranır, böylelikle işlev tanımı girmeyi bitirebilirsiniz.

- -

Değişkenlere Erişmek

- -

Sayfada tanımlanan değişkenlere erişebilirsiniz, hem pencere gibi yerleşik değişkenlere hem de jQuery gibi JavaScript tarafından eklenen değişkenlere:

- -

Otomatik Tamamlama

- -

Komut satırı otomatik tamamlama içerir: ilk birkaç harfi girin ve olası tamamlamalar ile bir açılır pencere görünür:

- -

- -

Öneriyi kabul etmek için Enter, Tab ya da sağ ok tuşunu kullanın, farklı bir öneriye geçmek için ise yukarı aşağı oklarını kullanın, ya da önerilerden hiçbirini beğenmiyorsanız yazmaya devam edin.

- -

Konsol otomatik tamamlama önerileri büyük/küçük harf duyarlı değildir.

- -

Konsol,mevcut olarak yürütülen yığın çerçevesinin kapsamından tamamlamalar önerir. Bu şu anlama gelir, bir fonksiyonda kesme noktasına ulaşırsanız, fonksiyondaki yerel nesneler için otomatik tamamlama elde edersiniz.

- -

Otomatik tamamlama önerilerini dizi elemanları için de alırsınız:

- -

Değişkenleri tanımlamak

- -

Kendi değişken ve fonksiyonlarınızı tanımlayıp sonra onlara erişebilirsiniz:

- -

Console output showing syntax highlighting

- -

Girdiğiniz metin, yorumlandıktan sonra sözdizimi kurallarınca vurgulama özelliğine sahip olacaktır.

- -
-

Not: Erişilebilirlik özellikleri etkinleştirilmişse, sözdizimi kuralları vurgulanması(syntax highlighting) tarayıcınızda gözükmez.

-
- -

Komut Geçmişi

- - - -

Komut satırı yazdığınız komutları hatırlar: geçmişinizde ileri veya geri gitmek için yukarı veya aşağı oklarını kullanın.

- -

Komut geçmişi oturumlar arası kalıcıdır. Geçmişi silmek için, sclearHistory() yardımcı fonksiyonunu kullanın.

- -

Firefox 65 ile başlanarak, Linux ve Mac'te veya Windows'ta PowerShell'de olduğu gibi komut satırı geçmişinde ters bir arama başlatabilirsiniz.

- -

Ters aramayı başlatmak için Windows ve Linux'ta F9, Mac'te Ctrl + R tuşlarına basın.

- -

- -

Konsolun altındaki giriş kutusuna aramak istediğiniz metni girin. Aradığınız komutu yazmaya başlayın, ilk eşleşme konsolda gösterilecektir. Tekrar tekrar  Ctrl + R (F9 Windows ve Linux'ta) yazmak, eşleşmeler arasında geriye doğru dönecektir.

- -

- -

Geriye doğru aramayı başlattıktan sonra, eşleşme listesinde ileriye bakmak için Ctrl + S (Shift + F9 Windows ve Linux'ta) tuşlarını kullanabilirsiniz. İstediğiniz komutu bulduğunuzda, ifadeyi çalıştırmak için Return (Enter) tuşuna basın.

- -

Iframe'lerle çalışmak

- -

Bir sayfada gömülü iframe'ler varsa, konsolun kapsamını belirli bir iframe olarak değiştirmek için cd() komutunu kullanabilirsiniz ve sonrasında bu iframe tarafından barındırılan belgede tanımlanan işlevleri çalıştırabilirsiniz. cd() kullanarak bir iframe seçmenin üç yolu vardır: 

- -

 iframe DOM öğesini iletebilirsiniz:

- -
var frame = document.getElementById("frame1");
-cd(frame);
- -

Iframe ile eşleşen bir CSS seçiciyi geçebilirsiniz:

- -
cd("#frame1");
- -

Iframe 'in global pencere nesnesini iletebilirsiniz:

- -
var frame = document.getElementById("frame1");
-cd(frame.contentWindow);
-
- -

İçeriği tekrar üst düzey pencereye geçirmek için, argüman olmadan cd() işlevini çağırın:

- -
cd();
- -

Örneğin, iframe yerleştiren bir belgemiz olduğunu varsayalım:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-  </head>
-  <body>
-    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
-  </body>
-</html>
- -

Iframe yeni bir fonksiyon tanımlar:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <script>
-      function whoAreYou() {
-        return "I'm frame1";
-      }
-   </script>
-  </head>
-  <body>
-  </body>
-</html>
- -

Bağlamı şu şekilde iframe olarak değiştirebilirsiniz:

- -
cd("#frame1");
- -

Şimdi global pencerenin belgesinin iframe olduğunu fark edeceksiniz:

- -

Ve, iframe'de tanımlanan işlevi çağırabilirsiniz:

- -

- -

Yardımcı Komutlar

- -

{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}

diff --git a/files/tr/tools/web_console/ui_tour/index.html b/files/tr/tools/web_console/ui_tour/index.html deleted file mode 100644 index dff0f7bafc..0000000000 --- a/files/tr/tools/web_console/ui_tour/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Web Konsolu'nu Açmak -slug: Tools/Web_Console/UI_Tour -translation_of: Tools/Web_Console/UI_Tour -original_slug: Araclar/Web_Konsolu/Web_Konsolunu_Acmak ---- -
{{ToolsSidebar}}
- -

Web Konsolu'nu açmak için:

- -
    -
  • Firefox Menü'nün altında "Web geliştirici"den "Web Konsolu"nu seçin (veya Mac OS X'te "Araçlar" menü çubuğunu görüntülerseniz)
    • -
  • ya da  CtrlShiftK (CommandOptionK  ,OS X'te) klavye kısaltması ile.
    • -
- -

Araç Kutusu alt kısımda gözükecektir, tarayıcı penceresinin solunda veya sağında (yerleştirme ayarlarınıza bağlı olarak), Web konsolu aktif edilir. (DevTools toolbar'da "Konsol" olarak adlandırılır.):

- -

- -

Web Konsolu'nun arayüzü dört yatay bölüme ayrılmıştır:

- -
    -
  • Araç Çubuğu: Üst kısımda üç buton içeren bir araç çubuğu bulunur. Konsolun içeriğini silmek için çöp tenekesi düğmesine tıklayın. Konsolda görüntülenen mesajları filtrelemek için huni simgesine tıklayın. Araç çubuğunun sağ tarafındaki onay kutusu, kaydetmek için "Kalıcı günlükler" özelliğini açmanıza izin verir.
    • -
  • Komut satırı: Komut satırı iki büyüktür işareti ile başlar (>>). JavaScript ifadeleri girmek için kullanın.
    • -
  • Mesaj Görüntüleme Bölgesi: Sayfadaki kod ve komut satırına girilen komutlar tarafından oluşturulan mesajlar her komutun ardından görüntülenir.
    • -
  • Araç çubuğunun sağ tarafındaki onay kutusu yeni bir sayfaya gittiğinizde veya geçerli sayfayı yeniden yüklediğinizde konsolun temizlenip temizlenmediğini kontrol eder. Varsayılan ayar konsolu temizleyecektir.
    • -
- -
-

Not: Konsolun içeriğini  Ctrl + Shift + L  (Windows, macOS, ve Linux'ta) veya Cmd + K  (macOS'da) klavye komutlarıyla temizleyebilirsiniz.

-
diff --git a/files/tr/web/accessibility/index.html b/files/tr/web/accessibility/index.html deleted file mode 100644 index ff844f6a40..0000000000 --- a/files/tr/web/accessibility/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Accessibility -slug: Web/Accessibility -translation_of: Web/Accessibility ---- -

Accessibility (often abbreviated to A11y—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way.

- -

For many people, iş fikirleri technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.

- -

"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." {{ Ref(1) }}

- -
-
-

Key tutorials

- -

The MDN Accessibility Learning Area contains modern, up-to-date tutorials covering accessibility essentials:

- -
-
What is accessibility?
-
This article starts off the module with a good look at what accessibility actually is — this includes what  Türk telekom bayiliği almak groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.
-
HTML: A good basis for accessibility
-
A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.
-
CSS and JavaScript accessibility best practices
-
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.
-
WAI-ARIA basics
-
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.
-
Accessible multimedia
-
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.
-
Mobile accessibility
-
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
-
-
- -
-

Other documentation

- -
-
Understanding the Web Content Accessibility Guidelines
-
-

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).

-
-
Keyboard-navigable JavaScript widgets
-
Until now, web developers who want to make their styled <div> and <span> based widgets  have lacked the proper techniques. Keyboard accessibility is part of the minimum accessibility requirements which a developer should be aware of.
-
ARIA
-
A collection of articles to learn how to use ARIA to make your HTML documents more accessible.
-
Assistive technology (AT) development
-
A collection of articles intended for AT developers
-
Mobile accessibility checklist
-
This document provides a concise checklist of accessibility requirements for mobile app developers.
-
Cognitive accessibility
-
When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.
-
Accessibility for seizure disorders
-
Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.
-
-
- -

View all articles about Accessibility...

-
- - -


-  

-
- -

{{ endnote(1) }} W3C - Accessibility

- -

See also

- - - - diff --git a/files/tr/web/accessibility/understanding_wcag/index.html b/files/tr/web/accessibility/understanding_wcag/index.html deleted file mode 100644 index fe71b20ebc..0000000000 --- a/files/tr/web/accessibility/understanding_wcag/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Understanding the Web Content Accessibility Guidelines -slug: Web/Accessibility/Understanding_WCAG -tags: - - NeedsTranslation - - TopicStub - - WCAG - - Web Content Accessibility Guidelines -translation_of: Web/Accessibility/Understanding_WCAG ---- -

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).

- -

The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.

- -

The four principles

- -

WCAG is broadly broken down into four principles — major things that web content must be to be considered accessible (see Understanding the Four Principles of Accessibility for the WCAG definitions).

- -

Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.

- -
    -
  • Perceivable: Users must be able to perceive it in some way, using one or more of their senses.
    • -
  • Operable: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).
    • -
  • Understandable: The content must be understandable to its users.
    • -
  • Robust: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.
    • -
- -

Should I use WCAG 2.0 or 2.1?

- -

WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. 

- -

What is WCAG 2.1?

- -

WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release WCAG 2.1 Adoption in Europe. 

- -

WCAG 2.1 includes:

- - - - - -

This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.

- -

What is accessibility? and particularity the Accessibility guidelines and the law section provide more related information.

diff --git a/files/tr/web/accessibility/understanding_wcag/keyboard/index.html b/files/tr/web/accessibility/understanding_wcag/keyboard/index.html deleted file mode 100644 index 32705d664f..0000000000 --- a/files/tr/web/accessibility/understanding_wcag/keyboard/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Keyboard -slug: Web/Accessibility/Understanding_WCAG/Keyboard -translation_of: Web/Accessibility/Understanding_WCAG/Keyboard ---- -
To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
- -

Focusable elements should have interactive semantics

- -

If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

- -
-

Note: One important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").

-
- -

Most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. However, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

- -

See also

- - - -

Avoid using tabindex attribute greater than zero

- -

The tabindex attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).

- -

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values.

- -

See also

- - - -

Clickable elements must be focusable and should have interactive semantics

- -

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

- -

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

- -

See also

- - - -

Interactive elements must be able to be activated using a keyboard

- -

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

- -

See also

- - - -

Interactive elements must be focusable

- -

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

- -

See also

- - - -

Focusable element must have focus styling

- -

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the :focus CSS pseudo-class.

- -

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

- -

If you create your own focusable components, be sure that you also define focus styling for them.

- -

See also

- - diff --git a/files/tr/web/api/beforeunloadevent/index.html b/files/tr/web/api/beforeunloadevent/index.html deleted file mode 100644 index ee2bfefa82..0000000000 --- a/files/tr/web/api/beforeunloadevent/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: BeforeUnloadEvent -slug: Web/API/BeforeUnloadEvent -tags: - - Boşaltma Olayından Önce -translation_of: Web/API/BeforeUnloadEvent ---- -

Beforeunload olayı, pencere, belge ve kaynakları kaldırılmak üzereyken tetiklenir.

- -

ReturnValue Event özelliğine boş olmayan bir dize atandığında, kullanıcılardan sayfadan ayrılmak için onay isteyen bir iletişim kutusu belirir (aşağıdaki örneğe bakın). Değer belirtilmediğinde, olay sessizce işlenir. Bazı uygulamalar, yalnızca çerçeve veya herhangi bir gömülü çerçeve bir kullanıcı hareketi veya kullanıcı etkileşimi alırsa iletişim kutusunu gösterir. Daha fazla bilgi için bkz. {{Anch ("Tarayıcı uyumluluğu")}}.

- -

{{InheritanceDiagram(600, 120)}}

- - - - - - - - - - - - - - - - - - - - -
KabarcıklarHayır
İptal edilebilirEvet
Hedef nesnelervarsayılan görünüm
Arayüz{{domxref("Event")}}
- -

Örnekler

- -
window.addEventListener("beforeunload", function( event ) {
-  event.returnValue = "\o/";
-});
-
-// Eşdeğerdir
-window.addEventListener("beforeunload", function( event ) {
-  event.preventDefault();
-});
- -

WebKit'ten türetilmiş tarayıcılar, iletişim kutusunun teknik özelliklerine uymaz. Neredeyse çapraz tarayıcıda çalışan bir örnek aşağıdaki örneğe yakın olacaktır.

- -
window.addEventListener("beforeunload", function (e) {
-  var confirmationMessage = "\o/";
-
-  (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
-  return confirmationMessage;                                /* Safari, Chrome ve diğerleri
-                                                              * WebKit'ten türetilmiş tarayıcılar */
-});
- -

Teknik Özellikler

- - - - - - - - - - - - - - -
Teknik ÖzelliklerDurumYorum
{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}{{Spec2("HTML WHATWG")}}Initial definition
- -

Tarayıcı Uyumluluğu

- -
- - -

{{Compat("api.BeforeUnloadEvent")}}

-
- -

Ayrıca bakınız

- - diff --git a/files/tr/web/api/canvas_api/index.html b/files/tr/web/api/canvas_api/index.html deleted file mode 100644 index 32842f3676..0000000000 --- a/files/tr/web/api/canvas_api/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Tuval Arabirimi -slug: Web/API/Canvas_API -tags: - - Arabirim - - Canvas - - Genel Bakış - - JavaScript - - Kaynak - - Tuval -translation_of: Web/API/Canvas_API -original_slug: Web/API/Tuval_Arabirimi ---- -
{{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

- -
-
    -
  • {{domxref("HTMLCanvasElement")}}
    • -
  • {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasGradient")}}
    • -
  • {{domxref("CanvasImageSource")}}
    • -
  • {{domxref("CanvasPattern")}}
    • -
  • {{domxref("ImageBitmap")}}
    • -
  • {{domxref("ImageData")}}
    • -
  • {{domxref("RenderingContext")}}
    • -
  • {{domxref("TextMetrics")}}
    • -
  • {{domxref("OffscreenCanvas")}}{{experimental_inline}}
    • -
  • {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}
    • -
-
- -

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

- -
    -
  • Fabric.js SVG işleme yeteneklerine iye, açık kaynaklı bir kütüphane.
    • -
  • Kinetic.js masaüstü ve taşınabilir uygulamalardaki etkileşime odaklanmış açık kaynaklı tuval kütüphanesi.
    • -
  • Paper.js vektör çizgeleri için HTML5 tuvalin üzerinde çalışan betikleme çatısı.
    • -
  • Origami.js hafif açık kaynaklı tuval kütüphanesi.
    • -
  • libCanvas güçlü ve hafif, açık kaynaklı tuval çatısı.
    • -
  • p5.js sanatçılar, eğitimciler ve yeni başlayanlar için çizim işlevselliği sunan tam donatılmış tuval kütüphanesi.
    • -
  • Processing.js Processing görselleştime dilinin JS kütüphanesi.
    • -
  • PlayCanvas açık kaynaklı oyun motoru.
    • -
  • Pixi.js açık kaynaklı oyun motoru.
    • -
  • PlotKit çizge kütüphanesi.
    • -
  • Rekapi tuval için canlandırma arabirimi.
    • -
  • PhiloGL veri görselleştirme, yaratıcı kodlama ve oyun geliştirme için WebGL çatısı.
    • -
  • JavaScript InfoVis Araçkiti Web için etkileşimli 2 boyutlu veri görselleştirmeleri yaratır.
    • -
  • EaselJS oyun ve sanat için, tuval kullanımını kolaylaştıran açık kaynaklı/özgür kütüphanedir
    • -
  • Scrawl-canvas 2 boyutlu çizgeler oluşturmak, değiştirmek için tasarlanmış, açık kaynaklı bir başka kütüphanedir.
    • -
  • heatmap.js açık kaynaklı, tuval üzerinde ısı haritaları oluşturmaya olanak tanıyan bir kütüphane.
    • -
  • ZIM çatısı, tuval üzerinde yaratıcı kodlama için kolaylıklar, bileşenler ve denetim sunar. Erişilebilirlik ve yüzlerce renkli kılavuz da bunların içindedir.
    • -
- -

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/comment/comment/index.html b/files/tr/web/api/comment/comment/index.html deleted file mode 100644 index 41109af106..0000000000 --- a/files/tr/web/api/comment/comment/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Comment() -slug: Web/API/Comment/Comment -translation_of: Web/API/Comment/Comment ---- -

{{ApiRef ("DOM")}} {{seeCompatTable}}

- -

Comment () konstruktoru yeni yaradılmış {{domxref ("Comment")}} obyektini mətn məzmunu olaraq parametrdə verilən isteğe bağlı {{domxref ("DOMString")}} qaytarır.

- -

Syntax

- -
comment1 = new Comment(); // Create an empty comment
-comment2 = new Comment("This is a comment");
- -

ax

- -
comment1 = new Comment(); // Create an empty comment
-comment2 = new Comment("This is a comment");
-
- -

Example

- -
var comment = new Comment("Test");
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-comment-comment', 'Comment: Comment')}}{{Spec2('DOM WHATWG')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.Comment.Comment")}}

- -
-

Note: For browsers where this constructor is not supported, {{domxref("Document.createComment()")}} may be suitable.

-
- -

See also

- - diff --git a/files/tr/web/api/comment/index.html b/files/tr/web/api/comment/index.html deleted file mode 100644 index 416930c567..0000000000 --- a/files/tr/web/api/comment/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Comment -slug: Web/API/Comment -tags: - - API - - DOM - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/Comment ---- -
{{ ApiRef("DOM") }}
- -

The Comment interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view. Comments are represented in HTML and XML as content between '<!--' and '-->'. In XML, the character sequence '--' cannot be used within a comment.

- -

{{InheritanceDiagram}}

- -

Properties

- -

This interface has no specific property, but inherits those of its parent, {{domxref("CharacterData")}}, and indirectly those of {{domxref("Node")}}.

- -

Constructor

- -
-
{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
-
Returns a Comment object with the parameter as its textual content.
-
- -

Methods

- -

This interface has no specific method, but inherits those of its parent, {{domxref("CharacterData")}}, and indirectly those of {{domxref("Node")}}.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#comment', 'Comment')}}{{Spec2('DOM WHATWG')}}Added the constructor.
{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM1')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.Comment")}}

- -

See also

- - diff --git a/files/tr/web/api/css_object_model/index.html b/files/tr/web/api/css_object_model/index.html deleted file mode 100644 index e799a59ee4..0000000000 --- a/files/tr/web/api/css_object_model/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: CSS Object Model (CSSOM) -slug: Web/API/CSS_Object_Model -tags: - - API - - CSSOM -translation_of: Web/API/CSS_Object_Model ---- -
{{DefaultAPISidebar('CSSOM')}}
- -

CSS Object Model, CSS'in JavaScript ile yönetilmesine imkan tanıyan bir API setidir. DOM ile oldukça benzerdir. Ancak CSSOM, HTML'den ziyade CSS içindir. CSSOM ile kullanıcılar CSS'i okuyabilir ya da dinamik olarak değiştirebilirler.

- -

Referanslar

- -
-
    -
  • {{domxref("AnimationEvent")}}
    • -
  • {{domxref("CaretPosition")}}
    • -
  • {{domxref("CSS")}}
    • -
  • {{domxref("CSSCharsetRule")}}
    • -
  • {{domxref("CSSConditionRule")}}
    • -
  • {{domxref("CSSCounterStyleRule")}}
    • -
  • {{domxref("CSSFontFaceRule")}}
    • -
  • {{domxref("CSSFontFeatureValuesMap")}}
    • -
  • {{domxref("CSSFontFeatureValuesRule")}}
    • -
  • {{domxref("CSSGroupingRule")}}
    • -
  • {{domxref("CSSImportRule")}}
    • -
  • {{domxref("CSSKeyframeRule")}}
    • -
  • {{domxref("CSSKeyframesRule")}}
    • -
  • {{domxref("CSSMarginRule")}}
    • -
  • {{domxref("CSSMediaRule")}}
    • -
  • {{domxref("CSSNamespaceRule")}}
    • -
  • {{domxref("CSSPageRule")}}
    • -
  • {{domxref("CSSRule")}}
    • -
  • {{domxref("CSSRuleList")}}
    • -
  • {{domxref("CSSStyleDeclaration")}}
    • -
  • {{domxref("CSSStyleSheet")}}
    • -
  • {{domxref("CSSStyleRule")}}
    • -
  • {{domxref("CSSSupportsRule")}}
    • -
  • {{domxref("CSSVariablesMap")}}
    • -
  • {{domxref("CSSViewportRule")}}
    • -
  • {{domxref("ElementCSSInlineStyle")}}
    • -
  • {{DOMxRef("FontFace")}}
    • -
  • {{DOMxRef("FontFaceSet")}}
    • -
  • {{DOMxRef("FontFaceSetLoadEvent")}}
    • -
  • {{domxref("GeometryUtils")}}
    • -
  • {{domxref("GetStyleUtils")}}
    • -
  • {{domxref("LinkStyle")}}
    • -
  • {{domxref("MediaList")}}
    • -
  • {{domxref("MediaQueryList")}}
    • -
  • {{DOMxRef("MediaQueryListEvent")}}
    • -
  • {{DOMxRef("MediaQueryListListener")}}
    • -
  • {{domxref("PseudoElement")}}
    • -
  • {{domxref("Screen")}}
    • -
  • {{domxref("StyleSheet")}}
    • -
  • {{domxref("StyleSheetList")}}
    • -
  • {{domxref("TransitionEvent")}}
    • -
-
- -

Several other interfaces are also extended by the CSSOM-related specifications: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.

- -

CSS Typed Object Model {{experimental_inline}}

- -

{{SeeCompatTable}}

- -
-
    -
  • {{DOMxRef("CSSImageValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSKeywordValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSMathInvert")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSMathMax")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSMathMin")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSMathNegate")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSMathProduct")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSMathSum")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSMathValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSMatrixComponent")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSNumericArray")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSNumericValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSPerspective")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSPositionValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSRotate")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSScale")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSSkew")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSSkewX")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSSkewY")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSStyleValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSTransformComponent")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSTransformValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSTranslate")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSUnitValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSUnparsedValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("CSSVariableReferenceValue")}} {{experimental_inline}}
    • -
  • {{DOMxRef("StylePropertyMap")}} {{experimental_inline}}
    • -
  • {{DOMxRef("StylePropertyMapReadOnly")}} {{experimental_inline}}
    • -
-
- -

Eski CSSOM Arayüzleri {{obsolete_inline}}

- -

{{obsolete_header}}

- -
-
    -
  • {{DOMxRef("CSSPrimitiveValue")}} {{obsolete_inline}}
    • -
  • {{DOMxRef("CSSValue")}} {{obsolete_inline}}
    • -
  • {{DOMxRef("CSSValueList")}} {{obsolete_inline}}
    • -
-
- -

Öğretici Materyaller

- - - -

Özellikler

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Typed OM")}}{{Spec2("CSS Typed OM")}} 
{{SpecName("CSS Painting API")}}{{Spec2("CSS Painting API")}}Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.
{{SpecName("CSSOM View")}}{{Spec2("CSSOM View")}}Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.
{{SpecName("CSSOM")}}{{Spec2("CSSOM")}}Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}} 
{{SpecName("CSS3 Fonts")}}{{Spec2("CSS3 Fonts")}} 
{{SpecName("CSS3 Animations")}}{{Spec2("CSS3 Animations")}} 
{{SpecName("CSS3 Transitions")}}{{Spec2("CSS3 Transitions")}} 
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}} 
{{SpecName("CSS3 Conditional")}}{{Spec2("CSS3 Conditional")}}{{DOMxRef("CSS")}} arayüzü tanımlandı.
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}} 
{{SpecName("CSS3 Counter Styles")}}{{Spec2("CSS3 Counter Styles")}} 
{{SpecName("DOM2 Style")}}{{Spec2("DOM2 Style")}}İlk tanımlama.
- -

Tarayıcı Uyumluluğu

- -

Tüm bu özellikler yıllar içinde azar azar farklı tarayıcılara eklendi: Basit bir tabloyla özetlenemeyecek kadar karmaşık bir süreç olduğundan lütfen kullanılabilirlik için belirli arayüzlere bakın.

- -

Ayrıca Bkz.

- - diff --git a/files/tr/web/api/css_object_model/managing_screen_orientation/index.html b/files/tr/web/api/css_object_model/managing_screen_orientation/index.html deleted file mode 100644 index c02e0c1215..0000000000 --- a/files/tr/web/api/css_object_model/managing_screen_orientation/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Ekran Oryantasyonunu Yönetmek -slug: Web/API/CSS_Object_Model/Managing_screen_orientation -tags: - - API - - CSSOM - - Ekran Konumu - - Ekran Oryantasyonu - - Oryantasyon - - Uzman -translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation ---- -
{{DefaultAPISidebar("CSSOM View")}}{{SeeCompatTable}}
- -

Özet

- -

Ekran oryantasyonu cihaz oryantasyonundan bir miktar farklı bir terim. Cihazın kendi oryantasyonunu tespit etme yeteneği olmasa bile ekranının her zaman bir oryantasyonu vardır. Eğer cihaz bu yeteneğe sahip ise web uygulamasının arayüzünü korumak veya uyarlamak için ekranı yönetme yeteneğine sahip olması faydalı bir özellik.

- -

Ekran oryantasyonunu yönetebilek için hem CSS'e hem Javascript'e dayanan çeşitli yöntemler mevcut. Bu yöntemlerden ilki orientation media query CSS kullanarak tarayıcının yatay modda (genişliğin yükseklikten uzun olduğu mod) veya dikey modda (yüksekliğin genişlikten uzun olduğu mod) içeriğin ekrandaki yerleşimini ayarlamasını sağlamak.

- -

İkinci yöntem ise Javascript Screen orientation API kullanılarak ekranın mevcut oryantasyonun alınması ve sabitlenmesi.

- -

Oryantasyona göre yerleşim planını ayarlamak

- -

Cihazın oryantasyonu değiştiğinde içeriğin ekrandaki yerleşiminin de değişmesi en çok istenilen durumlardan biri. Örneğin buton çubuğunun cihazın oryantasyonu bounca uzamasını istiyoruz. Media query kullanarak kolay ve otomatik bir şekilde yapabiliriz.

- -

Aşağıdaki HTML kodu üzerinden bir örnek yapalım.

- -
<ul id="toolbar">
-  <li>A</li>
-  <li>B</li>
-  <li>C</li>
-</ul>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
-
- -

CSS ekranın oryatasyonuna göre çalışacak özel stiller için media query'lere güveniyor.

- -
/* Önce ortak stiller tanımlayalım */
-
-html, body {
-  width : 100%;
-  height: 100%;
-}
-
-body {
-  border: 1px solid black;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-p {
-  font   : 1em sans-serif;
-  margin : 0;
-  padding: .5em;
-}
-
-ul {
-  list-style: none;
-
-  font   : 1em monospace;
-  margin : 0;
-  padding: .5em;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  background: black;
-}
-
-li {
-  display: inline-block;
-  margin : 0;
-  padding: 0.5em;
-  background: white;
-}
-
- -

Ortak stillerimiz hazır olduğuna göre oryantasyona göre çalışacak özel durumları tanımlamaya başlayabiliriz.

- -
/* Dikey modda buton çubuğunun üstte olmasını istiyoruz */
-
-@media screen and (orientation: portrait) {
-  #toolbar {
-    width: 100%;
-  }
-}
-
-/* Yatay modda buton çubuğunun solda durmasını istiyoruz */
-
-@media screen and (orientation: landscape) {
-  #toolbar {
-    position: fixed;
-    width: 2.65em;
-    height: 100%;
-  }
-
-  p {
-    margin-left: 2em;
-  }
-
-  li + li {
-    margin-top: .5em;
-  }
-}
-
- -

Ve sonuç:

- - - - - - - - - - - - - - -
PortraitLandscape
{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}
- -
-

Not: Oryantasyon media query'si  tarayıcı penceresinin(veya iframe'in) oryantasyonuna göre bu stilleri çalıştırıyor cihazın oryantasyonuna göre değil.

-
- -

Ekran oryantasyonunu sabitlemek

- -
-

Warning: Bu API şu anda deneysel bir çalışma ve Firefox OS ile Firefox for Android 'de  moz önekiyle, Windows 8.1 ve üstünde Internet Explorer'larda ise ms önekiyle kullanılabilir durumda.

-
- -

Bazı cihazlar (genellikle mobil cihazlar) kullanıcının kendi ekranındakileri her zaman okuyabileceğine garanti vererek ekran oryantasyonunu kendi oryantasyonuna göre dinamik olarak değiştirebiliyor. Bu davranış içerik metinlerden oluşuyorken çok iyi çalışmasına rağmen oryantasyona bağlı oyun gibi içeriklerde uygulamayı tamamen kullanılmaz hale getirebiliyor.

- -

Screen Orientation API bu şekilde negatif etkisi olan değişimlerin engellenmesi için geliştirildi.

- -

Oryantasyon değişikliğini dinleme

- -

Cihaz oryantasyonunu her değiştirdiğinde {{event("orientationchange")}} event'i tetiklenir ve  o anki oryantasyonu {{domxref("Screen.orientation")}} özelliğiyle okunabilir.

- -
screen.addEventListener("orientationchange", function () {
-  console.log("Ekranın oryantasyonu: " + screen.orientation);
-});
-
- -

Oryantasyon değişikliğini engelleme

- -

Bir web uygulaması ekranın oryantasyonunu kendi ihityaçlarına uyacak şekilde sabitleyebilir. Ekranın oryantasyonunu sabitlemek için {{domxref("Screen.lockOrientation()")}}  metodu kullanılırken sabitlemeyi kaldırmak için ise {{domxref("Screen.unlockOrientation()")}} metodu kullanılabilir.

- -

{{domxref("Screen.lockOrientation()")}} parametre olarak ekranın nasıl sabitlenmesi gerektiğine göre String (veya birden çok string) parametre alır. Geçerli parametre değerleri: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape . (Bu değerler hakkında detaylı bilgi için Bkz: {{domxref("Screen.lockOrientation")}}).

- -
screen.lockOrientation('landscape');
- -
-

Not:Ekranı sabitlemek web uygulaması bağımlıdır. Eğer uygulama A yatay moda sabitlenmiş ve uygulama B dkey moda sabitlenmiş ise A'dan B'ye ya da B'den A'ya geçildiğinde {{event("orientationchange")}} event'i tetiklenmez. Çünkü ikisi de kendi oryantasyonlarını korumaktadır.

- -

Ancak oryantasyonu sabitlerken istenen mevcut oryantasyon değişerek sabitlenen oryantasyona geçildiyse {{event("orientationchange")}} event'i tetiklenir.

-
- -

Firefox OS ve Android: Manifest ile oryantasyonu sabitleme

- -

Firefox OS ve Firefox Android (yakında Firefox masaüstü de) için oryantasyonu sabitlemenin özel bir yolu uygulamanın manifest dosyasının orientation alanına istenen oryantasyon modunu yazmak. Örneğin dikey mod için:

- -
"orientation": "portrait"
- -

Ayrıca bakınız

- - diff --git a/files/tr/web/api/document_object_model/index.html b/files/tr/web/api/document_object_model/index.html deleted file mode 100644 index 813aac4a2c..0000000000 --- a/files/tr/web/api/document_object_model/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: Document Object Model (DOM) -slug: Web/API/Document_Object_Model -tags: - - API - - DOM - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/API/Document_Object_Model ---- -
{{DefaultAPISidebar("DOM")}}
- -

The Document Object Model (DOM) connects web pages to scripts or programming languages. Usually that means JavaScript, although modelling HTML, SVG, or XML documents as objects is not part of the JavaScript language, as such.

- -

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document's structure, style, or content. Nodes can also have event handlers attached to them; once an event is triggered, the event handlers get executed.

- -

An introduction to the DOM is available.

- -

DOM interfaces

- -
-
    -
  • {{DOMxRef("Attr")}}
    • -
  • {{DOMxRef("CDATASection")}}
    • -
  • {{DOMxRef("CharacterData")}}
    • -
  • {{DOMxRef("ChildNode")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("Comment")}}
    • -
  • {{DOMxRef("CustomEvent")}}
    • -
  • {{DOMxRef("Document")}}
    • -
  • {{DOMxRef("DocumentFragment")}}
    • -
  • {{DOMxRef("DocumentType")}}
    • -
  • {{DOMxRef("DOMError")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("DOMException")}}
    • -
  • {{DOMxRef("DOMImplementation")}}
    • -
  • {{DOMxRef("DOMString")}}
    • -
  • {{DOMxRef("DOMTimeStamp")}}
    • -
  • {{DOMxRef("DOMStringList")}}
    • -
  • {{DOMxRef("DOMTokenList")}}
    • -
  • {{DOMxRef("Element")}}
    • -
  • {{DOMxRef("Event")}}
    • -
  • {{DOMxRef("EventTarget")}}
    • -
  • {{DOMxRef("HTMLCollection")}}
    • -
  • {{DOMxRef("MutationObserver")}}
    • -
  • {{DOMxRef("MutationRecord")}}
    • -
  • {{DOMxRef("NamedNodeMap")}}
    • -
  • {{DOMxRef("Node")}}
    • -
  • {{DOMxRef("NodeFilter")}}
    • -
  • {{DOMxRef("NodeIterator")}}
    • -
  • {{DOMxRef("NodeList")}}
    • -
  • {{DOMxRef("NonDocumentTypeChildNode")}}
    • -
  • {{DOMxRef("ParentNode")}}
    • -
  • {{DOMxRef("ProcessingInstruction")}}
    • -
  • {{DOMxRef("Selection")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("Range")}}
    • -
  • {{DOMxRef("Text")}}
    • -
  • {{DOMxRef("TextDecoder")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("TextEncoder")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("TimeRanges")}}
    • -
  • {{DOMxRef("TreeWalker")}}
    • -
  • {{DOMxRef("URL")}}
    • -
  • {{DOMxRef("Window")}}
    • -
  • {{DOMxRef("Worker")}}
    • -
  • {{DOMxRef("XMLDocument")}} {{Experimental_Inline}}
    • -
-
- -

Obsolete DOM interfaces

- -

The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specifications have been removed. It is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided:

- -
-
    -
  • {{DOMxRef("DocumentTouch")}}
    • -
  • {{DOMxRef("DOMConfiguration")}}
    • -
  • {{DOMxRef("DOMErrorHandler")}}
    • -
  • {{DOMxRef("DOMImplementationList")}}
    • -
  • {{DOMxRef("DOMImplementationRegistry")}}
    • -
  • {{DOMxRef("DOMImplementationSource")}}
    • -
  • {{DOMxRef("DOMLocator")}}
    • -
  • {{DOMxRef("DOMObject")}}
    • -
  • {{DOMxRef("DOMSettableTokenList")}}
    • -
  • {{DOMxRef("DOMUserData")}}
    • -
  • {{DOMxRef("ElementTraversal")}}
    • -
  • {{DOMxRef("Entity")}}
    • -
  • {{DOMxRef("EntityReference")}}
    • -
  • {{DOMxRef("NameList")}}
    • -
  • {{DOMxRef("Notation")}}
    • -
  • {{DOMxRef("TypeInfo")}}
    • -
  • {{DOMxRef("UserDataHandler")}}
    • -
-
- -

HTML interfaces

- -

A document containing HTML is described using the {{DOMxRef("Document")}} interface, which is extended by the HTML specification to include various HTML-specific features.

- -

An HTML document object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{DOMxRef("Window")}} interface, the {{DOMxRef("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{DOMxRef("window.history", "History")}}. Eventually, {{DOMxRef("Selection")}} is done on the document.

- -

HTML element interfaces

- -
-
    -
  • {{DOMxRef("HTMLAnchorElement")}}
    • -
  • {{DOMxRef("HTMLAppletElement")}} {{Obsolete_Inline}}
    • -
  • {{DOMxRef("HTMLAreaElement")}}
    • -
  • {{DOMxRef("HTMLAudioElement")}}
    • -
  • {{DOMxRef("HTMLBaseElement")}}
    • -
  • {{DOMxRef("HTMLBodyElement")}}
    • -
  • {{DOMxRef("HTMLBRElement")}}
    • -
  • {{DOMxRef("HTMLButtonElement")}}
    • -
  • {{DOMxRef("HTMLCanvasElement")}}
    • -
  • {{DOMxRef("HTMLDataElement")}}
    • -
  • {{DOMxRef("HTMLDataListElement")}}
    • -
  • {{DOMxRef("HTMLDialogElement")}}
    • -
  • {{DOMxRef("HTMLDirectoryElement")}}
    • -
  • {{DOMxRef("HTMLDivElement")}}
    • -
  • {{DOMxRef("HTMLDListElement")}}
    • -
  • {{DOMxRef("HTMLElement")}}
    • -
  • {{DOMxRef("HTMLEmbedElement")}}
    • -
  • {{DOMxRef("HTMLFieldSetElement")}}
    • -
  • {{DOMxRef("HTMLFontElement")}}
    • -
  • {{DOMxRef("HTMLFormElement")}}
    • -
  • {{DOMxRef("HTMLFrameElement")}}
    • -
  • {{DOMxRef("HTMLFrameSetElement")}}
    • -
  • {{DOMxRef("HTMLHeadElement")}}
    • -
  • {{DOMxRef("HTMLHeadingElement")}}
    • -
  • {{DOMxRef("HTMLHtmlElement")}}
    • -
  • {{DOMxRef("HTMLHRElement")}}
    • -
  • {{DOMxRef("HTMLIFrameElement")}}
    • -
  • {{DOMxRef("HTMLImageElement")}}
    • -
  • {{DOMxRef("HTMLInputElement")}}
    • -
  • {{DOMxRef("HTMLKeygenElement")}}
    • -
  • {{DOMxRef("HTMLLabelElement")}}
    • -
  • {{DOMxRef("HTMLLegendElement")}}
    • -
  • {{DOMxRef("HTMLLIElement")}}
    • -
  • {{DOMxRef("HTMLLinkElement")}}
    • -
  • {{DOMxRef("HTMLMapElement")}}
    • -
  • {{DOMxRef("HTMLMarqueeElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("HTMLMediaElement")}}
    • -
  • {{DOMxRef("HTMLMenuElement")}}
    • -
  • {{DOMxRef("HTMLMenuItemElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("HTMLMetaElement")}}
    • -
  • {{DOMxRef("HTMLMeterElement")}}
    • -
  • {{DOMxRef("HTMLModElement")}}
    • -
  • {{DOMxRef("HTMLObjectElement")}}
    • -
  • {{DOMxRef("HTMLOListElement")}}
    • -
  • {{DOMxRef("HTMLOptGroupElement")}}
    • -
  • {{DOMxRef("HTMLOptionElement")}}
    • -
  • {{DOMxRef("HTMLOutputElement")}}
    • -
  • {{DOMxRef("HTMLParagraphElement")}}
    • -
  • {{DOMxRef("HTMLParamElement")}}
    • -
  • {{DOMxRef("HTMLPreElement")}}
    • -
  • {{DOMxRef("HTMLProgressElement")}}
    • -
  • {{DOMxRef("HTMLQuoteElement")}}
    • -
  • {{DOMxRef("HTMLScriptElement")}}
    • -
  • {{DOMxRef("HTMLSelectElement")}}
    • -
  • {{DOMxRef("HTMLSourceElement")}}
    • -
  • {{DOMxRef("HTMLSpanElement")}}
    • -
  • {{DOMxRef("HTMLStyleElement")}}
    • -
  • {{DOMxRef("HTMLTableElement")}}
    • -
  • {{DOMxRef("HTMLTableCaptionElement")}}
    • -
  • {{DOMxRef("HTMLTableCellElement")}}
    • -
  • {{DOMxRef("HTMLTableDataCellElement")}}
    • -
  • {{DOMxRef("HTMLTableHeaderCellElement")}}
    • -
  • {{DOMxRef("HTMLTableColElement")}}
    • -
  • {{DOMxRef("HTMLTableRowElement")}}
    • -
  • {{DOMxRef("HTMLTableSectionElement")}}
    • -
  • {{DOMxRef("HTMLTextAreaElement")}}
    • -
  • {{DOMxRef("HTMLTimeElement")}}
    • -
  • {{DOMxRef("HTMLTitleElement")}}
    • -
  • {{DOMxRef("HTMLTrackElement")}}
    • -
  • {{DOMxRef("HTMLUListElement")}}
    • -
  • {{DOMxRef("HTMLUnknownElement")}}
    • -
  • {{DOMxRef("HTMLVideoElement")}}
    • -
-
- -

Other interfaces

- -
-
    -
  • {{DOMxRef("CanvasRenderingContext2D")}}
    • -
  • {{DOMxRef("WebGLRenderingContext")}}
    • -
  • {{DOMxRef("CanvasGradient")}}
    • -
  • {{DOMxRef("CanvasPattern")}}
    • -
  • {{DOMxRef("TextMetrics")}}
    • -
  • {{DOMxRef("ImageData")}}
    • -
  • {{DOMxRef("CanvasPixelArray")}}
    • -
  • {{DOMxRef("NotifyAudioAvailableEvent")}}
    • -
  • {{DOMxRef("HTMLAllCollection")}}
    • -
  • {{DOMxRef("HTMLFormControlsCollection")}}
    • -
  • {{DOMxRef("HTMLOptionsCollection")}}
    • -
  • {{DOMxRef("HTMLPropertiesCollection")}}
    • -
  • {{DOMxRef("DOMStringMap")}}
    • -
  • {{DOMxRef("RadioNodeList")}}
    • -
  • {{DOMxRef("MediaError")}}
    • -
-
- -

Obsolete HTML interfaces

- -
-
    -
  • {{DOMxRef("HTMLBaseFontElement")}}
    • -
  • {{DOMxRef("HTMLIsIndexElement")}}
    • -
  • {{DOMxRef("HTMLMarqueeElement")}}
    • -
  • {{DOMxRef("HTMLMenuItemElement")}}
    • -
-
- -

SVG interfaces

- -

SVG element interfaces

- -
-
    -
  • {{DOMxRef("SVGAElement")}}
    • -
  • {{DOMxRef("SVGAltGlyphElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGAltGlyphDefElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGAltGlyphItemElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGAnimationElement")}}
    • -
  • {{DOMxRef("SVGAnimateElement")}}
    • -
  • {{DOMxRef("SVGAnimateColorElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGAnimateMotionElement")}}
    • -
  • {{DOMxRef("SVGAnimateTransformElement")}}
    • -
  • {{DOMxRef("SVGCircleElement")}}
    • -
  • {{DOMxRef("SVGClipPathElement")}}
    • -
  • {{DOMxRef("SVGColorProfileElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGComponentTransferFunctionElement")}}
    • -
  • {{DOMxRef("SVGCursorElement")}}
    • -
  • {{DOMxRef("SVGDefsElement")}}
    • -
  • {{DOMxRef("SVGDescElement")}}
    • -
  • {{DOMxRef("SVGElement")}}
    • -
  • {{DOMxRef("SVGEllipseElement")}}
    • -
  • {{DOMxRef("SVGFEBlendElement")}}
    • -
  • {{DOMxRef("SVGFEColorMatrixElement")}}
    • -
  • {{DOMxRef("SVGFEComponentTransferElement")}}
    • -
  • {{DOMxRef("SVGFECompositeElement")}}
    • -
  • {{DOMxRef("SVGFEConvolveMatrixElement")}}
    • -
  • {{DOMxRef("SVGFEDiffuseLightingElement")}}
    • -
  • {{DOMxRef("SVGFEDisplacementMapElement")}}
    • -
  • {{DOMxRef("SVGFEDistantLightElement")}}
    • -
  • {{DOMxRef("SVGFEDropShadowElement")}}
    • -
  • {{DOMxRef("SVGFEFloodElement")}}
    • -
  • {{DOMxRef("SVGFEFuncAElement")}}
    • -
  • {{DOMxRef("SVGFEFuncBElement")}}
    • -
  • {{DOMxRef("SVGFEFuncGElement")}}
    • -
  • {{DOMxRef("SVGFEFuncRElement")}}
    • -
  • {{DOMxRef("SVGFEGaussianBlurElement")}}
    • -
  • {{DOMxRef("SVGFEImageElement")}}
    • -
  • {{DOMxRef("SVGFEMergeElement")}}
    • -
  • {{DOMxRef("SVGFEMergeNodeElement")}}
    • -
  • {{DOMxRef("SVGFEMorphologyElement")}}
    • -
  • {{DOMxRef("SVGFEOffsetElement")}}
    • -
  • {{DOMxRef("SVGFEPointLightElement")}}
    • -
  • {{DOMxRef("SVGFESpecularLightingElement")}}
    • -
  • {{DOMxRef("SVGFESpotLightElement")}}
    • -
  • {{DOMxRef("SVGFETileElement")}}
    • -
  • {{DOMxRef("SVGFETurbulenceElement")}}
    • -
  • {{DOMxRef("SVGFilterElement")}}
    • -
  • {{DOMxRef("SVGFilterPrimitiveStandardAttributes")}}
    • -
  • {{DOMxRef("SVGFontElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGFontFaceElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGFontFaceFormatElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGFontFaceNameElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGFontFaceSrcElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGFontFaceUriElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGForeignObjectElement")}}
    • -
  • {{DOMxRef("SVGGElement")}}
    • -
  • {{DOMxRef("SVGGeometryElement")}}
    • -
  • {{DOMxRef("SVGGlyphElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGGlyphRefElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGGradientElement")}}
    • -
  • {{DOMxRef("SVGGraphicsElement")}}
    • -
  • {{DOMxRef("SVGHatchElement")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("SVGHatchpathElement")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("SVGHKernElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGImageElement")}}
    • -
  • {{DOMxRef("SVGLinearGradientElement")}}
    • -
  • {{DOMxRef("SVGLineElement")}}
    • -
  • {{DOMxRef("SVGMarkerElement")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("SVGMaskElement")}}
    • -
  • {{DOMxRef("SVGMeshElement")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("SVGMeshGradientElement")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("SVGMeshpatchElement")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("SVGMeshrowElement")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("SVGMetadataElement")}}
    • -
  • {{DOMxRef("SVGMissingGlyphElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGMPathElement")}}
    • -
  • {{DOMxRef("SVGPathElement")}}
    • -
  • {{DOMxRef("SVGPatternElement")}}
    • -
  • {{DOMxRef("SVGPolylineElement")}}
    • -
  • {{DOMxRef("SVGPolygonElement")}}
    • -
  • {{DOMxRef("SVGRadialGradientElement")}}
    • -
  • {{DOMxRef("SVGRectElement")}}
    • -
  • {{DOMxRef("SVGScriptElement")}}
    • -
  • {{DOMxRef("SVGSetElement")}}
    • -
  • {{DOMxRef("SVGSolidcolorElement")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("SVGStopElement")}}
    • -
  • {{DOMxRef("SVGStyleElement")}}
    • -
  • {{DOMxRef("SVGSVGElement")}}
    • -
  • {{DOMxRef("SVGSwitchElement")}}
    • -
  • {{DOMxRef("SVGSymbolElement")}}
    • -
  • {{DOMxRef("SVGTextContentElement")}}
    • -
  • {{DOMxRef("SVGTextElement")}}
    • -
  • {{DOMxRef("SVGTextPathElement")}}
    • -
  • {{DOMxRef("SVGTextPositioningElement")}}
    • -
  • {{DOMxRef("SVGTitleElement")}}
    • -
  • {{DOMxRef("SVGTRefElement")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGTSpanElement")}}
    • -
  • {{DOMxRef("SVGUseElement")}}
    • -
  • {{DOMxRef("SVGUnknownElement")}} {{Experimental_Inline}}
    • -
  • {{DOMxRef("SVGViewElement")}}
    • -
  • {{DOMxRef("SVGVKernElement")}} {{Deprecated_Inline}}
    • -
-
- -

SVG data type interfaces

- -

Here are the DOM APIs for data types used in the definitions of SVG properties and attributes.

- -
-

Note: Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed; in addition, they have a length property indicating the number of items in the lists: {{DOMxRef("SVGLengthList")}}, {{DOMxRef("SVGNumberList")}}, {{DOMxRef("SVGPathSegList")}}, and {{DOMxRef("SVGPointList")}}.

-
- -

Static type

- -
-
    -
  • {{DOMxRef("SVGAngle")}}
    • -
  • {{DOMxRef("SVGColor")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGICCColor")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGElementInstance")}}
    • -
  • {{DOMxRef("SVGElementInstanceList")}}
    • -
  • {{DOMxRef("SVGLength")}}
    • -
  • {{DOMxRef("SVGLengthList")}}
    • -
  • {{DOMxRef("SVGMatrix")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGNameList")}}
    • -
  • {{DOMxRef("SVGNumber")}}
    • -
  • {{DOMxRef("SVGNumberList")}}
    • -
  • {{DOMxRef("SVGPaint")}}
    • -
  • {{DOMxRef("SVGPathSeg")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegClosePath")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegMovetoAbs")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegMovetoRel")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegLinetoAbs")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegLinetoRel")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegCurvetoCubicAbs")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegCurvetoCubicRel")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegCurvetoQuadraticAbs")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegCurvetoQuadraticRel")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegArcAbs")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegArcRel")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegLinetoHorizontalAbs")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegLinetoHorizontalRel")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegLinetoVerticalAbs")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegLinetoVerticalRel")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegCurvetoCubicSmoothAbs")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegCurvetoCubicSmoothRel")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegCurvetoQuadraticSmoothRel")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPathSegList")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPoint")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPointList")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGPreserveAspectRatio")}}
    • -
  • {{DOMxRef("SVGRect")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGStringList")}}
    • -
  • {{DOMxRef("SVGTransform")}}
    • -
  • {{DOMxRef("SVGTransformList")}}
    • -
-
- -

Animated type

- -
-
    -
  • {{DOMxRef("SVGAnimatedAngle")}}
    • -
  • {{DOMxRef("SVGAnimatedBoolean")}}
    • -
  • {{DOMxRef("SVGAnimatedEnumeration")}}
    • -
  • {{DOMxRef("SVGAnimatedInteger")}}
    • -
  • {{DOMxRef("SVGAnimatedLength")}}
    • -
  • {{DOMxRef("SVGAnimatedLengthList")}}
    • -
  • {{DOMxRef("SVGAnimatedNumber")}}
    • -
  • {{DOMxRef("SVGAnimatedNumberList")}}
    • -
  • {{DOMxRef("SVGAnimatedPathData")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGAnimatedPoints")}}
    • -
  • {{DOMxRef("SVGAnimatedPreserveAspectRatio")}}
    • -
  • {{DOMxRef("SVGAnimatedRect")}}
    • -
  • {{DOMxRef("SVGAnimatedString")}}
    • -
  • {{DOMxRef("SVGAnimatedTransformList")}}
    • -
-
- - - -
-
    -
  • {{DOMxRef("ElementTimeControl")}}
    • -
  • {{DOMxRef("TimeEvent")}}
    • -
-
- -

Other SVG interfaces

- -
-
    -
  • {{DOMxRef("GetSVGDocument")}}
    • -
  • {{DOMxRef("ShadowAnimation")}}
    • -
  • {{DOMxRef("SVGColorProfileRule")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGCSSRule")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGDocument")}}
    • -
  • {{DOMxRef("SVGException")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGExternalResourcesRequired")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGFitToViewBox")}}
    • -
  • {{DOMxRef("SVGLangSpace")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGLocatable")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGRenderingIntent")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGStylable")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGTests")}}
    • -
  • {{DOMxRef("SVGTransformable")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGUnitTypes")}}
    • -
  • {{DOMxRef("SVGUseElementShadowRoot")}}
    • -
  • {{DOMxRef("SVGURIReference")}}
    • -
  • {{DOMxRef("SVGViewSpec")}} {{Deprecated_Inline}}
    • -
  • {{DOMxRef("SVGZoomAndPan")}}
    • -
  • {{DOMxRef("SVGZoomEvent")}} {{Deprecated_Inline}}
    • -
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4")}}{{Spec2("DOM4")}} 
{{SpecName("DOM3 Core")}}{{Spec2("DOM3 Core")}} 
{{SpecName("DOM2 Core")}}{{Spec2("DOM2 Core")}}g
{{SpecName("DOM1")}}{{Spec2("DOM1")}}Initial definition
- -

See also

- - diff --git a/files/tr/web/api/document_object_model/introduction/index.html b/files/tr/web/api/document_object_model/introduction/index.html deleted file mode 100644 index ace5f3c84b..0000000000 --- a/files/tr/web/api/document_object_model/introduction/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: DOM giriş -slug: Web/API/Document_Object_Model/Introduction -translation_of: Web/API/Document_Object_Model/Introduction ---- -

Document Object Model (DOM) web dökümanında oluşturulan içerik ve yapılar gibi nesnelerin veri gösterimidir.Bu klavuzda,DOM' u kısaca göstereceğiz.O halde DOM hafızada nasıl  HTML ya da XML dökümanını temsil eder ve web içerik ve uygulamaları için API nasıl kullanılır bakalım.

- -

DOM nedir ?

- -

Document Object Model (DOM) , HTML ve XML için programlama arayüzüdür. Sayfayı temsil eder ve böylece program döküman yapısını, stilini ve içeriğini değiştirebilir. DOM dökümanı nodes(düğümler) ve objects(nesneler) şeklinde temsil eder. Bu sayede programlama dili sayfayla bağlantı kurabilir.

- -

Web sayfası bir dökümandır. Bu döküman tarayıcı penceresinde ya da HTML kaynağı gibi görüntülenebilir. Ama her iki durumda da aynı belge vardır. DOM aynı belgeyi temsil eder bu yüzden değiştirilebilir. DOM web sayfasında nesne yönelimli temsilidir, ki javascript gibi script dilleri ile modifiye edilebilir.

- -

W3C DOM ve WHATWG DOM standartları çoğu modern tarayıcıda uygulanmaktadır.

- -

For example, the standard DOM specifies that the getElementsByTagName method in the code below must return a list of all the <p> elements in the document:

- -
const paragraphs = document.getElementsByTagName("p");
-// paragraphs[0] is the first <p> element
-// paragraphs[1] is the second <p> element, etc.
-alert(paragraphs[0].nodeName);
-
- -

All of the properties, methods, and events available for manipulating and creating web pages are organized into objects (for example, the document object that represents the document itself, the table object that implements the special {{domxref("HTMLTableElement")}} DOM interface for accessing HTML tables, and so forth). This documentation provides an object-by-object reference to the DOM.

- -

The modern DOM is built using multiple APIs that work together. The core DOM defines the objects that fundamentally describe a document and the objects within it. This is expanded upon as needed by other APIs that add new features and capabilities to the DOM. For example, the HTML DOM API adds support for representing HTML documents to the core DOM.

- -

DOM and JavaScript

- -

The short example above, like nearly all of the examples in this reference, is {{glossary("JavaScript")}}. That is to say, it's written in JavaScript, but it uses the DOM to access the document and its elements. The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts (e.g. elements). Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.

- -

In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:

- -

API = DOM + JavaScript

- -

The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:

- -
# Python DOM example
-import xml.dom.minidom as m
-doc = m.parse(r"C:\Projects\Py\chap1.xml")
-doc.nodeName # DOM property of document object
-p_list = doc.getElementsByTagName("para")
-
- -

For more information on what technologies are involved in writing JavaScript on the web, see JavaScript technologies overview.

- -

Accessing the DOM

- -

You don't have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible via JavaScript.

- -

When you create a script–whether it's inline in a <script> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the {{domxref("document")}} or {{domxref("Window", "window")}} elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Your DOM programming may be something as simple as the following, which displays an alert message by using the {{domxref("window.alert", "alert()")}} function from the {{domxref("Window", "window")}} object, or it may use more sophisticated DOM methods to actually create new content, as in the longer example below.

- -

This following JavaScript will display an alert when the document is loaded (and when the whole DOM is available for use):

- -
<body onload="window.alert('Welcome to my home page!');">
-
- -

Another example. This function creates a new H1 element, adds text to that element, and then adds the H1 to the tree for this document:

- -
<html>
-  <head>
-    <script>
-       // run this function when the document is loaded
-       window.onload = function() {
-
-         // create a couple of elements in an otherwise empty HTML page
-         const heading = document.createElement("h1");
-         const heading_text = document.createTextNode("Big Head!");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
-
- -

Fundamental data types

- -

This reference tries to describe the various objects and types in simple terms. But there are a number of different data types being passed around the API that you should be aware of.

- -
-

Note: Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as elements, although strictly speaking not every node is an element.

-
- -

The following table briefly describes these data types.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Data type (Interface)Description
{{domxref("Document")}}When a member returns an object of type document (e.g., the ownerDocument property of an element returns the document to which it belongs), this object is the root document object itself. The DOM document Reference chapter describes the document object.
{{domxref("Node")}}Every object located within a document is a node of some kind. In an HTML document, an object can be an element node but also a text node or attribute node.
{{domxref("Element")}}The element type is based on node. It refers to an element or a node of type element returned by a member of the DOM API. Rather than saying, for example, that the {{domxref("document.createElement()")}} method returns an object reference to a node, we just say that this method returns the element that has just been created in the DOM. element objects implement the DOM Element interface and also the more basic Node interface, both of which are included together in this reference. In an HTML document, elements are further enhanced by the HTML DOM API's {{domxref("HTMLElement")}} interface as well as other interfaces describing capabilities of specific kinds of elements (for instance, {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).
{{domxref("NodeList")}}A nodeList is an array of elements, like the kind that is returned by the method {{domxref("document.getElementsByTagName()")}}. Items in a nodeList are accessed by index in either of two ways: -
    -
  • list.item(1)
    • -
  • list[1]
    • -
- These two are equivalent. In the first, item() is the single method on the nodeList object. The latter uses the typical array syntax to fetch the second item in the list.
{{domxref("Attribute")}}When an attribute is returned by a member (e.g., by the createAttribute() method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.
{{domxref("NamedNodeMap")}}A namedNodeMap is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A namedNodeMap has an item() method for this purpose, and you can also add and remove items from a namedNodeMap.
- -

There are also some common terminology considerations to keep in mind. It's common to refer to any {{domxref("Attribute")}} node as simply an attribute, for example, and to refer to an array of DOM nodes as a nodeList. You'll find these terms and others to be introduced and used throughout the documentation.

- -

DOM interfaces

- -

This guide is about the objects and the actual things you can use to manipulate the DOM hierarchy. There are many points where understanding how these work can be confusing. For example, the object representing the HTML form element gets its name property from the HTMLFormElement interface but its className property from the HTMLElement interface. In both cases, the property you want is simply in that form object.

- -

But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.

- -

Interfaces and Objects

- -

Many objects borrow from several different interfaces. The table object, for example, implements a specialized {{domxref("HTMLTableElement")}} interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM {{domxref("Element")}} Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also implements the more basic Node interface, from which Element derives.

- -

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

- -
const table = document.getElementById("table");
-const tableAttrs = table.attributes; // Node/Element interface
-for (let i = 0; i < tableAttrs.length; i++) {
-  // HTMLTableElement interface: border attribute
-  if(tableAttrs[i].nodeName.toLowerCase() == "border")
-    table.border = "1";
-}
-// HTMLTableElement interface: summary attribute
-table.summary = "note: increased border";
-
- -

Core Interfaces in the DOM

- -

This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the DOM Examples chapter at the end of this book.

- -

The document and window objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the window object represents something like the browser, and the document object is the root of the document itself. Element inherits from the generic Node interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object example in the previous section.

- -

The following is a brief list of common APIs in web and XML page scripting using the DOM.

- -
    -
  • {{domxref("document.getElementById", "", "", "1")}}(id)
    • -
  • document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)
    • -
  • {{domxref("document.createElement", "", "", "1")}}(name)
    • -
  • parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)
    • -
  • element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}
    • -
  • element.{{domxref("HTMLElement.style", "style", "", "1")}}.left
    • -
  • element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()
    • -
  • element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()
    • -
  • element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()
    • -
  • {{domxref("window.content", "", "", "1")}}
    • -
  • {{domxref("window.onload", "", "", "1")}}
    • -
  • {{domxref("window.scrollTo", "", "", "1")}}()
    • -
- -

Testing the DOM API

- -

This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <script> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.

- -

There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.

- -

You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the test() function as needed, create more buttons, or add elements as necessary.

- -
<html>
-<head>
-  <title>DOM Tests</title>
-  <script>
-    function setBodyAttr(attr, value) {
-      if (document.body) document.body[attr] = value;
-      else throw new Error("no support");
-    }
-  </script>
-</head>
-<body>
-  <div style="margin: .5in; height: 400px;">
-    <p><b><tt>text</tt></b></p>
-    <form>
-      <select onChange="setBodyAttr('text',
-        this.options[this.selectedIndex].value);">
-        <option value="black">black</option>
-        <option value="red">red</option>
-      </select>
-      <p><b><tt>bgColor</tt></b></p>
-      <select onChange="setBodyAttr('bgColor',
-        this.options[this.selectedIndex].value);">
-        <option value="white">white</option>
-        <option value="lightgrey">gray</option>
-      </select>
-      <p><b><tt>link</tt></b></p>
-      <select onChange="setBodyAttr('link',
-        this.options[this.selectedIndex].value);">
-        <option value="blue">blue</option>
-        <option value="green">green</option>
-      </select>
-      <small>
-        <a href="http://some.website.tld/page.html" id="sample">
-          (sample link)
-        </a>
-      </small><br />
-      <input type="button" value="version" onclick="ver()" />
-    </form>
-  </div>
-</body>
-</html>
-
- -

To test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.

- -
-
Figure 0.1 Sample DOM Test Page
-Image:DOM_Ref_Introduction_to_the_DOM.gif
- -

In this example, the drop-down menus dynamically update such DOM—accessible aspects of the web page as its background color (bgColor), the color of the hyperlinks (aLink), and color of the text (text). However, you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.

- - - - - -
{{DefaultAPISidebar("DOM")}}
diff --git a/files/tr/web/api/event/index.html b/files/tr/web/api/event/index.html deleted file mode 100644 index 5b9e58046e..0000000000 --- a/files/tr/web/api/event/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Event -slug: Web/API/Event -tags: - - API - - DOM - - Event - - Interface - - NeedsTranslation - - Reference - - TopicStub - - UI - - listener -translation_of: Web/API/Event ---- -

{{APIRef("DOM")}}

- -

The Event interface represents any event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.

- -

Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as <button>, <div>, <span>, etc.) using EventTarget.addEventListener(), and this generally replaces using the old HTML event handler attributes. Further, when properly added, such handlers can also be disconnected if needed using removeEventListener(). Note that one element can have several such handlers, even for the exact same event, particularly if separate, independent code modules attach them, each for its own independent purposes (for example, a webpage with an advertising-module and statistics-module both monitoring video-watching). When there are many nested elements, each with its own handler(s), event processing can become very complicated -- especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the Event bubbling and capture settings of each handler triggered.

- -

Interfaces based on Event

- -

Below is a list of interfaces which are based on the main Event interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".

- -
-
    -
  • {{domxref("AnimationEvent")}}
    • -
  • {{domxref("AudioProcessingEvent")}}
    • -
  • {{domxref("BeforeInputEvent")}}
    • -
  • {{domxref("BeforeUnloadEvent")}}
    • -
  • {{domxref("BlobEvent")}}
    • -
  • {{domxref("ClipboardEvent")}}
    • -
  • {{domxref("CloseEvent")}}
    • -
  • {{domxref("CompositionEvent")}}
    • -
  • {{domxref("CSSFontFaceLoadEvent")}}
    • -
  • {{domxref("CustomEvent")}}
    • -
  • {{domxref("DeviceLightEvent")}}
    • -
  • {{domxref("DeviceMotionEvent")}}
    • -
  • {{domxref("DeviceOrientationEvent")}}
    • -
  • {{domxref("DeviceProximityEvent")}}
    • -
  • {{domxref("DOMTransactionEvent")}}
    • -
  • {{domxref("DragEvent")}}
    • -
  • {{domxref("EditingBeforeInputEvent")}}
    • -
  • {{domxref("ErrorEvent")}}
    • -
  • {{domxref("FetchEvent")}}
    • -
  • {{domxref("FocusEvent")}}
    • -
  • {{domxref("GamepadEvent")}}
    • -
  • {{domxref("HashChangeEvent")}}
    • -
  • {{domxref("IDBVersionChangeEvent")}}
    • -
  • {{domxref("InputEvent")}}
    • -
  • {{domxref("KeyboardEvent")}}
    • -
  • {{domxref("MediaStreamEvent")}}
    • -
  • {{domxref("MessageEvent")}}
    • -
  • {{domxref("MouseEvent")}}
    • -
  • {{domxref("MutationEvent")}}
    • -
  • {{domxref("OfflineAudioCompletionEvent")}}
    • -
  • {{domxref("PageTransitionEvent")}}
    • -
  • {{domxref("PaymentRequestUpdateEvent")}}
    • -
  • {{domxref("PointerEvent")}}
    • -
  • {{domxref("PopStateEvent")}}
    • -
  • {{domxref("ProgressEvent")}}
    • -
  • {{domxref("RelatedEvent")}}
    • -
  • {{domxref("RTCDataChannelEvent")}}
    • -
  • {{domxref("RTCIdentityErrorEvent")}}
    • -
  • {{domxref("RTCIdentityEvent")}}
    • -
  • {{domxref("RTCPeerConnectionIceEvent")}}
    • -
  • {{domxref("SensorEvent")}}
    • -
  • {{domxref("StorageEvent")}}
    • -
  • {{domxref("SVGEvent")}}
    • -
  • {{domxref("SVGZoomEvent")}}
    • -
  • {{domxref("TimeEvent")}}
    • -
  • {{domxref("TouchEvent")}}
    • -
  • {{domxref("TrackEvent")}}
    • -
  • {{domxref("TransitionEvent")}}
    • -
  • {{domxref("UIEvent")}}
    • -
  • {{domxref("UserProximityEvent")}}
    • -
  • {{domxref("WebGLContextEvent")}}
    • -
  • {{domxref("WheelEvent")}}
    • -
-
- -

Constructor

- -
-
{{domxref("Event.Event", "Event()")}}
-
Creates an Event object, returning it to the caller.
-
- -

Properties

- -
-
{{domxref("Event.bubbles")}} {{readonlyinline}}
-
A Boolean indicating whether the event bubbles up through the DOM or not.
-
{{domxref("Event.cancelBubble")}}
-
A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to true before returning from an event handler prevents propagation of the event.
-
{{domxref("Event.cancelable")}} {{readonlyinline}}
-
A Boolean indicating whether the event is cancelable.
-
{{domxref("Event.composed")}} {{ReadOnlyInline}}
-
A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
-
{{domxref("Event.currentTarget")}} {{readonlyinline}}
-
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent; it's possible this has been changed along the way through retargeting.
-
{{domxref("Event.deepPath")}} {{non-standard_inline}}
-
An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.
-
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
-
Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.
-
{{domxref("Event.eventPhase")}} {{readonlyinline}}
-
Indicates which phase of the event flow is being processed.
-
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
The explicit original target of the event (Mozilla-specific).
-
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
The original target of the event, before any retargetings (Mozilla-specific).
-
{{domxref("Event.returnValue")}}
-
A historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}} instead, but you can use returnValue if you choose to do so.
-
{{domxref("Event.srcElement")}} {{non-standard_inline}}
-
A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}, which is starting to be supported in some other browsers for web compatibility purposes.
-
{{domxref("Event.target")}} {{readonlyinline}}
-
A reference to the target to which the event was originally dispatched.
-
{{domxref("Event.timeStamp")}} {{readonlyinline}}
-
The time at which the event was created (in milliseconds). By specification, this value is time since epoch, but in reality browsers' definitions vary; in addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.
-
{{domxref("Event.type")}} {{readonlyinline}}
-
The name of the event (case-insensitive).
-
{{domxref("Event.isTrusted")}} {{readonlyinline}}
-
Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like event.initEvent).
-
- -

Obsolete properties

- -
-
{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}
-
A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.
-
- -

Methods

- -
-
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
-
-

Creates a new event, which must then be initialized by calling its initEvent() method.

-
-
{{domxref("Event.composedPath()")}}
-
Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its {{domxref("ShadowRoot.mode")}} closed.
-
- -
-
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
-
Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.
-
{{domxref("Event.preventDefault()")}}
-
Cancels the event (if it is cancelable).
-
{{domxref("Event.stopImmediatePropagation()")}}
-
For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)
-
{{domxref("Event.stopPropagation()")}}
-
Stops the propagation of events further along in the DOM.
-
- -

Obsolete methods

- -
-
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
-
Non-standard. Returns the value of {{domxref("Event.defaultPrevented")}}. Use {{domxref("Event.defaultPrevented")}} instead.
-
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.
-
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Obsolete, use {{domxref("event.stopPropagation")}} instead.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}} 
- -

Browser compatibility

- - - -

{{Compat("api.Event")}}

- -

See also

- - diff --git a/files/tr/web/api/eventtarget/addeventlistener/index.html b/files/tr/web/api/eventtarget/addeventlistener/index.html deleted file mode 100644 index 10d3da4d1a..0000000000 --- a/files/tr/web/api/eventtarget/addeventlistener/index.html +++ /dev/null @@ -1,774 +0,0 @@ ---- -title: EventTarget.addEventListener() -slug: Web/API/EventTarget/addEventListener -translation_of: Web/API/EventTarget/addEventListener ---- -
{{APIRef("DOM Events")}}
- -

{{domxref("EventTarget")}} yöntemi olan addEventListener(), belli bir olay hedefteki elemana ulaştığında çağırılmak üzere bir fonksiyon ayarlar. {{domxref("Element")}}, {{domxref("Document")}}, ve {{domxref("Window")}} en yaygın hedefler olmakla beraber, olayları destekleyen diğer nesneler de olabilir (mesela {{domxref("XMLHttpRequest")}}).

- -

addEventListener() belirli bir olayın dinleyicileri listesine,  {{domxref("EventListener")}}'i uygulayabilecek bir fonksiyon ya da nesne ekleyerek çalışır. Olay gerçekleştiğinde bu fonksiyon ya da nese çağırılır.

- -

Syntax

- -
target.addEventListener(type, listener [, options]);
-target.addEventListener(type, listener [, useCapture]);
-target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Sadece Gecko/Mozilla
- -

Parametreler

- -
-
type
-
Dinlenecek olan olay tipini belirten, büyük küçük harfe duyarlı dizi
-
listener
-
The object that receives a notification (an object that implements the {{domxref("Event")}} interface) when an event of the specified type occurs. This must be an object implementing the {{domxref("EventListener")}} interface, or a JavaScript function. See {{anch("The event listener callback")}} for details on the callback itself.
-
options {{optional_inline}}
-
-

An options object specifies characteristics about the event listener. The available options are:

- -
-
capture
-
A {{jsxref("Boolean")}} indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
-
once
-
A {{jsxref("Boolean")}} indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.
-
passive
-
A {{jsxref("Boolean")}} that, if true, indicates that the function specified by listener will never call {{domxref("Event.preventDefault", "preventDefault()")}}. If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. See {{anch("Improving scrolling performance with passive listeners")}} to learn more.
-
{{non-standard_inline}} mozSystemGroup
-
A {{jsxref("Boolean")}} indicating that the listener should be added to the system group. Available only in code running in XBL or in the {{glossary("chrome")}} of the Firefox browser.
-
-
-
useCapture {{optional_inline}}
-
A {{jsxref("Boolean")}} indicating whether events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false.
-
-
Note: For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Events in the target phase will trigger all listeners on an element in the order they were registered, regardless of the useCapture parameter.
- -
Note: useCapture has not always been optional. Ideally, you should include it for the widest possible browser compatibility.
-
-
wantsUntrusted {{Non-standard_inline}}
-
A Firefox (Gecko)-specific parameter. If true, the listener receives synthetic events dispatched by web content (the default is false for browser {{glossary("chrome")}} and true for regular web pages). This parameter is useful for code found in add-ons, as well as the browser itself.
-
- -

Döndürülen değer

- -

undefined

- -

Kullanım Notları

- -

Olay dinleyicisi callback'i

- -

The event listener can be specified as either a callback function or an object that implements {{domxref("EventListener")}}, whose {{domxref("EventListener.handleEvent()", "handleEvent()")}} method serves as the callback function.

- -

The callback function itself has the same parameters and return value as the handleEvent() method; that is, the callback accepts a single parameter: an object based on {{domxref("Event")}} describing the event that has occurred, and it returns nothing.

- -

For example, an event handler callback that can be used to handle both {{event("fullscreenchange")}} and {{event("fullscreenerror")}} might look like this:

- -
function eventHandler(event) {
-  if (event.type == 'fullscreenchange') {
-    /* handle a full screen toggle */
-  } else /* fullscreenerror */ {
-    /* handle a full screen toggle error */
-  }
-}
- -

Güvenli bir şekilde option desteğini fark etmek

- -

In older versions of the DOM specification, the third parameter of addEventListener() was a Boolean value indicating whether or not to use capture. Over time, it became clear that more options were needed. Rather than adding more parameters to the function (complicating things enormously when dealing with optional values), the third parameter was changed to an object that can contain various properties defining the values of options to configure the process of removing the event listener.

- -

Because older browsers (as well as some not-too-old browsers) still assume the third parameter is a Boolean, you need to build your code to handle this scenario intelligently. You can do this by using feature detection for each of the options you're interested in.

- -

For example, if you want to check for the passive option:

- -
let passiveSupported = false;
-
-try {
-  const options = {
-    get passive() { // This function will be called when the browser
-                    //   attempts to access the passive property.
-      passiveSupported = true;
-      return false;
-    }
-  };
-
-  window.addEventListener("test", null, options);
-  window.removeEventListener("test", null, options);
-} catch(err) {
-  passiveSupported = false;
-}
-
- -

This creates an options object with a getter function for the passive property; the getter sets a flag, passiveSupported, to true if it gets called. That means that if the browser checks the value of the passive property on the options object, passiveSupported will be set to true; otherwise, it will remain false. We then call addEventListener() to set up a fake event handler, specifying those options, so that the options will be checked if the browser recognizes an object as the third parameter. Then, we call removeEventListener() to clean up after ourselves. (Note that handleEvent() is ignored on event listeners that aren't called.)

- -

You can check whether any option is supported this way. Just add a getter for that option using code similar to what is shown above.

- -

Then, when you want to create an actual event listener that uses the options in question, you can do something like this:

- -
someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
-                               ? { passive: true } : false);
- -

Here we're adding a listener for the {{event("mouseup")}} event on the element someElement. For the third parameter, if passiveSupported is true, we're specifying an options object with passive set to true; otherwise, we know that we need to pass a Boolean, and we pass false as the value of the useCapture parameter.

- -

If you'd prefer, you can use a third-party library like Modernizr or Detect It to do this test for you.

- -

You can learn more from the article about EventListenerOptions from the Web Incubator Community Group.

- -

Örnekler

- -

Basit bir dinleyici ekleme

- -

This example demonstrates how to use addEventListener() to watch for mouse clicks on an element.

- -

HTML

- -
<table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
-</table>
-
- -

JavaScript

- -
// t2'nin içeriğini değiştirme fonksiyonu
-function modifyText() {
-  const t2 = document.getElementById("t2");
-  if (t2.firstChild.nodeValue == "three") {
-    t2.firstChild.nodeValue = "two";
-  } else {
-    t2.firstChild.nodeValue = "three";
-  }
-}
-
-// Tabloya olay dinleyicisi ekleme
-const el = document.getElementById("outside");
-el.addEventListener("click", modifyText, false);
-
- -

In this code, modifyText() is a listener for click events registered using addEventListener(). A click anywhere in the table bubbles up to the handler and runs modifyText().

- -

Sonuç

- -

{{EmbedLiveSample('Add_a_simple_listener')}}

- -

Anonim fonksiyonlu olay dinleyicisi

- -

Here, we'll take a look at how to use an anonymous function to pass parameters into the event listener.

- -

HTML

- -
<table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
-</table>
- -

JavaScript

- -
// t2'nin içeriğini değiştirme fonksiyonu
-function modifyText(new_text) {
-  const t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = new_text;
-}
-
-// Tabloya olay dinleyicisi ekleme fonksiyonu
-const el = document.getElementById("outside");
-el.addEventListener("click", function(){modifyText("four")}, false);
-
- -

Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the modifyText() function, which is responsible for actually responding to the event.

- -

Sonuç

- -

{{EmbedLiveSample('Event_listener_with_anonymous_function')}}

- -

Oklu fonksiyon ile olay dinleyicisi

- -

This example demonstrates a simple event listener implemented using arrow function notation.

- -

HTML

- -
<table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
-</table>
-
- -

JavaScript

- -
// t2'nin içeriğini değiştirme fonksiyonu
-function modifyText(new_text) {
-  const t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = new_text;
-}
-
-// Oklu fonksiyon ile tabloya olay dinleyicisi ekleme
-const el = document.getElementById("outside");
-el.addEventListener("click", () => { modifyText("four"); }, false);
-
- -

Sonuç

- -

{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}

- -

Please note that while anonymous and arrow functions are similar, they have different this bindings. While anonymous (and all traditional JavaScript functions) create their own this bindings, arrow functions inherit the this binding of the containing function.

- -

That means that the variables and constants available to the containing function are also available to the event handler when using an arrow function.

- -

Options kullanma örnekleri

- -

HTML

- -
<div class="outer">
-  outer, once & none-once
-  <div class="middle" target="_blank">
-    middle, capture & none-capture
-    <a class="inner1" href="https://www.mozilla.org" target="_blank">
-      inner1, passive & preventDefault(which is not allowed)
-    </a>
-    <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
-      inner2, none-passive & preventDefault(not open new page)
-    </a>
-  </div>
-</div>
-
- -

CSS

- -
.outer, .middle, .inner1, .inner2 {
-  display: block;
-  width:   520px;
-  padding: 15px;
-  margin:  15px;
-  text-decoration: none;
-}
-.outer {
-  border: 1px solid red;
-  color:  red;
-}
-.middle {
-  border: 1px solid green;
-  color:  green;
-  width:  460px;
-}
-.inner1, .inner2 {
-  border: 1px solid purple;
-  color:  purple;
-  width:  400px;
-}
-
- -

JavaScript

- -
const outer  = document.querySelector('.outer');
-const middle = document.querySelector('.middle');
-const inner1 = document.querySelector('.inner1');
-const inner2 = document.querySelector('.inner2');
-
-const capture = {
-  capture : true
-};
-const noneCapture = {
-  capture : false
-};
-const once = {
-  once : true
-};
-const noneOnce = {
-  once : false
-};
-const passive = {
-  passive : true
-};
-const nonePassive = {
-  passive : false
-};
-
-outer.addEventListener('click', onceHandler, once);
-outer.addEventListener('click', noneOnceHandler, noneOnce);
-middle.addEventListener('click', captureHandler, capture);
-middle.addEventListener('click', noneCaptureHandler, noneCapture);
-inner1.addEventListener('click', passiveHandler, passive);
-inner2.addEventListener('click', nonePassiveHandler, nonePassive);
-
-function onceHandler(event) {
-  alert('outer, once');
-}
-function noneOnceHandler(event) {
-  alert('outer, none-once, default');
-}
-function captureHandler(event) {
-  //event.stopImmediatePropagation();
-  alert('middle, capture');
-}
-function noneCaptureHandler(event) {
-  alert('middle, none-capture, default');
-}
-function passiveHandler(event) {
-  // Unable to preventDefault inside passive event listener invocation.
-  event.preventDefault();
-  alert('inner1, passive, open new page');
-}
-function nonePassiveHandler(event) {
-  event.preventDefault();
-  //event.stopPropagation();
-  alert('inner2, none-passive, default, not open new page');
-}
-
- -

Sonuç

- -

Click the outer, middle, inner containers respectively to see how the options work.

- -

{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}

- -

Before using a particular value in the options object, it's a good idea to ensure that the user's browser supports it, since these are an addition that not all browsers have supported historically. See {{anch("Safely detecting option support")}} for details.

- -

Diğer notlar

- -

Neden addEventListener() kullanalım?

- -

addEventListener() is the way to register an event listener as specified in W3C DOM. The benefits are as follows:

- -
    -
  • It allows adding more than a single handler for an event. This is particularly useful for {{Glossary("AJAX")}} libraries, JavaScript modules, or any other kind of code that needs to work well with other libraries/extensions.
    • -
  • It gives you finer-grained control of the phase when the listener is activated (capturing vs. bubbling).
    • -
  • It works on any DOM element, not just HTML elements.
    • -
- -

The alternative, older way to register event listeners, is described below.

- -

Olay servisi anında dinleyici eklemek

- -

Eğer bir {{domxref("EventListener")}} {{domxref("EventTarget")}}'a olayı işlerken eklenirse, o dinleyici o olaydan dolay tetiklenmez. Ancak, yeni eklenen bu dinleyici, olayın servisinin ileriki bir sürecinde tetiklenebilir, mesela 'bubbling phase' (olay dinleyicisinin alt elemanlardan üst elemanlara doğru ilerlediği durum).

- -

Birden fazla aynı olay dinleyicisi

- -

If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and they do not need to be removed manually with the {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}} method.

- -

Note, however that when using an anonymous function as the handler, such listeners will NOT be identical, because anonymous functions are not identical even if defined using the SAME unchanging source-code simply called repeatedly, even if in a loop.

- -

However, repeatedly defining the same named function in such cases can be more problematic. (See Memory issues, below.)

- -

Olay giderici içinde this 'in değeri

- -

It is often desirable to reference the element on which the event handler was fired, such as when using a generic handler for a set of similar elements.

- -

If attaching a handler function to an element using addEventListener(), the value of {{jsxref("Operators/this","this")}}> inside the handler is a reference to the element. It is the same as the value of the currentTarget property of the event argument that is passed to the handler.

- -
my_element.addEventListener('click', function (e) {
-  console.log(this.className)           // logs the className of my_element
-  console.log(e.currentTarget === this) // logs `true`
-})
-
- -

As a reminder, arrow functions do not have their own this context.

- -
my_element.addEventListener('click', (e) => {
-  console.log(this.className)           // WARNING: `this` is not `my_element`
-  console.log(e.currentTarget === this) // logs `false`
-})
- -

If an event handler (for example, {{domxref("Element.onclick", "onclick")}}) is specified on an element in the HTML source, the JavaScript code in the attribute value is effectively wrapped in a handler function that binds the value of this in a manner consistent with the addEventListener(); an occurrence of this within the code represents a reference to the element.

- -
<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' -->
-  ...
-</table>
-
- -

Note that the value of this inside a function, called by the code in the attribute value, behaves as per standard rules. This is shown in the following example:

- -
<script>
-  function logID() { console.log(this.id); }
-</script>
-<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object -->
-  ...
-</table>
-
- -

The value of this within logID() is a reference to the global object {{domxref("Window")}} (or undefined in the case of {{jsxref("Reference/Strict_mode", "strict mode")}}.

- -

 this 'i bind() kullanarak belirtmek

- -

The {{jsxref("Function.prototype.bind()")}}> method lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can remove it later.

- -

This is an example with and without bind():

- -
const Something = function(element) {
-  // |this| is a newly created object
-  this.name = 'Something Good';
-  this.onclick1 = function(event) {
-    console.log(this.name); // undefined, as |this| is the element
-  };
-  this.onclick2 = function(event) {
-    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
-  };
-  element.addEventListener('click', this.onclick1, false);
-  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
-}
-const s = new Something(document.body);
-
- -

Another solution is using a special function called handleEvent() to catch any events:

- -
const Something = function(element) {
-  // |this| is a newly created object
-  this.name = 'Something Good';
-  this.handleEvent = function(event) {
-    console.log(this.name); // 'Something Good', as this is bound to newly created object
-    switch(event.type) {
-      case 'click':
-        // some code here...
-        break;
-      case 'dblclick':
-        // some code here...
-        break;
-    }
-  };
-
-  // Note that the listeners in this case are |this|, not this.handleEvent
-  element.addEventListener('click', this, false);
-  element.addEventListener('dblclick', this, false);
-
-  // You can properly remove the listeners
-  element.removeEventListener('click', this, false);
-  element.removeEventListener('dblclick', this, false);
-}
-const s = new Something(document.body);
-
- -

Another way of handling the reference to this is to pass to the EventListener a function that calls the method of the object that contains the fields that need to be accessed:

- -
class SomeClass {
-
-  constructor() {
-    this.name = 'Something Good';
-  }
-
-  register() {
-    const that = this;
-    window.addEventListener('keydown', function(e) { that.someMethod(e); });
-  }
-
-  someMethod(e) {
-    console.log(this.name);
-    switch(e.keyCode) {
-      case 5:
-        // some code here...
-        break;
-      case 6:
-        // some code here...
-        break;
-    }
-  }
-
-}
-
-const myObject = new SomeClass();
-myObject.register();
- -

Olay dinleyicisinde data giriş çıkışı

- -

It may seem that event listeners are like islands, and that it is extremely difficult to pass them any data, much less to get any data back from them after they execute. Event listeners only take one argument, the Event Object, which is automatically passed to the listener, and the return value is ignored. So how can we get data in and back out of them again? There are a number of good methods for doing this.

- -

Datayı this kullanarak dinleyiciye iletmek

- -

As mentioned above, you can use Function.prototype.bind() to pass a value to an event listener via the this reference variable.

- -
const myButton = document.getElementById('my-button-id');
-const someString = 'Data';
-
-myButton.addEventListener('click', function () {
-  console.log(this);  // Expected Value: 'Data'
-}.bind(someString));
-
- -

This method is suitable when you don't need to know which HTML element the event listener fired on programmatically from within the event listener. The primary benefit to doing this is that the event listener receives the data in much the same way that it would if you were to actually pass it through its argument list.

- -

Getting Data Into an Event Listener Using the Outer Scope Property

- -

When an outer scope contains a variable declaration (with const, let), all the inner functions declared in that scope have access to that variable (look here for information on outer/inner functions, and here for information on variable scope). Therefore, one of the simplest ways to access data from outside of an event listener is to make it accessible to the scope in which the event listener is declared.

- -
const myButton = document.getElementById('my-button-id');
-const someString = 'Data';
-
-myButton.addEventListener('click', function() {
-  console.log(someString);  // Expected Value: 'Data'
-
-  someString = 'Data Again';
-});
-
-console.log(someString);  // Expected Value: 'Data' (will never output 'Data Again')
-
- -
-

Note: Although inner scopes have access to const, let variables from outer scopes, you cannot expect any changes to these variables to be accessible after the event listener definition, within the same outer scope. Why? Simply because by the time the event listener would execute, the scope in which it was defined would have already finished executing.

-
- -

Getting Data Into and Out of an Event Listener Using Objects

- -

Unlike most functions in JavaScript, objects are retained in memory as long as a variable referencing them exists in memory. This, and the fact that objects can have properties, and that they can be passed around by reference, makes them likely candidates for sharing data among scopes. Let's explore this.

- -
-

Note: Functions in JavaScript are actually objects. (Hence they too can have properties, and will be retained in memory even after they finish executing if assigned to a variable that persists in memory.)

-
- -

Because object properties can be used to store data in memory as long as a variable referencing the object exists in memory, you can actually use them to get data into an event listener, and any changes to the data back out after an event handler executes. Consider this example.

- -
const myButton = document.getElementById('my-button-id');
-const someObject = {aProperty: 'Data'};
-
-myButton.addEventListener('click', function() {
-  console.log(someObject.aProperty);  // Expected Value: 'Data'
-
-  someObject.aProperty = 'Data Again';  // Change the value
-});
-
-window.setInterval(function() {
-  if (someObject.aProperty === 'Data Again') {
-    console.log('Data Again: True');
-    someObject.aProperty = 'Data';  // Reset value to wait for next event execution
-  }
-}, 5000);
-
- -

In this example, even though the scope in which both the event listener and the interval function are defined would have finished executing before the original value of someObject.aProperty would have changed, because someObject persists in memory (by reference) in both the event listener and interval function, both have access to the same data (i.e. when one changes the data, the other can respond to the change).

- -
-

Note: Objects are stored in variables by reference, meaning only the memory location of the actual data is stored in the variable. Among other things, this means variables that "store" objects can actually affect other variables that get assigned ("store") the same object reference. When two variables reference the same object (e.g., let a = b = {aProperty: 'Yeah'};), changing the data in either variable will affect the other.

-
- -
-

Note: Because objects are stored in variables by reference, you can return an object from a function to keep it alive (preserve it in memory so you don't lose the data) after that function stops executing.

-
- -

Internet Explorer'dan miras kalan attachEvent

- -

In Internet Explorer versions before IE 9, you have to use {{domxref("EventTarget.attachEvent", "attachEvent()")}}, rather than the standard addEventListener(). For IE, we modify the preceding example to:

- -
if (el.addEventListener) {
-  el.addEventListener('click', modifyText, false);
-} else if (el.attachEvent)  {
-  el.attachEvent('onclick', modifyText);
-}
-
- -

There is a drawback to attachEvent(): The value of this will be a reference to the window object, instead of the element on which it was fired.

- -

The attachEvent() method could be paired with the onresize event to detect when certain elements in a web page were resized. The proprietary mselementresize event, when paired with the addEventListener method of registering event handlers, provides similar functionality as onresize, firing when certain HTML elements are resized.

- -

Uyumluluk

- -

You can work around addEventListener(), removeEventListener(), {{domxref("Event.preventDefault()")}}, and {{domxref("Event.stopPropagation()")}} not being supported by Internet Explorer 8 by using the following code at the beginning of your script. The code supports the use of handleEvent() and also the {{event("DOMContentLoaded")}} event.

- -
-

Note: useCapture is not supported, as IE 8 does not have any alternative method. The following code only adds IE 8 support. This IE 8 polyfill only works in standards mode: a doctype declaration is required.

-
- -
(function() {
-  if (!Event.prototype.preventDefault) {
-    Event.prototype.preventDefault=function() {
-      this.returnValue=false;
-    };
-  }
-  if (!Event.prototype.stopPropagation) {
-    Event.prototype.stopPropagation=function() {
-      this.cancelBubble=true;
-    };
-  }
-  if (!Element.prototype.addEventListener) {
-    var eventListeners=[];
-
-    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
-      var self=this;
-      var wrapper=function(e) {
-        e.target=e.srcElement;
-        e.currentTarget=self;
-        if (typeof listener.handleEvent != 'undefined') {
-          listener.handleEvent(e);
-        } else {
-          listener.call(self,e);
-        }
-      };
-      if (type=="DOMContentLoaded") {
-        var wrapper2=function(e) {
-          if (document.readyState=="complete") {
-            wrapper(e);
-          }
-        };
-        document.attachEvent("onreadystatechange",wrapper2);
-        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
-
-        if (document.readyState=="complete") {
-          var e=new Event();
-          e.srcElement=window;
-          wrapper2(e);
-        }
-      } else {
-        this.attachEvent("on"+type,wrapper);
-        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
-      }
-    };
-    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
-      var counter=0;
-      while (counter<eventListeners.length) {
-        var eventListener=eventListeners[counter];
-        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
-          if (type=="DOMContentLoaded") {
-            this.detachEvent("onreadystatechange",eventListener.wrapper);
-          } else {
-            this.detachEvent("on"+type,eventListener.wrapper);
-          }
-          eventListeners.splice(counter, 1);
-          break;
-        }
-        ++counter;
-      }
-    };
-    Element.prototype.addEventListener=addEventListener;
-    Element.prototype.removeEventListener=removeEventListener;
-    if (HTMLDocument) {
-      HTMLDocument.prototype.addEventListener=addEventListener;
-      HTMLDocument.prototype.removeEventListener=removeEventListener;
-    }
-    if (Window) {
-      Window.prototype.addEventListener=addEventListener;
-      Window.prototype.removeEventListener=removeEventListener;
-    }
-  }
-})();
- -

Eski bir olay dinleyicisini ekleme yolu 

- -

addEventListener() was introduced with the DOM 2 Events specification. Before then, event listeners were registered as follows:

- -
// Passing a function reference — do not add '()' after it, which would call the function!
-el.onclick = modifyText;
-
-// Using a function expression
-element.onclick = function() {
-  // ... function logic ...
-};
-
- -

This method replaces the existing click event listener(s) on the element if there are any. Other events and associated event handlers such as blur (onblur) and keypress (onkeypress) behave similarly.

- -

Because it was essentially part of {{glossary("DOM", "DOM 0")}}, this technique for adding event listeners is very widely supported and requires no special cross-browser code. It is used to register event listeners dynamically when very old browsers (like IE <=8) must be supported; see the table below for details on browser support for addEventListener.

- -

Hafıza sorunları

- -
const els = document.getElementsByTagName('*');
-
-
-// Case 1
-for(let i=0 ; i < els.length; i++){
-  els[i].addEventListener("click", function(e){/*do something*/}, false);
-}
-
-
-// Case 2
-function processEvent(e){
-  /* do something */
-}
-
-for(let i=0 ; i < els.length; i++){
-  els[i].addEventListener("click", processEvent, false);
-}
-
- -

In the first case above, a new (anonymous) handler function is created with each iteration of the loop. In the second case, the same previously declared function is used as an event handler, which results in smaller memory consumption because there is only one handler function created. Moreover, in the first case, it is not possible to call {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} because no reference to the anonymous function is kept (or here, not kept to any of the multiple anonymous functions the loop might create.) In the second case, it's possible to do myElement.removeEventListener("click", processEvent, false) because processEvent is the function reference.

- -

Actually, regarding memory consumption, the lack of keeping a function reference is not the real issue; rather it is the lack of keeping a STATIC function reference. In both problem-cases below, a function reference is kept, but since it is redefined on each iteration, it is not static. In the third case, the reference to the anonymous function is being reassigned with each iteration. In the fourth case, the entire function definition is unchanging, but it is still being repeatedly defined as if new (unless it was [[promoted]] by the compiler) and so is not static. Therefore, though appearing to be simply [[Multiple identical event listeners]], in both cases each iteration will instead create a new listener with its own unique reference to the handler function. However, since the function definition itself does not change, the SAME function may still be called for every duplicate listener (especially if the code gets optimized.)

- -

Also in both cases, because the function reference was kept but repeatedly redefined with each add, the remove-statement from above can still remove a listener, but now only the last one added.

- -
// For illustration only: Note "MISTAKE" of [j] for [i] thus causing desired events to all attach to SAME element
-
-// Case 3
-for(let i=0, j=0 ; i<els.length ; i++){
-  /* do lots of stuff with j */
-  els[j].addEventListener("click", processEvent = function(e){/*do something*/}, false);
-}
-
-// Case 4
-for(let i=0, j=0 ; i<els.length ; i++){
-  /* do lots of stuff with j */
-  function processEvent(e){/*do something*/};
-  els[j].addEventListener("click", processEvent, false);
-}
- -

Sayfa kaydırma performansını pasif dinleyiciler ile iyileştirmek

- -

According to the specification, the default value for the passive option is always false. However, this introduces the potential for event listeners handling certain touch events (among others) to block the browser's main thread while it is attempting to handle scrolling, resulting in possibly enormous reduction in performance during scroll handling.

- -

To prevent this problem, some browsers (specifically, Chrome and Firefox) have changed the default value of the passive option to true for the {{event("touchstart")}} and {{event("touchmove")}} events on the document-level nodes {{domxref("Window")}}, {{domxref("Document")}}, and {{domxref("Document.body")}}. This prevents the event listener from being called, so it can't block page rendering while the user is scrolling.

- -
-

Note: See the compatibility table below if you need to know which browsers (and/or which versions of those browsers) implement this altered behavior.

-
- -

You can override this behavior by explicitly setting the value of passive to false, as shown here:

- -
/* Feature detection */
-let passiveIfSupported = false;
-
-try {
-  window.addEventListener("test", null,
-    Object.defineProperty(
-      {},
-      "passive",
-      {
-        get: function() { passiveIfSupported = { passive: false }; }
-      }
-    )
-  );
-} catch(err) {}
-
-window.addEventListener('scroll', function(event) {
-  /* do something */
-  // can't use event.preventDefault();
-}, passiveIfSupported );
-
- -

On older browsers that don't support the options parameter to addEventListener(), attempting to use it prevents the use of the useCapture argument without proper use of feature detection.

- -

You don't need to worry about the value of passive for the basic {{event("scroll")}} event. Since it can't be canceled, event listeners can't block page rendering anyway.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Initial definition
- -

Tarayıcı Uyumluluğu

- - - -

{{Compat("api.EventTarget.addEventListener", 3)}}

- -

Ek olarak

- - diff --git a/files/tr/web/api/eventtarget/index.html b/files/tr/web/api/eventtarget/index.html deleted file mode 100644 index a5872453c9..0000000000 --- a/files/tr/web/api/eventtarget/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: EventTarget -slug: Web/API/EventTarget -tags: - - API - - DOM - - DOM Events - - Interface - - NeedsTranslation - - TopicStub -translation_of: Web/API/EventTarget ---- -

{{ApiRef("DOM Events")}}

- -

EventTarget is an interface implemented by objects that can receive events and may have listeners for them.

- -

{{domxref("Element")}}, {{domxref("document")}}, and {{domxref("window")}} are the most common event targets, but other objects can be event targets too, for example {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, and others.

- -

Many event targets (including elements, documents, and windows) also support setting event handlers via on... properties and attributes.

- -

Methods

- -
-
{{domxref("EventTarget.addEventListener()")}}
-
Register an event handler of a specific event type on the EventTarget.
-
{{domxref("EventTarget.removeEventListener()")}}
-
Removes an event listener from the EventTarget.
-
{{domxref("EventTarget.dispatchEvent()")}}
-
Dispatch an event to this EventTarget.
-
- -

Additional methods for Mozilla chrome code

- -

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

- -
    -
  • void setEventHandler(DOMString type, EventHandler handler) {{non-standard_inline}}
    • -
  • EventHandler getEventHandler(DOMString type) {{non-standard_inline}}
    • -
- -

Example:

- -

Simple implementation of EventTarget

- -
var EventTarget = function() {
-  this.listeners = {};
-};
-
-EventTarget.prototype.listeners = null;
-EventTarget.prototype.addEventListener = function(type, callback) {
-  if(!(type in this.listeners)) {
-    this.listeners[type] = [];
-  }
-  this.listeners[type].push(callback);
-};
-
-EventTarget.prototype.removeEventListener = function(type, callback) {
-  if(!(type in this.listeners)) {
-    return;
-  }
-  var stack = this.listeners[type];
-  for(var i = 0, l = stack.length; i < l; i++) {
-    if(stack[i] === callback){
-      stack.splice(i, 1);
-      return this.removeEventListener(type, callback);
-    }
-  }
-};
-
-EventTarget.prototype.dispatchEvent = function(event) {
-  if(!(event.type in this.listeners)) {
-    return;
-  }
-  var stack = this.listeners[event.type];
-  event.target = this;
-  for(var i = 0, l = stack.length; i < l; i++) {
-      stack[i].call(this, event);
-  }
-};
-
- -{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }} - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}{{Spec2('DOM3 Events')}}A few parameters are now optional (listener), or accepts the null value (useCapture).
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}{{Spec2('DOM2 Events')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}9.071.0[1]
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}9.06.01.0
-
- -

[1] window.EventTarget does not exist.

- -

See Also

- - diff --git a/files/tr/web/api/eventtarget/removeeventlistener/index.html b/files/tr/web/api/eventtarget/removeeventlistener/index.html deleted file mode 100644 index 36617f7d0c..0000000000 --- a/files/tr/web/api/eventtarget/removeeventlistener/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: EventTarget.removeEventListener() -slug: Web/API/EventTarget/removeEventListener -translation_of: Web/API/EventTarget/removeEventListener ---- -

{{APIRef("DOM Events")}}

- -

The EventTarget.removeEventListener() methodu daha önce  {{domxref("EventTarget.addEventListener()")}} ile kaydedilmiş olan {{domxref("EventListener")}}'i kaldırır.

- -

Yazım

- -
target.removeEventListener(type, listener[, options]);
-target.removeEventListener(type, listener[, useCapture]);
-
- -

Parametreler

- -
-
type
-
Kaldırılacak olan eventListener'in türünü belirten String.
-
listener
-
Kaldırılacak olan {{domxref("EventListener")}} fonksiyonu.
-
options {{optional_inline}}
-
{{domxref("EventListener")}} objesinin karakteristliğini belirten seçenek. Kullanılabilecek seçenekler: -
    -
  • capture: {{jsxref("Boolean")}}.Bu, benzer türdeki olayların DOM ağacında altında kalan herhangi bir EventTarget'tan önce kayıtlı dinleyiciye iletileceği anlamına gelir. 
    • -
  • passive: {{jsxref("Boolean")}}. Dinleyicinin asla preventDefault( ) fonksiyonunu çağıramayacağını belirten {{jsxref("Boolean")}}. Dinleyici çağırsa bile "user-agent" bunu dikkate almayacaktır ve bu konuda bşr konsol uyarısında bulunacaktır.
    • -
  • {{non-standard_inline}} mozSystemGroup: Sadece XBL ya da Firefox' chrome da çalışan kodta geçerlidir.Belirtilen olay dinleyicisinin sistem gurubuna atanıp atanmadığını gösteren {{jsxref("Boolean")}} dır.
    • -
-
-
useCapture {{optional_inline}}
-
Kaldırılacak olan {{domxref("EventListener")}}'in capturing EventListener olup olmadığını belirtir. Eğer bu alan kullanılmazsa varsayılan deferi "false" olarak kabul edilir.
-
Eğer bir olay dinleyici bir defa yakalayıcı bir defa yakalayıcı olmayacak şekilde iki defa kayıt edilmişse her birini ayrı ayrı kaldırın. Kaydedici olan olay dinleyicinin kaldırılması diğer olay dinleyici etkilemez.
-
- -
Note: useCapture çoğu eski tarayıcılarda gerekli bir alandır. Eğer geniş uyumluluğu hedefliyorsanız bu parametreyi sağlamanız önerilir.
- -

Return Value

- -

Void.

- -

Notlar

- -

Eğer bir {{domxref("EventListener")}} , {{domxref("EventTarget")}}'tan bir olayı işlerken kaldırılmışsa en son yapılan aksiyonlardan bir daha çağrılamaz. Ama tekrar atanabilir.

- -

removeEventListener() fonksiyonunun argümanlarla çağırılması EventTarget üzerinde herhangi bir {{domxref("EventListener")}}'in olup olmadığını kontrol etmede kullanılamaz.

- -

Örnek

- -

Bu örnekte nasıl fareye basma tabanlı olay dinleyicisi eklemeyi ve üzerine fareyle üzerine gelme tabanlı olay dinleyicisinin kaldırmanın nasıl yapılacağını göstermektedir.

- -
var body =
-        document.querySelector('body'),
-    clickTarget =
-        document.getElementById('click-target'),
-    mouseOverTarget =
-        document.getElementById('mouse-over-target'),
-    toggle = false;
-
-function makeBackgroundYellow() {
-    'use strict';
-
-    if (toggle) {
-        body.style.backgroundColor = 'white';
-    } else {
-        body.style.backgroundColor = 'yellow';
-    }
-
-    toggle = !toggle;
-}
-
-clickTarget.addEventListener('click',
-    makeBackgroundYellow,
-    false
-);
-
-mouseOverTarget.addEventListener('mouseover', function () {
-    'use strict';
-
-    clickTarget.removeEventListener('click',
-        makeBackgroundYellow,
-        false
-    );
-});
-
- -

Özellikler

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}{{Spec2("DOM2 Events")}}Initial definition
- -

Tarayıcı Desteği

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0[1][2]{{CompatGeckoDesktop("1")}}[3]9.07[4]1.0[1]
useCapture made optional{{CompatVersionUnknown}}6.09.011.60{{CompatVersionUnknown}}
options parameter{{CompatChrome(49.0)}}    
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support1.0[1]{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("1")}}[3]9.06.0[4]1.0[1]{{CompatVersionUnknown}}[2]
useCapture made optional{{CompatUnknown}}{{CompatVersionUnknown}}    {{CompatVersionUnknown}}
options parameter{{CompatNo}}{{CompatChrome(49.0)}}    {{CompatChrome(49.0)}}
-
- -

[1] Although WebKit explicitly added "[optional]" to the useCapture parameter for Safari 5.1 and Chrome 13, it had been working before the change.

- -

[2] Before Chrome 49, the type and listener parameters were optional.

- -

[2] Prior to Firefox 6, the browser would throw an exception if the useCapture parameter was not explicitly false. Prior to Gecko 9.0 {{geckoRelease("9.0")}}, addEventListener() would throw an exception if the listener parameter was null; now the method returns without error, but without doing anything.

- -

[4] Opera 11.60 made the useCapture parameter optional (source).

- -

[5] For backwards compatibility, browsers that support options allow the third parameter to be either options or Boolean.

- -

Eski Tarayıcılara Polyfill Desteği

- -

addEventListener() ve removeEventListener() eski tarayıcılarda bulunmaz. Onun yerine aşağıdaki kodu scriptlerinizin başına ekleyerek bu fonksiyonların kullanımını sağlayabilirsiniz. Ne yazık ki bu methot Internet Explorer 7 ya da öncesinde Element.prototype'ı extend etme desteğinin Explorer 8 gelene kadar sağlanmadığı için çalışmaz.

- -
if (!Element.prototype.addEventListener) {
-  var oListeners = {};
-  function runListeners(oEvent) {
-    if (!oEvent) { oEvent = window.event; }
-    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
-      if (oEvtListeners.aEls[iElId] === this) {
-        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
-        break;
-      }
-    }
-  }
-  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
-    if (oListeners.hasOwnProperty(sEventType)) {
-      var oEvtListeners = oListeners[sEventType];
-      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
-        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
-      }
-      if (nElIdx === -1) {
-        oEvtListeners.aEls.push(this);
-        oEvtListeners.aEvts.push([fListener]);
-        this["on" + sEventType] = runListeners;
-      } else {
-        var aElListeners = oEvtListeners.aEvts[nElIdx];
-        if (this["on" + sEventType] !== runListeners) {
-          aElListeners.splice(0);
-          this["on" + sEventType] = runListeners;
-        }
-        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
-          if (aElListeners[iLstId] === fListener) { return; }
-        }
-        aElListeners.push(fListener);
-      }
-    } else {
-      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
-      this["on" + sEventType] = runListeners;
-    }
-  };
-  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
-    if (!oListeners.hasOwnProperty(sEventType)) { return; }
-    var oEvtListeners = oListeners[sEventType];
-    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
-      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
-    }
-    if (nElIdx === -1) { return; }
-    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
-      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
-    }
-  };
-}
-
- -

Ayrıca Bakın

- -
    -
  • {{domxref("EventTarget.addEventListener()")}}.
    • -
  • {{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.
    • -
diff --git a/files/tr/web/api/filereader/index.html b/files/tr/web/api/filereader/index.html deleted file mode 100644 index 6a9742f8d1..0000000000 --- a/files/tr/web/api/filereader/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: FileReader -slug: Web/API/FileReader -tags: - - API - - DOM - - File API - - Files - - NeedsTranslation - - Reference - - TopicStub - - WebAPI -translation_of: Web/API/FileReader ---- -
{{APIRef("File API")}}
- -

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using {{domxref("File")}} or {{domxref("Blob")}} objects to specify the file or data to read.

- -

File objects may be obtained from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an {{domxref("HTMLCanvasElement")}}.

- -

Constructor

- -
FileReader FileReader();
- -

See Using files from web applications for details and examples.

- -

Properties

- -
-
{{domxref("FileReader.error")}} {{readonlyinline}}
-
A {{domxref("DOMError")}} representing the error that occurred while reading the file.
-
{{domxref("FileReader.readyState")}} {{readonlyinline}}
-
A number indicating the state of the FileReader. This will be one of the {{anch("State constants")}}.
-
{{domxref("FileReader.result")}} {{readonlyinline}}
-
The file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.
-
- -

Event handlers

- -
-
{{domxref("FileReader.onabort")}}
-
A handler for the {{event("abort")}} event. This event is triggered each time the reading operation is aborted.
-
{{domxref("FileReader.onerror")}}
-
A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.
-
{{domxref("FileReader.onload")}}
-
A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.
-
{{domxref("FileReader.onloadstart")}}
-
A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.
-
{{domxref("FileReader.onloadend")}}
-
A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).
-
{{domxref("FileReader.onprogress")}}
-
A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.
-
- -
-

Note: As FileReader inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.

-
- -

State constants

- -
    -
  • EMPTY : 0 : No data has been loaded yet.
    • -
  • LOADING : 1 : Data is currently being loaded.
    • -
  • DONE : 2 : The entire read request has been completed.
    • -
- -

Methods

- -
-
{{domxref("FileReader.abort()")}}
-
Aborts the read operation. Upon return, the readyState will be DONE.
-
{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}
-
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.
-
{{domxref("FileReader.readAsBinaryString()")}}
-
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains the raw binary data from the file as a string.
-
{{domxref("FileReader.readAsDataURL()")}}
-
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains a data: URL representing the file's data.
-
{{domxref("FileReader.readAsText()")}}
-
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains the contents of the file as a text string.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.2")}}[1]710[2]12.02[3]6.0.2
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support3231011.56.1
-
- -

[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the FileReader.error property returned a {{domxref("FileError")}} object. This interface has been removed and FileReader.error is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.

- -

[2] IE9 has a File API Lab.

- -

[3] Opera has partial support in 11.1.

- -

See also

- - diff --git a/files/tr/web/api/filesystem/index.html b/files/tr/web/api/filesystem/index.html deleted file mode 100644 index d7a9d4fe9a..0000000000 --- a/files/tr/web/api/filesystem/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: FileSystem -slug: Web/API/FileSystem -translation_of: Web/API/FileSystem ---- -

{{APIRef("File System API")}} {{non-standard_header}}

- -

Dosya ve Dizin API arabirimi FileSystem bir dosya sistemini temsil etmek için kullanılır. Bu nesneler herhangi bir dosya sistemi girişinde yer alan  {{domxref("FileSystemEntry.filesystem", "filesystem")}} özelliğinden edinilebilir. Bazı tarayıcılar dosya sistemlerini oluşturma ve yönetmek için ek API'lar sunarlar, Chrome'un {{domxref("LocalFileSystem.requestFileSystem", "requestFileSystem()")}} metodu gibi.

- -
-

Bu standart olmayan bir API, çünkü özellikleri henüz gelecek standartlar içerisinde yer almıyor, tüm tarayıcıların bunu desteklemediğini ve bu API'nin sadece bir bölümünün kullanılabilir olacağını unutmamak gerekir. Detaylar için {{anch("Browser compatibility")}} bölümüne bakınız.

-
- -

Temel Kavramlar

- -

Bir FileSystem nesnesine erişmenin iki yolu vardır:

- -
    -
  1. Web uygulamanız için oluşturulan korumalı bir dosya sistemini temsil eden dosyayı doğrudan window.requestFileSystem() öğesini çağırarak isteyebilirsiniz..  Eğer bu çağrı başarılı olursa, callback handler çalıştırılır. Bu da dosya sistemi tanımlayıcısı olan FileSystem nesnesini parametre olarak alır.
    2. -
  2. Bir dosya sistemi giriş nesnesinden, {{domxref("FileSystemEntry.filesystem", "filesystem")}} özelliği sayesinde erişim sağlayabilirsiniz.
    3. -
- -

Özellikler

- -
-
{{domxref("FileSystem.name")}} {{ReadOnlyInline}}
-
Dosya sisteminin adını temsil eden bir {{domxref("USVString")}}. Bu isim tüm açık dosya sistemlerinde benzersizdir.
-
{{domxref("FileSystem.root")}} {{ReadOnlyInline}}
-
Dosya sisteminin kök dizinini temsil eden bir {{domxref("FileSystemDirectoryEntry")}} nesnesi. Bu nesneyi kullanarak dosya sisteminde yer alan tüm nesne ve dizinlere erişebilirsiniz.
-
- -

Tanımlama

- - - - - - - - - - - - - - - - -
TanımDurumAçıklama
{{SpecName('File System API')}}{{Spec2('File System API')}}Draft of proposed API
- -

Bu API W3C ya da WHATWG üzerinde resmi bir tanımlamaya sahip değil.

- -

Tarayıcı Uyumluluğu

- -

{{ CompatibilityTable }}

- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Basic support13{{ property_prefix("webkit") }}{{ CompatGeckoDesktop(50) }}{{ CompatNo }}{{CompatVersionUnknown}}[1]{{ CompatNo }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidAndroid için ChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo }}0.16{{ property_prefix("webkit") }}{{ CompatGeckoMobile(50) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -

[1] Microsoft Edge bu arabirimi sadece WebKitFileSystem adı altında kullanır ve yalnızca sürükle-bırak senaryolarında {{domxref("DataTransferItem.webkitGetAsEntry()")}} metodunu kullanır. Dosya ve klasör seçici panellerde kullanılabilir değildir (tıpkı {{HTMLElement("input")}} elementini {{domxref("HTMLInputElement.webkitdirectory")}} özelliğiyle kullandığınız zaman gibi).

- -

Ayrıca bkz.

- - diff --git a/files/tr/web/api/htmlelement/click/index.html b/files/tr/web/api/htmlelement/click/index.html deleted file mode 100644 index 5c8b295944..0000000000 --- a/files/tr/web/api/htmlelement/click/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: HTMLElement.click() -slug: Web/API/HTMLElement/click -translation_of: Web/API/HTMLElement/click ---- -
-
{{ APIRef("HTML DOM") }}
-
- -

 

- -

HTMLElement.click() metodu element üzerinde tıklama olayını simule eder.

- -

click() geçerli elamanlar üzerinde kullanıldığında ({{HTMLElement("input")}} gibi), o elementin tıklama olayını (click event) tetikler. Bu olay döküman ağacındaki (veya olay zinciri) daha yüksek elemanlara ulaşır ve onların tıklama olaylarını tetikler.

- -

 

- -

Syntax

- -
element.click()
- -

Specification

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}{{Spec2('DOM2 HTML')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.HTMLElement.click")}}

diff --git a/files/tr/web/api/htmlelement/index.html b/files/tr/web/api/htmlelement/index.html deleted file mode 100644 index 9239cd8f6f..0000000000 --- a/files/tr/web/api/htmlelement/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: HTMLElement -slug: Web/API/HTMLElement -tags: - - API - - HTML DOM - - Interface - - NeedsNewLayout - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLElement ---- -
{{ APIRef("HTML DOM") }}
- -

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

- -

{{InheritanceDiagram}}

- -

Properties

- -

Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.

- -
-
{{domxref("HTMLElement.accessKey")}}
-
Is a {{domxref("DOMString")}} representing the access key assigned to the element.
-
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
-
Returns a {{domxref("DOMString")}} containing the element's assigned access key.
-
{{domxref("HTMLElement.contentEditable")}}
-
Is a {{domxref("DOMString")}}, where a value of "true" means the element is editable and a value of "false" means it isn't.
-
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
-
Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.
-
{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}
-
Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null.
-
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
-
Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's custom data attributes (data-*) .
-
{{domxref("HTMLElement.dir")}}
-
Is a {{domxref("DOMString")}}, reflecting the dir global attribute, representing the directionality of the element. Possible values are "ltr", "rtl", and "auto".
-
{{domxref("HTMLElement.draggable")}}
-
Is a {{jsxref("Boolean")}} indicating if the element can be dragged.
-
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
-
Returns a {{domxref("DOMSettableTokenList")}} reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
-
{{domxref("HTMLElement.hidden")}}
-
Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.
-
{{domxref("HTMLElement.inert")}}
-
Is a {{jsxref("Boolean")}} indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and text selection.
-
{{domxref("HTMLElement.innerText")}}
-
Represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
-
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
-
Is a {{jsxref("Boolean")}} representing the item scope.
-
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMSettableTokenList")}}…
-
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} representing the item ID.
-
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMSettableTokenList")}}…
-
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMSettableTokenList")}}…
-
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
-
Returns a {{jsxref("Object")}} representing the item value.
-
{{domxref("HTMLElement.lang")}}
-
Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.
-
{{domxref("HTMLElement.noModule")}}
-
Is a {{jsxref("Boolean")}} indicating wether an import script can be executed in user agents that support module scripts.
-
{{domxref("HTMLElement.nonce")}}
-
Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.
-
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a double containing the height of an element, relative to the layout.
-
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a double, the distance from this element's left border to its offsetParent's left border.
-
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
-
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a double, the distance from this element's top border to its offsetParent's top border.
-
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a double containing the width of an element, relative to the layout.
-
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("HTMLPropertiesCollection")}}…
-
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
-
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it doesn't have an effect on all of them.
-
{{domxref("HTMLElement.style")}}
-
Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
-
{{domxref("HTMLElement.tabIndex")}}
-
Is a long representing the position of the element in the tabbing order.
-
{{domxref("HTMLElement.title")}}
-
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
-
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
-
Is a {{jsxref("Boolean")}} representing the translation.
-
- -

Event handlers

- -

Most event handler properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by HTMLElement. In addition, the following handlers are specific to HTMLElement.

- -
-
{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}
-
Returns the event handling code for the copy event ({{bug("280959")}}).
-
{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}
-
Returns the event handling code for the cut event ({{bug("280959")}}).
-
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
-
Returns the event handling code for the paste event ({{bug("280959")}}).
-
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchstart")}} event.
-
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchend")}} event.
-
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchmove")}} event.
-
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchenter")}} event.
-
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchleave")}} event.
-
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchcancel")}} event.
-
- -

Methods

- -

Inherits methods from its parent, {{domxref("Element")}}.

- -
-
{{domxref("HTMLElement.blur()")}}
-
Removes keyboard focus from the currently focused element.
-
{{domxref("HTMLElement.click()")}}
-
Sends a mouse click event to the element.
-
{{domxref("HTMLElement.focus()")}}
-
Makes the element the current keyboard focus.
-
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
-
Runs the spell checker on the element's contents.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
- Added the following method: forceSpellcheck().
- Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
- Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.HTMLElement")}}

- -

See also

- -
    -
  • {{domxref("Element")}}
    • -
diff --git a/files/tr/web/api/htmlimageelement/image/index.html b/files/tr/web/api/htmlimageelement/image/index.html deleted file mode 100644 index 9bbad76f33..0000000000 --- a/files/tr/web/api/htmlimageelement/image/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Image() -slug: Web/API/HTMLImageElement/Image -tags: - - API - - Constructor - - DOM - - HTML DOM - - HTMLImageElement - - HTMLImageElement Kullanımı - - Reference -translation_of: Web/API/HTMLImageElement/Image ---- -
{{ APIRef("HTML DOM") }}
- -

Image() constructor'ı yeni bir {{domxref("HTMLImageElement")}} örneği oluşturur.

- -

İşlevsellik olarak {{domxref("Document.createElement()", "document.createElement('img')")}} ile aynıdır.

- -

Sözdizim

- -
Image(genişlik, yükseklik)
- -

Parametreler

- -
-
genişlik
-
Resmin genişliği (yani {{htmlattrxref("width", "img")}} özelliğinin değeri).
-
yükseklik
-
Resmin yüksekliği (yani {{htmlattrxref("height", "img")}} özelliğinin değeri).
-
- -

Örnekler

- -
var myImage = new Image(100, 200);
-myImage.src = 'picture.jpg';
-document.body.appendChild(myImage);
- -
Yukarıdaki örnek {{htmlelement("body")}} etiketi içerisine aşağıdaki HTML elementini tanımlamakla aynı olacaktır.
- -
<img width="100" height="200" src="picture.jpg">
-
- -
-

Not: Constructor'da belirtilen değerlere bakılmaksızın tüm bitmap yüklenir. Eğer constructor'da herhangi bir genişlik ya da yükseklik değeri tanımlanmamışsa {{domxref("HTMLImageElement.width")}} ve {{domxref("HTMLImageElement.height")}} değerleri üzerinden varsayılan atamalar yapılacaktır. CSS piksellerindeki resmin orjinal yüksekliği ve genişliği {{domxref("HTMLImageElement.naturalWidth")}} ve {{domxref("HTMLImageElement.naturalHeight")}} özellikleri ile yansıtılır. Eğer constructor'da herhangi bir değer tanımlı değilse bu özelliklerin her ikisinin de çiftleri aynı değerlere sahip olacaktır.

-
- -

Tanımlamalar

- - - - - - - - - - - - - - -
TanımlamaDurumYorum
{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}{{spec2("HTML WHATWG")}} 
- -

Tarayıcı Uyumluluğu

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
ÖzellikChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Temel destek{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
ÖzelikAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Temel destek{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}
-
- -

 

diff --git a/files/tr/web/api/htmlimageelement/index.html b/files/tr/web/api/htmlimageelement/index.html deleted file mode 100644 index 65a25d2e38..0000000000 --- a/files/tr/web/api/htmlimageelement/index.html +++ /dev/null @@ -1,417 +0,0 @@ ---- -title: HTMLImageElement -slug: Web/API/HTMLImageElement -tags: - - API - - HTML DOM - - HTMLImageElement - - Interface - - NeedsTranslation - - Reference - - TopicStub - - img -translation_of: Web/API/HTMLImageElement ---- -
{{APIRef("HTML DOM")}}
- -

The HTMLImageElement interface provides special properties and methods  for manipulating the layout and presentation of {{HTMLElement("img")}} elements.

- -

{{InheritanceDiagram(600,120)}}

- -

Properties

- -

Inherits properties from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context. The possible values are "left", "right", "justify", and "center".
-
{{domxref("HTMLImageElement.alt")}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute,  thus indicating fallback context for the image.
-
{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS {{cssxref("border")}} property should be used instead.
-
{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}
-
Returns a {{domxref("Boolean")}} that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no {{domxref("HTMLImageElement.src", "src")}} value.
-
{{domxref("HTMLImageElement.crossOrigin")}}
-
Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See CORS settings attributes for further details.
-
{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).
-
{{domxref("HTMLImageElement.height")}}
-
Is a unsigned long that reflects the {{htmlattrxref("height", "img")}} HTML attribute, indicating the rendered height of the image in CSS pixels.
-
{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}
-
Is a long representing the space on either side of the image.
-
{{domxref("HTMLImageElement.isMap")}}
-
Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.
-
{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} representing the URI of a long description of the image.
-
{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.
-
{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} representing the name of the element.
-
{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}
-
Returns a unsigned long representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0.
-
{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}
-
Returns a unsigned long representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0.
-
{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.
-
{{domxref("HTMLImageElement.src")}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.
-
{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.
-
{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (',', U+002C COMMA). A candidate image is a URL followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.
-
{{domxref("HTMLImageElement.useMap")}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.
-
{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}
-
Is a long representing the space above and below the image.
-
{{domxref("HTMLImageElement.width")}}
-
Is a unsigned long that reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.
-
{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a long representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.
-
{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}
-
Returns a long representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.
-
- -

Methods

- -

Inherits properties from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLImageElement.Image()", "Image()")}}
-
The Image() constructor, taking two optional unsigned long, which are the width and the height of the resource, creates an instance of HTMLImageElement , not inserted in a DOM tree.
-
- -

Errors

- -

If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:

- -
    -
  • The {{htmlattrxref("src", "img")}} attribute is empty or null.
    • -
  • The specified src URL is the same as the URL of the page the user is currently on.
    • -
  • The specified image is corrupted in some way that prevents it from being loaded.
    • -
  • The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes.
    • -
  • The specified image is in a format not supported by the {{Glossary("user agent")}}.
    • -
- -

Example

- -
var img1 = new Image(); // HTML5 Constructor
-img1.src = 'image1.png';
-img1.alt = 'alt';
-document.body.appendChild(img1);
-
-var img2 = document.createElement('img'); // use DOM HTMLImageElement
-img2.src = 'image2.jpg';
-img2.alt = 'alt text';
-document.body.appendChild(img2);
-
-// using first image in the document
-alert(document.images[0].src);
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrerPolicy property.
{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}{{Spec2('CSSOM View')}}Added the x and y properties.
{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML WHATWG')}}The following properties have been added: srcset, currentSrc and sizes.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML5 W3C')}}A constructor (with 2 optional parameters) has been added.
- The following properties are now obsolete: name, border, align, hspace, vspace, and longdesc.
- The following properties are now unsigned long, instead of long: height, and width.
- The following properties have been added: crossorigin, naturalWidth, naturalHeight, and complete.
{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM2 HTML')}}The lowSrc property has been removed.
- The following properties are now long, instead of DOMString: height, width, hspace, and vspace.
{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM1')}}Initial definition.
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
naturalWidth, naturalHeight{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
complete{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatChrome(34)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}21{{CompatSafari(7.1)}}
currentSrc {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(33)}}[3]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatNo}}{{CompatGeckoDesktop(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onerror event handler{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop(51)}}[5]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
naturalWidth, naturalHeight{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}9{{CompatUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
complete{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatChrome(34)}}{{CompatChrome(34)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}iOS 8
currentSrc {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(33)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatChrome(51)}}{{CompatNo}}{{CompatGeckoMobile(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onerror event handler{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(51)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Though, these x and y properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but later, they were restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.

- -

[2] This feature is behind the dom.image.srcset.enabled preference, defaulting to false.

- -

[3] This feature is behind the dom.image.picture.enabled preference, defaulting to false.

- -

[4] IE reports false for broken images.

- -

[5] May also be supported in earlier versions.

- -

See also

- -
    -
  • The HTML element implementing this interface: {{HTMLElement("img")}}
    • -
diff --git a/files/tr/web/api/idbindex/getall/index.html b/files/tr/web/api/idbindex/getall/index.html deleted file mode 100644 index dfbd31c48d..0000000000 --- a/files/tr/web/api/idbindex/getall/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: IDBIndex.getAll() -slug: Web/API/IDBIndex/getAll -translation_of: Web/API/IDBIndex/getAll ---- -

{{ APIRef("IndexedDB") }}

- -
-

getAll() metodu {{domxref("IDBIndex")}} Arabirimi, dizinin içindeki tüm nesneleri alır.

-
- -

Nesne tembel olarak oluşturulduğundan, bir imlecin value özelliğine bakmakla ilişkili bir performans maliyeti söz konusudur. GetAll () gibi bir özellik kullanmak için, tarayıcının tüm nesneleri aynı anda oluşturması gerekir. Örneğin sadece anahtarların her birine bakmak istiyorsanız, bir imleci kullanmak daha etkilidir. Ancak, bir nesne deposundaki tüm nesnelerin bir dizisini almaya çalışıyorsanız, getAll () kullanmalısınız.

- -

Syntax

- -
var getAllKeysRequest = IDBIndex.getAll();
-var getAllKeysRequest = IDBIndex.getAll(query);
-var getAllKeysRequest = IDBIndex.getAll(query, count);
- -

Parametreler

- -
-
query {{optional_inline}}
-
A key or an {{domxref("IDBKeyRange")}} identifying the records to retrieve. If this value is null or missing, the browser will use an unbound key range.
-
count {{optional_inline}}
-
The number records to return. If this value exceeds the number of records in the query, the browser will only retrieve the first item. If it is lower than 0 or greater than 232-1 a {{jsxref("TypeError")}} exception will be thrown.
-
- -

Return value

- -

An {{domxref("IDBRequest")}} object on which subsequent events related to this operation are fired.

- -

Exceptions

- -

This method may raise a {{domxref("DOMException")}} of the following types:

- - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorThis {{domxref("IDBIndex")}}'s transaction is inactive.
InvalidStateErrorThe {{domxref("IDBIndex")}} has been deleted or removed.
- -

A {{jsxref("TypeError")}} exception is thrown if the count parameter is not between 0 and 232-1 included.

- -

Example

- -
var myIndex = objectStore.index('index');
-var getAllKeysRequest = myIndex.getAllKeys();
-getAllKeysRequest.onsuccess = function() {
-  console.log(getAllKeysRequest.result);
-}
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('IndexedDB 2', '#dom-idbindex-getall', 'getAll()')}}{{Spec2('IndexedDB 2')}}Initial definition.
- -

Browser compatibility

- -

{{ CompatibilityTable }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(48) }}{{ CompatGeckoDesktop("44.0") }} [1]{{ CompatNo }}{{CompatOpera(35)}}{{ CompatNo}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatChrome(48) }}{{ CompatChrome(48) }}{{ CompatGeckoDesktop("44.0") }} [1]{{ CompatNo}}{{CompatOperaMobile(35)}}{{ CompatNo}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(45)}}{{CompatUnknown}}
-
- -

 [1] This feature was available since Firefox 24, but behind the dom.indexedDB.experimental  pref, off by default

- -

See also

- -
    -
  • Using IndexedDB
    • -
  • Starting transactions: {{domxref("IDBDatabase")}}
    • -
  • Using transactions: {{domxref("IDBTransaction")}}
    • -
  • Setting a range of keys: {{domxref("IDBKeyRange")}}
    • -
  • Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
    • -
  • Using cursors: {{domxref("IDBCursor")}}
    • -
  • Reference example: To-do Notifications (view example live.)
    • -
diff --git a/files/tr/web/api/idbindex/index.html b/files/tr/web/api/idbindex/index.html deleted file mode 100644 index a14089a7f3..0000000000 --- a/files/tr/web/api/idbindex/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: IDBIndex -slug: Web/API/IDBIndex -tags: - - API - - Database - - IDBIndex - - IndexedDB - - Interface - - NeedsTranslation - - Reference - - Storage - - TopicStub -translation_of: Web/API/IDBIndex ---- -

{{APIRef("IndexedDB")}}

- -

IDBIndex interface of the IndexedDB API provides asynchronous access to an index in a database. An index is a kind of object store for looking up records in another object store, called the referenced object store. You use this interface to retrieve data.

- -

You can retrieve records in an object store through the primary key or by using an index. An index lets you look up records in an object store using properties of the values in the object stores records other than the primary key

- -

The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refers to the object store are automatically updated.

- -

You can grab a set of keys within a range. To learn more, see {{domxref("IDBKeyRange")}}.

- -

{{AvailableInWorkers}}

- -

Properties

- -
-
{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
-
Returns a {{domxref("Boolean")}} indicating whether the index had a locale value of auto specified upon its creation (see createIndex()'s optionalParameters.)
-
{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
-
Returns the locale of the index (for example en-US, or pl) if it had a locale value specified upon its creation (see createIndex()'s optionalParameters.)
-
{{domxref("IDBIndex.name")}}
-
The name of this index.
-
{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}
-
The name of the object store referenced by this index.
-
{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}
-
The key path of this index. If null, this index is not auto-populated.
-
{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}
-
Affects how the index behaves when the result of evaluating the index's key path yields an array. If true, there is one record in the index for each item in an array of keys. If false, then there is one record for each key that is an array.
-
{{domxref("IDBIndex.unique")}} {{readonlyInline}}
-
If true, this index does not allow duplicate values for a key.
-
- -

Methods

- -

Inherits from: EventTarget

- -
-
{{domxref("IDBIndex.count()")}}
-
Returns an {{domxref("IDBRequest")}} object, and in a separate thread, returns the number of records within a key range.
-
{{domxref("IDBIndex.get()")}}
-
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if key is an {{domxref("IDBKeyRange")}}.
-
{{domxref("IDBIndex.getKey()")}}
-
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the given key or the primary key, if key is an {{domxref("IDBKeyRange")}}.
-
{{domxref("IDBIndex.getAll()")}}
-
Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching values in the referenced object store that correspond to the given key or are in range, if key is an {{domxref("IDBKeyRange")}}.
-
{{domxref("IDBIndex.getAllKeys()")}}
-
Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching keys in the referenced object store that correspond to the given key or are in range, if key is an {{domxref("IDBKeyRange")}}.
-
{{domxref("IDBIndex.openCursor()")}}
-
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range.
-
{{domxref("IDBIndex.openKeyCursor()")}}
-
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.
-
- -

Example

- -

In the following example we open a transaction and an object store, then get the index lName from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an ObjectStore using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.

- -

Finally, we iterate through each record, and insert the data into an HTML table. For a complete working example, see our IDBIndex-example demo repo (View the example live.)

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  var objectStore = transaction.objectStore('contactsList');
-
-  var myIndex = objectStore.index('lName');
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Entries all displayed.');
-    }
-  };
-};
- -

Specification

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#index-interface", "IDBIndex")}}{{Spec2("IndexedDB 2")}} 
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(23.0)}}{{property_prefix("webkit")}}
- {{CompatChrome(24.0)}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}10 {{property_prefix("moz")}}
- {{CompatGeckoDesktop("16.0")}}		10, partial{{CompatOpera(15)}}
- {{CompatOpera(44)}} (prefixes removed)		7.1
count(){{CompatChrome(23.0)}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("22.0") }}10, partial{{CompatOpera(15)}}7.1
getAll() and getAllKeys(){{CompatChrome(48.0)}}{{CompatNo}}{{ CompatGeckoDesktop("24.0") }}
- behind dom.indexedDB.experimental  pref		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Available in workers{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}
- {{CompatOpera(44)}} (prefixes removed)		{{CompatUnknown}}
isAutoLocale and locale{{ CompatNo() }}{{CompatNo}} -

{{CompatGeckoDesktop("43.0")}}
- behind dom.indexedDB.experimental  pref

- 		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
name setter available{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for Android EdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{ CompatGeckoMobile("22.0") }}1.0.110{{CompatOperaMobile(22)}}
- {{CompatOperaMobile(44)}} (prefixes removed)		{{ CompatNo() }}
count(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("22.0") }}1.0.110{{CompatOperaMobile(22)}}{{ CompatNo() }}
getAll() and getAllKeys(){{CompatChrome(48.0)}} {{CompatNo}}{{ CompatGeckoMobile("24.0") }}
- behind dom.indexedDB.experimental  pref		1.1 behind
- dom.indexedDB.experimental  pref		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Available in workers{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
- {{CompatOperaMobile(44)}} (prefixes removed)		{{CompatUnknown}}
isAutoLocale and locale{{ CompatNo()}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("43.0")}}
- behind dom.indexedDB.experimental  pref		2.5
- behind dom.indexedDB.experimental  pref		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
name setter available{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(45)}}{{CompatUnknown}}
-
- -

See also

- -
    -
  • Using IndexedDB
    • -
  • Starting transactions: {{domxref("IDBDatabase")}}
    • -
  • Using transactions: {{domxref("IDBTransaction")}}
    • -
  • Setting a range of keys: {{domxref("IDBKeyRange")}}
    • -
  • Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
    • -
  • Using cursors: {{domxref("IDBCursor")}}
    • -
  • Reference example: To-do Notifications (view example live.)
    • -
diff --git a/files/tr/web/api/index.html b/files/tr/web/api/index.html deleted file mode 100644 index d3c6aa02e3..0000000000 --- a/files/tr/web/api/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Web API Nesne Tipleri -slug: Web/API -tags: - - JavaScript - - Referans - - Türkçe JavaScript - - Uygulamalar - - Web - - dolap.com -translation_of: Web/API ---- -

JavaScript ile Web için kod yazarken kullanılabilecek çok fazla API vardır. Aşağıdaki listede Web uygulamanızı veya sitenizi geliştirirken kullanabileceğiniz tüm nesne tiplerini bulabilirsiniz.

- -
{{APIListAlpha}}
diff --git a/files/tr/web/api/mutationobserver/index.html b/files/tr/web/api/mutationobserver/index.html deleted file mode 100644 index 33b181344b..0000000000 --- a/files/tr/web/api/mutationobserver/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: MutationObserver -slug: Web/API/MutationObserver -tags: - - API - - DOM - - Dönüşüm Gözlemcisi -translation_of: Web/API/MutationObserver ---- -

{{APIRef("DOM")}}

- -

MutationObserver, geliştiricilere DOM'da gerçekleşen değişimleri yakalanması ve bir tepki üretilmesi için bir yol sunar. Dönüşüm (Mutasyon) Olayları'nın yerini almak üzere tasarlanmış, DOM3 Events (Olaylar) belirlemesinde tanımlanmıştır.

- -

Kurucu İşlerlik (İşlev)

- -

MutationObserver()

- -

DOM dönüşüm gözlemcilerini (mutation observer) yaratmak için kullanılır.

- -
new MutationObserver(
-  function geriyeCagri
-);
-
- -
Yönergeler (Parametreler)
- -
-
geriyeCagri
-
Her DOM dönüşümünde çağrılacak işlerliktir. Gözlemci, bu işlerliği iki yönergeyle çağıracaktır. İlki, {{domxref("MutationRecord")}} cinsinden nesneleri barındıran bir dizi; ikincisi MutationObserver'ın geçerli olan örneğidir.
-
- -

Nesne İşlerlikleri

- - - - - - - - - - - - - -
void observe( {{domxref("Node")}} hedef, MutationObserverInit ayarlar );
void disconnect();
Array takeRecords();
- -
-

Anımsatma: Hedefin {{domxref("Node")}} diye belirtilen cinsi,  NodeJS ile karıştırılmamalıdır..

-
- -

observe()

- -

Belirtilen DOM düğüm noktasının (node) yapısında meydana gelen değişimlerin bildirilebilmesi için MutationObserver nesnesini kaydettirir.

- -
void observe(
-  {{domxref("Node")}} hedef,
-  MutationObserverInit ayarlar
-);
-
- -
Yönergeler
- -
-
hedef
-
DOM yapısındaki dönüşümlerin gözleneceği, {{domxref("Node")}} sınıfında bir DOM düğüm noktasıdır.
-
ayarlar
-
Hangi dönüşümlerin bildirileceğini belirten bir MutationObserverInit sınıfı nesnesidir.
-
- -
Anımsatma: Bir DOM ögesine (element) gözlemci atamak tıpkı addEventListener ile bir olay belirtmek gibidir. Eğer aynı gözlemciyi aynı geriye çağrı (callback) işlerliğiyle birden fazla kez aynı ögeye atarsanız dönüşümlerde işlerlik ikişer-üçer kez çağrılmaz. Tek bir kez gerçekleşir. Fakat aynı gözlemciyi aynı ögeye farklı geriye çağrı işlerlikleriyle atarsanız bu durumda her dönüşümde belirtilen tüm geriye çağrı işlerlikleri yürütülür.
- -

disconnect()

- -

MutationObserver nesnesinin DOM dönüşümlerinden haber almasını durdurur.  observe() işlerliği çağrılıncaya dek, nesnenin geriye çağrı (callback) işlerliği, DOM dönüşümlerinde çağrılmaz.

- -
void disconnect();
-
- -

takeRecords()

- -

MutationObserver nesnesinin kayıt kuyruğunda tuttuğu kayıtları elde etmeye ve kuyruğu boşaltmaya yarar.

- -
Array takeRecords();
-
- -
Döndürülen değer
- -

{{domxref("MutationRecord")}} nesnelerinden oluşmuş bir dizidir.

- -

MutationObserverInit

- -

MutationObserverInit aşağıdaki niteliklerin tanımlandığı nesnedir.

- -
Anımsatma: En azından childList, attributes veyâ characterData nitelikleri true olarak belirtilmelidir. Tersi durumda, "Geçersiz veyâ hatalı bir metin belirtildi. (An invalid or illegal string was specified)" hatasıyla karşılaşılabilir.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NitelikAçıklama
childListEğer true olarak belirtilirse DOM öğesinde gerçekleştirilen öge veyâ düğüm noktası eklemeler-çıkarmalar gözlenir. Metin düğüm noktaları (text node) da bunun içerisindedir.
attributesEğer true olarak belirtilirse hedef ögenin niteliklerinde ortaya çıkan değişiklikler gözlenir.
characterDataEğer true olarak belirtilirse hedef ögenin verisindeki değişimler gözlenir.
subtreeEğer true olarak belirtilirse hedef ögenin ve altögelerinin dönüşümleri gözlenir.
attributeOldValueEğer true olarak belirtilirse niteliğin değişimden önceki değeri de kayıt altına alınır.
characterDataOldValueEğer true olarak belirtilirse ögenin verisinin değişimden önceki değeri de kaydedilir.
attributeFilterEğer tüm niteliklerin gözlenmesi gerekmiyorsa gözlenmesi istenen niteliklerin adlarının bir dizisi bu niteliğe atanır.
- -

Örnek Kullanım

- -

Aşağıdaki örnek bu blog gönderisinden alınmıştır. Ancak açıklamalar ve değişken adları değiştirilmiştir.

- -
// Hedef DOM ögesini seç.
-var nHedef = document.getElementById('bir-kimlik-degeri');
-
-// Bir gözlemci yarat.
-var nGozlemci = new MutationObserver(function(nDonusumler) {
-
-  // Öge dönüştüğünde, tüm dönüşümleri dolaş.
-  nDonusumler.forEach(function(nDonusum) {
-
-    // Sıradaki dönüşümü komut satırı ekranına yazdır.
-    console.log(nDonusum.type);
-
-  });
-
-});
-
-// Gözlemcinin ayarlarını belirle.
-var nAyarlar = { attributes: true, childList: true, characterData: true };
-
-// Gözlemciyi belirlenen ayarlarla belirtilen ögeye ata.
-nGozlemci.observe(nHedef, nAyarlar);
-
-// Daha sonraları, aşağıdaki komutla gözlemleme durdurulabilir.
-nGozlemci.disconnect();
-
- -

Ayrıca Okuyunuz

- - - -

Belirlemeler

- - - - - - - - - - - - - - - - -
BelirlemeDurumYorum
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }} 
- -

Tarayıcı Desteği

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DurumChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek18 {{property_prefix("-webkit")}}
- 26		{{CompatVersionUnknown}}{{CompatGeckoDesktop(14)}}11156.0 {{property_prefix("-webkit")}}
- 7
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
DurumAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Temel destek4.418 {{property_prefix("-webkit")}}
- 26		{{CompatVersionUnknown}}{{CompatGeckoMobile(14)}}11 (8.1)156 {{property_prefix("-webkit")}}
- 7
-
diff --git a/files/tr/web/api/node/index.html b/files/tr/web/api/node/index.html deleted file mode 100644 index 481eb416b0..0000000000 --- a/files/tr/web/api/node/index.html +++ /dev/null @@ -1,383 +0,0 @@ ---- -title: Node -slug: Web/API/Node -tags: - - API - - DOM - - Interface - - NeedsTranslation - - Node - - Reference - - TopicStub -translation_of: Web/API/Node ---- -

{{APIRef("DOM")}}

- -

Node is an interface from which various types of DOM API objects inherit, allowing those types to be treated similarly; for example, inheriting the same set of methods, or being testable in the same way.

- -

All of the following interfaces inherit the Node interface's methods and properties: {{DOMxRef("Document")}}, {{DOMxRef("Element")}}, {{DOMxRef("Attr")}}, {{DOMxRef("CharacterData")}} (which {{DOMxRef("Text")}}, {{DOMxRef("Comment")}}, and {{DOMxRef("CDATASection")}} inherit), {{DOMxRef("ProcessingInstruction")}}, {{DOMxRef("DocumentFragment")}}, {{DOMxRef("DocumentType")}}, {{DOMxRef("Notation")}}, {{DOMxRef("Entity")}}, {{DOMxRef("EntityReference")}}

- -

Those interfaces may return null in certain cases where the methods and properties are not relevant. They may throw an exception — for example when adding children to a node type for which no children can exist.

- -

{{InheritanceDiagram}}

- -

Properties

- -

Inherits properties from its parent, {{DOMxRef("EventTarget")}}.[1]

- -
-
{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("DOMString")}} representing the base URL of the document containing the Node.
-
{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}} {{ReadOnlyInline}}
-
(Not available to web content.) The {{ Interface("nsIURI") }} object representing the base URI for the element.
-
{{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}
-
Returns a live {{DOMxRef("NodeList")}} containing all the children of this node. {{DOMxRef("NodeList")}} being live means that if the children of the Node change, the {{DOMxRef("NodeList")}} object is automatically updated.
-
{{DOMxRef("Node.firstChild")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} representing the first direct child node of the node, or null if the node has no child.
-
{{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}
-
A boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{DOMxRef("Document")}} object in the case of the normal DOM, or the {{DOMxRef("ShadowRoot")}} in the case of a shadow DOM.
-
{{DOMxRef("Node.lastChild")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} representing the last direct child node of the node, or null if the node has no child.
-
{{DOMxRef("Node.nextSibling")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} representing the next node in the tree, or null if there isn't such node.
-
{{DOMxRef("Node.nodeName")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("DOMString")}} containing the name of the Node. The structure of the name will differ with the node type. E.g. An {{DOMxRef("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{DOMxRef("HTMLAudioElement")}}, a {{DOMxRef("Text")}} node will have the '#text' string, or a {{DOMxRef("Document")}} node will have the '#document' string.
-
{{DOMxRef("Node.nodeType")}}{{ReadOnlyInline}}
-
Returns an unsigned short representing the type of the node. Possible values are: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{Deprecated_Inline}}2
TEXT_NODE3
CDATA_SECTION_NODE4
ENTITY_REFERENCE_NODE {{Deprecated_Inline}}5
ENTITY_NODE {{Deprecated_Inline}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{Deprecated_Inline}}12
-
-
{{DOMxRef("Node.nodeValue")}}
-
Returns / Sets the value of the current node.
-
{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}
-
Returns the {{DOMxRef("Document")}} that this node belongs to. If the node is itself a document, returns null.
-
{{DOMxRef("Node.parentNode")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
-
{{DOMxRef("Node.parentElement")}}{{ReadOnlyInline}}
-
Returns an {{DOMxRef("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{DOMxRef("Element")}}, this property returns null.
-
{{DOMxRef("Node.previousSibling")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} representing the previous node in the tree, or null if there isn't such node.
-
{{DOMxRef("Node.textContent")}}
-
Returns / Sets the textual content of an element and all its descendants.
-
- -

Obsolete properties

- -
-
{{DOMxRef("Node.localName")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("DOMString")}} representing the local part of the qualified name of an element. -
-

Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML.

-
-
-
{{DOMxRef("Node.namespaceURI")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
-
The namespace URI of this node, or null if it is no namespace. -
-

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees.

-
-
-
{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}
-
A {{Interface("nsIPrincipal")}} representing the node principal.
-
{{DOMxRef("Node.prefix")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
-
Is a {{DOMxRef("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
-
{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{DOMxRef("Node.getRootNode()")}}.
-
- -

Methods

- -

Inherits methods from its parent, {{DOMxRef("EventTarget")}}.[1]

- -
-
{{DOMxRef("Node.appendChild()", "Node.appendChild(childNode)")}}
-
Adds the specified childNode argument as the last child to the current node.
- If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
-
{{DOMxRef("Node.cloneNode()")}}
-
Clone a {{DOMxRef("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
-
{{DOMxRef("Node.compareDocumentPosition()")}}
-
Compares the position of the current node against another node in any other document.
-
{{DOMxRef("Node.contains()")}}
-
Returns a {{jsxref("Boolean")}} value indicating whether or not a node is a descendant of the calling node.
-
{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}
-
Returns a list of the node's CSS boxes relative to another node.
-
{{DOMxRef("Node.getRootNode()")}}
-
Returns the context object's root which optionally includes the shadow root if it is available. 
-
{{DOMxRef("Node.hasChildNodes()")}}
-
Returns a {{jsxref("Boolean")}} indicating whether or not the element has any child nodes.
-
{{DOMxRef("Node.insertBefore()")}}
-
Inserts a {{DOMxRef("Node")}} before the reference node as a child of a specified parent node.
-
{{DOMxRef("Node.isDefaultNamespace()")}}
-
Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of true if the namespace is the default namespace on the given node or false if not.
-
{{DOMxRef("Node.isEqualNode()")}}
-
Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.
-
{{DOMxRef("Node.isSameNode()")}}
-
Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).
-
{{DOMxRef("Node.lookupPrefix()")}}
-
Returns a {{DOMxRef("DOMString")}} containing the prefix for a given namespace URI, if present, and null if not. When multiple prefixes are possible, the result is implementation-dependent.
-
{{DOMxRef("Node.lookupNamespaceURI()")}}
-
Accepts a prefix and returns the namespace URI associated with it on the given node if found (and null if not). Supplying null for the prefix will return the default namespace.
-
{{DOMxRef("Node.normalize()")}}
-
Clean up all the text nodes under this element (merge adjacent, remove empty).
-
{{DOMxRef("Node.removeChild()")}}
-
Removes a child node from the current element, which must be a child of the current node.
-
{{DOMxRef("Node.replaceChild()")}}
-
Replaces one child {{DOMxRef("Node")}} of the current one with the second one given in parameter.
-
- -

Obsolete methods

- -
-
{{DOMxRef("Node.getFeature()")}} {{Obsolete_Inline}}
-
-
{{DOMxRef("Node.getUserData()")}} {{Obsolete_Inline}}
-
Allows a user to get some {{DOMxRef("DOMUserData")}} from the node.
-
{{DOMxRef("Node.hasAttributes()")}} {{Obsolete_Inline}}
-
Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.
-
{{DOMxRef("Node.isSupported()")}} {{Obsolete_Inline}}
-
Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
-
{{DOMxRef("Node.setUserData()")}} {{Obsolete_Inline}}
-
Allows a user to attach, or remove, {{DOMxRef("DOMUserData")}} to the node.
-
- -

Examples

- -

Remove all children nested within a node

- -
function removeAllChildren(element) {
-  while (element.firstChild) {
-    element.removeChild(element.firstChild)
-  }
-}
- -

Sample usage

- -
/* ... an alternative to document.body.innerHTML = "" ... */
-removeAllChildren(document.body)
- -

Recurse through child nodes

- -

The following function recursively calls a callback function for each node contained by a root node (including the root itself):

- -
function eachNode(rootNode, callback) {
-	if (!callback) {
-		const nodes = []
-		eachNode(rootNode, function(node) {
-			nodes.push(node)
-		})
-		return nodes
-	}
-
-	if (false === callback(rootNode)) {
-		return false
-    }
-
-	if (rootNode.hasChildNodes()) {
-		const nodes = rootNode.childNodes
-		for (let i = 0, l = nodes.length; i < l; ++i) {
-			if (false === eachNode(nodes[i], callback)) {
-				return
-            }
-        }
-	}
-}
-
- -

Syntax

- -
eachNode(rootNode, callback)
- -

Description

- -

Recursively calls a function for each descendant node of rootNode (including the root itself).

- -

If callback is omitted, the function returns an {{jsxref("Array")}} instead, which contains rootNode and all nodes contained within.

- -

If callback is provided, and it returns {{jsxref("Boolean")}} false when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).

- -

Parameters

- -
-
rootNode
-
The Node object whose descendants will be recursed through.
-
callback {{optional_inline}}
-
An optional callback function that receives a Node as its only argument. If omitted, eachNode returns an {{jsxref("Array")}} of every node contained within rootNode (including the root itself).
-
- -

Sample usage

- -

The following example prints the textContent properties of each <span> tag in a <div> element named "box":

- -
<div id="box">
-  <span>Foo</span>
-  <span>Bar</span>
-  <span>Baz</span>
-</div>
- -
const box = document.getElementById("box")
-eachNode(box, function(node) {
-  if (null != node.textContent) {
-    console.log(node.textContent)
-  }
-})
- -

The above will result in the following strings printing to the user's console:

- -
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
- -
-

Note: Whitespace forms part of a {{DOMxRef("Text")}} node, meaning indentation and newlines form separate Text between the Element nodes.

-
- -

Realistic usage

- -

The following demonstrates a real-world use of the eachNode() function: searching for text on a web-page.

- -

We use a wrapper function named grep to do the searching:

- -
function grep(parentNode, pattern) {
-	const matches = []
-	let endScan = false
-
-	eachNode(parentNode, function(node){
-		if (endScan) {
-			return false
-        }
-
-		// Ignore anything which isn't a text node
-		if (node.nodeType !== Node.TEXT_NODE) {
-			return
-        }
-
-		if (typeof pattern === "string") {
-			if (-1 !== node.textContent.indexOf(pattern)) {
-				matches.push(node)
-            }
-		}
-		else if (pattern.test(node.textContent)) {
-			if (!pattern.global) {
-				endScan = true
-				matches = node
-			}
-			else {
-                matches.push(node)
-            }
-		}
-	})
-
-	return matches
-}
- -

For example, to find {{DOMxRef("Text")}} nodes that contain typos:

- -
const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]
-const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi")
-const mistakes = grep(document.body, pattern)
-console.log(mistakes)
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-node", "Node")}}{{Spec2("DOM WHATWG")}}Added the following methods: getRootNode()
{{SpecName("DOM4", "#interface-node", "Node")}}{{Spec2("DOM4")}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
- Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData().
{{SpecName("DOM3 Core", "core.html#ID-1950641247", "Node")}}{{Spec2("DOM3 Core")}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{DOMxRef("Document")}}.
- The normalize() method has been modified so that {{DOMxRef("Text")}} node can also be normalized if the proper {{DOMxRef("DOMConfiguration")}} flag is set.
- Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
- Added the following properties: baseURI and textContent.
{{SpecName("DOM2 Core", "core.html#ID-1950641247", "Node")}}{{Spec2("DOM2 Core")}}The ownerDocument property was slightly modified so that {{DOMxRef("DocumentFragment")}} also returns null.
- Added the following properties: namespaceURI, prefix, and localName.
- Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName("DOM1", "level-one-core.html#ID-1950641247", "Node")}}{{Spec2("DOM1")}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.Node")}}

diff --git a/files/tr/web/api/storage/index.html b/files/tr/web/api/storage/index.html deleted file mode 100644 index e351674887..0000000000 --- a/files/tr/web/api/storage/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Saklama -slug: Web/API/Storage -tags: - - API - - Arayüz - - Başvuru - - Depolama - - Referans - - Saklama - - Veri - - Web Depolama - - Web Saklama -translation_of: Web/API/Storage ---- -

{{APIRef("Web Storage API")}}

- -

Web Saklama API'nin Storage arayüzü belirli bir alan için oturum belleğine ya da yerel belleğe erişim sağlar, örneğin saklanmış veri öğelerini ekleme, değiştirme ya da silme izni verir.

- -

Bir alan için oturum belleğini değiştirmek istiyorsanız, {{domxref("Window.sessionStorage")}} yöntemini çağırın; bir alan için yerel belleğini değiştirmek istiyorsanız, {{domxref("Window.localStorage")}} çağırın.

- -

Özellikler

- -
-
{{domxref("Storage.length")}} {{readonlyInline}}
-
Storage nesnesinde saklanan veri öğelerinin sayısını belirten bir tamsayı döndürür.
-
- -

Yöntemler

- -
-
{{domxref("Storage.key()")}}
-
Bir n numarası olduğunda, bu yöntem bellekte n. anahtarın ismini döndürecektir.
-
- -
-
{{domxref("Storage.getItem()")}}
-
Bir anahtar numarası olduğunda, bu anahtarın değerini döndürecektir.
-
{{domxref("Storage.setItem()")}}
-
Bir anahtarın ismi ile değeri olduğunda, bu anahtarı belleğe ekler ya da bu anahtarın değeri önceden varsa günceller.
-
{{domxref("Storage.removeItem()")}}
-
Bir anahtarın ismi olduğunda, bu anahtarı bellekten siler.
-
{{domxref("Storage.clear()")}}
-
Çağrıldığında, bütün anahtarları belleğin dışına boşaltacaktır.
-
- -

Örnekler

- -

Bir Storage nesnesini localStorage yolu ile çağırıyoruz. Here we access a Storage object by calling localStorage. Yerel belleğin !localStorage.getItem('bgcolor') kullanarak veri içerip içermediğini sınıyoruz. Olursa, {{domxref("localStorage.getItem()")}} kullanarak veri öğesi alan setStyles() isminde bir fonksiyon çağırıyoruz ve şu değerleri kullanarak sayfa biçimlerini güncelliyoruz. Olmazsa, diğer populateStorage() fonksiyonu çağrılır, {{domxref("localStorage.setItem()")}} kullanarak öğelerinin değerlerini belirlemek için ardından setStyles() çağrılır.

- -
if(!localStorage.getItem('bgcolor')) {
-  populateStorage();
-} else {
-  setStyles();
-}
-
-function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
-
-  setStyles();
-}
-
-function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
-
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
-
-  htmlElem.style.backgroundColor = '#' + currentColor;
-  pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
-}
- -
-

Not: Tam bir çalışma örneği olarak çalışanı görmek için, Web Bellek Tanıtımınıza bakınız.

-
- -

Tanımlamalar

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
- -

Tarayıcı Uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}8113.2[1]
-
- -

[1] iOS 5.1'ten beri, Safari Mobile localStorage verisini önbellek dizinine kaydeder, genelde boş yer kısa ise zaman zaman bağlı olan işletim sistemi buyruğu ile temizlenir.

- -

Bütün tarayıcılar localStorage ile sessionStorage için değişen seviyede hacim sahiptirler. Burada çeşitli tarayıcılar için bütün bellek hacimlerinin ayrıntılı özeti.

- -

Ayrıca Bakınız

- -

Web Belleği API'sini Kullanma

diff --git a/files/tr/web/api/webgl_api/index.html b/files/tr/web/api/webgl_api/index.html deleted file mode 100644 index e72bde0ec7..0000000000 --- a/files/tr/web/api/webgl_api/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: 'WebGL_API: Web için 2D ve 3D grafikler' -slug: Web/API/WebGL_API -translation_of: Web/API/WebGL_API ---- -
{{WebGLSidebar}}
- -
-

WebGL (Web Grafik Kütüphanesi) herhangi bir plug-in kullanmadan, uyumlu bütün tarayıcılarda 3D ve 2D grafikler oluşturabilen bir JavaScript API'sidir. WebGL bunu, HTML5 {{HTMLElement ("canvas")}} öğelerinde kullanılabilen OpenGL ES 2.0'a yakın bir API'yi sunarak yapar.

-
- -

WebGL desteği şuan için şu tarayıcılarda mevcuttur: Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, and Microsoft Edge build 10240+; ancak, kullanıcının kullandığı cihazın donanımı da bu özellikleri desteklemesi gerekmektedir.

- -

{{HTMLElement("canvas")}} öğesi ayrıca Canvas 2D tarafından web sayfalarında 2D grafikler oluşturmak için de kullanılır.

- -

Referans

- -

Standart arayüzler

- -
-
    -
  • {{domxref("WebGLRenderingContext")}}
    • -
  • {{domxref("WebGL2RenderingContext")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLActiveInfo")}}
    • -
  • {{domxref("WebGLBuffer")}}
    • -
  • {{domxref("WebGLContextEvent")}}
    • -
  • {{domxref("WebGLFramebuffer")}}
    • -
  • {{domxref("WebGLProgram")}}
    • -
  • {{domxref("WebGLQuery")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLRenderbuffer")}}
    • -
  • {{domxref("WebGLSampler")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLShader")}}
    • -
  • {{domxref("WebGLShaderPrecisionFormat")}}
    • -
  • {{domxref("WebGLSync")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLTexture")}}
    • -
  • {{domxref("WebGLTransformFeedback")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLUniformLocation")}}
    • -
  • {{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}
    • -
-
- -

Uzantılar

- -
-
    -
  • {{domxref("ANGLE_instanced_arrays")}}
    • -
  • {{domxref("EXT_blend_minmax")}}
    • -
  • {{domxref("EXT_color_buffer_float")}}
    • -
  • {{domxref("EXT_color_buffer_half_float")}}
    • -
  • {{domxref("EXT_disjoint_timer_query")}}
    • -
  • {{domxref("EXT_frag_depth")}}
    • -
  • {{domxref("EXT_sRGB")}}
    • -
  • {{domxref("EXT_shader_texture_lod")}}
    • -
  • {{domxref("EXT_texture_filter_anisotropic")}}
    • -
  • {{domxref("OES_element_index_uint")}}
    • -
  • {{domxref("OES_standard_derivatives")}}
    • -
  • {{domxref("OES_texture_float")}}
    • -
  • {{domxref("OES_texture_float_linear")}}
    • -
  • {{domxref("OES_texture_half_float")}}
    • -
  • {{domxref("OES_texture_half_float_linear")}}
    • -
  • {{domxref("OES_vertex_array_object")}}
    • -
  • {{domxref("WEBGL_color_buffer_float")}}
    • -
  • {{domxref("WEBGL_compressed_texture_astc")}}
    • -
  • {{domxref("WEBGL_compressed_texture_atc")}}
    • -
  • {{domxref("WEBGL_compressed_texture_etc")}}
    • -
  • {{domxref("WEBGL_compressed_texture_etc1")}}
    • -
  • {{domxref("WEBGL_compressed_texture_pvrtc")}}
    • -
  • {{domxref("WEBGL_compressed_texture_s3tc")}}
    • -
  • {{domxref("WEBGL_compressed_texture_s3tc_srgb")}}
    • -
  • {{domxref("WEBGL_debug_renderer_info")}}
    • -
  • {{domxref("WEBGL_debug_shaders")}}
    • -
  • {{domxref("WEBGL_depth_texture")}}
    • -
  • {{domxref("WEBGL_draw_buffers")}}
    • -
  • {{domxref("WEBGL_lose_context")}}
    • -
-
- -

Events

- -
    -
  • {{Event("webglcontextlost")}}
    • -
  • {{Event("webglcontextrestored")}}
    • -
  • {{Event("webglcontextcreationerror")}}
    • -
- -

Sabitler ve tipleri

- - - -

WebGL 2

- -

WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:

- - - -

See also the blog post "WebGL 2 lands in Firefox" and webglsamples.org/WebGL2Samples for a few demos.

- -

Guides and tutorials

- -

Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.

- -

Guides

- -
-
Data in WebGL
-
A guide to variables, buffers, and other types of data used when writing WebGL code.
-
WebGL best practices
-
Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.
-
Using extensions
-
A guide to using WebGL extensions.
-
- -

Tutorials

- -
-
WebGL tutorial
-
A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.
-
- -

Examples

- -
-
A basic 2D WebGL animation example
-
This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.
-
- -

Advanced tutorials

- -
-
WebGL model view projection
-
A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.
-
Matrix math for the web
-
A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.
-
- -

Resources

- -
    -
  • Raw WebGL: An introduction to WebGL A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.
    • -
  • Khronos WebGL site The main web site for WebGL at the Khronos Group.
    • -
  • Learning WebGL A site with tutorials on how to use WebGL.
    • -
  • WebGL Fundamentals A basic tutorial with fundamentals of WebGL.
    • -
  • WebGL playground An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.
    • -
  • WebGL Academy An HTML/JavaScript editor with tutorials to learn basics of webgl programming.
    • -
  • WebGL Stats A site with statistics about WebGL capabilities in browsers on different platforms.
    • -
- -

Libraries

- -
    -
  • glMatrix JavaScript Matrix and Vector library for High Performance WebGL apps
    • -
  • Sylvester An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.
    • -
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Initial definition. Based on OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Builds on top of WebGL 1. Based on OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}11125.1
WebGL 256{{CompatNo}}{{CompatGeckoDesktop("51")}}{{CompatNo}}43{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support25{{CompatVersionUnknown}}4{{CompatNo}}128.1
WebGL 2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Compatibility notes

- -

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name webgl2.

- -

Gecko notes

- -

WebGL debugging and testing

- -

Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:

- -
-
webgl.min_capability_mode
-
A Boolean property that, when true, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.
-
webgl.disable_extensions
-
A Boolean property that, when true, disables all WebGL extensions. This is false by default.
-
- -

See also

- - diff --git a/files/tr/web/api/websocket/binarytype/index.html b/files/tr/web/api/websocket/binarytype/index.html deleted file mode 100644 index cb354a0dfb..0000000000 --- a/files/tr/web/api/websocket/binarytype/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WebSocket.binaryType -slug: Web/API/WebSocket/binaryType -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/binaryType ---- -

{{APIRef("Web Sockets API")}}

- -

WebSocket.binaryType özelliği, bağlantıda iletilen verinin ikilik veri tipini verir.

- -

Sözdizim

- -
var binaryType = aWebSocket.binaryType;
- -

Değer

- -

Bir {{DOMXref("DOMString")}}:

- -
-
"blob"
-
Eğer {{domxref("Blob")}} objeleri kullanıldıysa.
-
"arraybuffer"
-
Eğer {{jsxref("ArrayBuffer")}} objeleri kullanıldıysa. -

 

-
-
- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-binarytype', 'WebSocket: binaryType')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.binaryType")}}

diff --git a/files/tr/web/api/websocket/close/index.html b/files/tr/web/api/websocket/close/index.html deleted file mode 100644 index 44d935c025..0000000000 --- a/files/tr/web/api/websocket/close/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: WebSocket.close() -slug: Web/API/WebSocket/close -tags: - - API - - Web API - - WebSocket - - Yöntem -translation_of: Web/API/WebSocket/close ---- -

{{APIRef("Web Sockets API")}}

- -

WebSocket.close() yöntemi, eğer varsa, {{domxref("WebSocket")}} bağlantısını kapatır. Eğer bağlantı zaten CLOSED ise, hiç bir şey yapmaz.

- -

Sözdizim

- -
WebSocket.close();
- -

Parametreler

- -
-
code {{optional_inline}}
-
Bir bağlantının neden kapandığını açıklayan durum kodunu belirten bir sayısal değerdir. Eğer parametre belirtilmediyse, varsayılan değer olan 1005 kullanılır. Ayrıca {{domxref("CloseEvent")}} için izin verilen durum kodu listesine bakınız.
-
- -
-
reason {{optional_inline}}
-
Neden bağlantının kapandığını belirten okunabilir bir dizidir. Bu dizi 123 byte boyutunda UTF-8 yazısından daha uzun olmamalıdır. (karakterler değil)
-
- -

Olağandışı durumlar

- -
-
INVALID_ACCESS_ERR
-
code parametresine geçersiz bir durum kodu girildi.
-
SYNTAX_ERR
-
reason dizisi çok uzun ya da eşleştirilmemiş naipler içeriyor.
-
- -
-

Not: Gecko'da, bu yöntem 8.0'dan önce hiç bir parametreyi desteklemiyor. {{geckoRelease("8.0")}}.

-
- -

Belirtimler

- - - - - - - - - - - - - - -
BelirtimDurumYorum
HTML Living Standard
- The definition of 'WebSocket.close()' in that specification.		Living Standardİlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.close")}}

diff --git a/files/tr/web/api/websocket/extensions/index.html b/files/tr/web/api/websocket/extensions/index.html deleted file mode 100644 index 55b7cbb914..0000000000 --- a/files/tr/web/api/websocket/extensions/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: WebSocket.extensions -slug: Web/API/WebSocket/extensions -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/extensions ---- -

{{APIRef("Web Sockets API")}}

- -

Salt-okunur WebSocket.extensions özelliği, sunucunun seçtiği uzantıları verir. Şu anlık boş bir dizi ya da bağlantı tarafından uzlaşılan uzantıların listesidir.

- -

Sözdizim

- -
var extensions = aWebSocket.extensions;
- -

Değer

- -

Bir {{domxref("DOMString")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-extensions', 'WebSocket: extensions')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.extensions")}}

diff --git a/files/tr/web/api/websocket/index.html b/files/tr/web/api/websocket/index.html deleted file mode 100644 index ce8a030def..0000000000 --- a/files/tr/web/api/websocket/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: WebSocket -slug: Web/API/WebSocket -tags: - - API - - WebSocket - - WebSockets -translation_of: Web/API/WebSocket ---- -
{{APIRef("Web Sockets API")}}
- -

WebSocket, bir WebSocket sunucusuyla bağlantı kurmak ve bağlantıyı yönetmek için bir uygulama programlama arayüzü (API) sunar.

- -

WebSocket'i kurmak için WebSocket() yapısını kullanın.

- -

Yapılar

- -
-
{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}
-
Yeni oluşturulmuş bir WebSocket objesi verir.
-
- -

Sabitler

- - - - - - - - - - - - - - - - - - - - - - - - -
SabitDeğer
WebSocket.CONNECTING0
WebSocket.OPEN1
WebSocket.CLOSING2
WebSocket.CLOSED3
- -

Özellikler

- -
-
{{domxref("WebSocket.binaryType")}}
-
Bağlantıda kurulan ikilik veri tipi.
-
{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}
-
Kuyruktaki değerlerin byte sayıları.
-
{{domxref("WebSocket.extensions")}} {{readonlyinline}}
-
Sunucu tarafından seçilmiş uzantılar.
-
{{domxref("WebSocket.onclose")}}
-
Bağlantı kapandığında çağırılan olay dinleyicisi.
-
{{domxref("WebSocket.onerror")}}
-
Hata oluştuğunda çağırılan olay dinleyicisi.
-
{{domxref("WebSocket.onmessage")}}
-
Sunucudan mesaj alındığında çağırılan olay dinleyicisi.
-
{{domxref("WebSocket.onopen")}}
-
Bağlantı kurulduğunda çağırılan olay dinleyicisi.
-
{{domxref("WebSocket.protocol")}} {{readonlyinline}}
-
Sunucu tarafından seçilmiş alt-protokol.
-
{{domxref("WebSocket.readyState")}} {{readonlyinline}}
-
Bağlantının şimdiki durumu.
-
{{domxref("WebSocket.url")}} {{readonlyinline}}
-
WebSocket'in mutlak URL'si.
-
- -

Yöntemler

- -
-
{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}
-
Bağlantıyı kapatır.
-
{{domxref("WebSocket.send", "WebSocket.send(data)")}}
-
İletilmek üzere veriyi kuyruğa ekler.
-
- -

Örnek

- -

 

- -
// WebSocket bağlantısı kur
-const socket = new WebSocket('ws://localhost:8080');
-
-// Bağlantı kurulduğunda
-socket.addEventListener('open', function (event) {
-    socket.send('Sunucuya bağlanıldı.');
-});
-
-// Mesaj alındığında
-socket.addEventListener('message', function (event) {
-    console.log('Mesaj alındı: ', event.data);
-});
-
-// Mesaj gönder
-socket.send('Merhaba!');
-
-// Bağlantıyı bitir
-socket.close(1000, 'Güle güle.');
- -

 

- -

Belirtimler

- - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName("HTML WHATWG", "web-sockets.html#the-websocket-interface", "WebSocket")}}{{Spec2("HTML WHATWG")}}İlk tanım
- -

Tarayıcı desteği

- -
- - -

{{Compat("api.WebSocket")}}

-
- -

Ayrıca bakınız

- - diff --git a/files/tr/web/api/websocket/onclose/index.html b/files/tr/web/api/websocket/onclose/index.html deleted file mode 100644 index 5df92f3634..0000000000 --- a/files/tr/web/api/websocket/onclose/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: WebSocket.onclose -slug: Web/API/WebSocket/onclose -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onclose ---- -

{{APIRef("Web Sockets API")}}

- -

WebSocket.onclose özelliği bağlantının {{domxref("WebSocket.readyState","readyState")}} özelliği {{domxref("WebSocket.readyState","CLOSED")}} olduğunda çağırılan bir {{domxref("EventHandler")}}'dır. {{domxref("CloseEvent")}} ile birlikte çağırılır.

- -

Sözdizim

- -
aWebSocket.onclose = function(event) {
-  console.log("WebSocket is closed now.");
-};
- -

Değer

- -

Bir {{domxref("EventListener")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}}{{Spec2('HTML WHATWG')}}İlk tanım
diff --git a/files/tr/web/api/websocket/onerror/index.html b/files/tr/web/api/websocket/onerror/index.html deleted file mode 100644 index 62cc321a79..0000000000 --- a/files/tr/web/api/websocket/onerror/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.onerror -slug: Web/API/WebSocket/onerror -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onerror ---- -

{{APIRef("Web Sockets API")}}

- -

WebSocket.onerror özelliği hata oluştuğunda çağırılan bir {{domxref("EventHandler")}}'dır. {{domxref("Event")}} ile birlikte çağırılır.

- -

Sözdizim

- -
aWebSocket.onerror = function(event) {
-  console.error("WebSocket error observed:", event);
-};
- -

Değer

- -

Bir {{domxref("EventListener")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#handler-websocket-onerror', 'WebSocket: onerror')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.onerror")}}

diff --git a/files/tr/web/api/websocket/onmessage/index.html b/files/tr/web/api/websocket/onmessage/index.html deleted file mode 100644 index 0ea1dd34c8..0000000000 --- a/files/tr/web/api/websocket/onmessage/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.onmessage -slug: Web/API/WebSocket/onmessage -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onmessage ---- -

{{APIRef("Web Sockets API")}}

- -

WebSocket.onmessage özelliği sunucu tarafından mesaj iletildiğinde çağırılan bir {{domxref("EventHandler")}}'dir. {{domxref("MessageEvent")}} ile çağırılır..

- -

Sözdizim

- -
aWebSocket.onmessage = function(event) {
-  console.debug("WebSocket message received:", event);
-};
- -

Değer

- -

Bir {{domxref("EventListener")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#handler-websocket-onmessage', 'WebSocket: onmessage')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.onmessage")}}

diff --git a/files/tr/web/api/websocket/onopen/index.html b/files/tr/web/api/websocket/onopen/index.html deleted file mode 100644 index 6ce9a90f75..0000000000 --- a/files/tr/web/api/websocket/onopen/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.onopen -slug: Web/API/WebSocket/onopen -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onopen ---- -

{{APIRef("Web Sockets API")}}

- -

WebSocket.onopen özelliği bağlantının {{domxref("WebSocket.readyState","readyState")}} özelliği  {{domxref("WebSocket.readyState","1")}} olduğunda çağırılan bir {{domxref("EventHandler")}}'dir. Bu bağlantının veri alışverişine hazır olduğunu belirtir. {{domxref("Event")}} ile birlikte çağırılır.

- -

Sözdizim

- -
aWebSocket.onopen = function(event) {
-  console.log("WebSocket ile bağlantı kuruldu.");
-};
- -

Değer

- -

Bir {{domxref("EventListener")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#handler-websocket-onopen', 'WebSocket: onopen')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.onopen")}}

diff --git a/files/tr/web/api/websocket/protocol/index.html b/files/tr/web/api/websocket/protocol/index.html deleted file mode 100644 index d3a466d14b..0000000000 --- a/files/tr/web/api/websocket/protocol/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: WebSocket.protocol -slug: Web/API/WebSocket/protocol -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/protocol ---- -

{{APIRef("Web Sockets API")}}

- -

Salt-okunur WebSocket.protocol özelliği sunucunun seçtiği alt-protokolü verir. Bu değer {{domxref("WebSocket")}} objesi oluşturulurken belirtilen protocols dizisidir.

- -

Sözdizim

- -
var protocol = aWebSocket.protocol;
- -

Değer

- -

Bir DOMString.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-protocol', 'WebSocket: protocol')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.protocol")}}

diff --git a/files/tr/web/api/websocket/readystate/index.html b/files/tr/web/api/websocket/readystate/index.html deleted file mode 100644 index 1f657428d5..0000000000 --- a/files/tr/web/api/websocket/readystate/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: WebSocket.readyState -slug: Web/API/WebSocket/readyState -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/readyState ---- -

{{APIRef("Web Sockets API")}}

- -

Salt-okunur WebSocket.readyState özelliği {{domxref("WebSocket")}} bağlantısının durumunu verir.

- -

Sözdizim

- -
var readyState = aWebSocket.readyState;
- -

Değer

- -

Aşağıdaki herhangi bir unsigned short değeri:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DeğerDurumAçıklama
0CONNECTINGSoket oluşuturuldu ama henüz bağlanmadı.
1OPENBağlantı kuruldu ve iletişime hazır.
2CLOSINGBağlantı kapatılıyor.
3CLOSEDBağlantı kapatıldı ya da açılamadı.
- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-readystate', 'WebSocket: readyState')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.readyState")}}

diff --git a/files/tr/web/api/websocket/url/index.html b/files/tr/web/api/websocket/url/index.html deleted file mode 100644 index b824519c09..0000000000 --- a/files/tr/web/api/websocket/url/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.url -slug: Web/API/WebSocket/url -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/url ---- -

{{APIRef("Web Sockets API")}}

- -

Salt-okunur WebSocket.url özelliği {{domxref("WebSocket")}} yapısının mutlak URL'sini verir.

- -

Sözdizim

- -
var url = aWebSocket.url;
- -

 

- -

Değer

- -

Bir DOMString.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-url', 'WebSocket: url')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.url")}}

diff --git a/files/tr/web/api/websocket/websocket/index.html b/files/tr/web/api/websocket/websocket/index.html deleted file mode 100644 index f609e96743..0000000000 --- a/files/tr/web/api/websocket/websocket/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: WebSocket() -slug: Web/API/WebSocket/WebSocket -tags: - - API - - Web API - - WebSocket - - Yapı -translation_of: Web/API/WebSocket/WebSocket ---- -

{{APIRef("Web Sockets API")}}

- -

WebSocket() yapısı bir {{domxref("WebSocket")}} objesi verir.

- -

Sözdizim

- -
var aWebSocket = new WebSocket(uri [, protocols]);
- -

Parametreler

- -
-
url
-
Bağlanılacak sunucunun URL'si.
-
protocols {{optional_inline}}
-
Tek bir protokol dizisi ya da protokol dizilerinin bulunduğu bir küme. Bu diziler alt-protokol olarak belirtilmek amacıyla kullanılır, yani tek bir sunucu çoklu alt-protokoller uygulayabilir (örnek olarak bir sunucunun başka türlü etkileşimleri belirli protokola bağlı olarak idare edebilmek isteyebilirsiniz.). Eğer bir protokol dizisi belirtmediyseniz boş bir dizi kullanılır.
-
- -

Olağandışı durumlar

- -
-
SECURITY_ERR
-
Bağlanılmaya çalışılan port engellenmiş.
-
- -

Belirtimler

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}{{Spec2('HTML WHATWG')}} 
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.WebSocket")}}

diff --git a/files/tr/web/api/window/index.html b/files/tr/web/api/window/index.html deleted file mode 100644 index 078b27a9ad..0000000000 --- a/files/tr/web/api/window/index.html +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: Window -slug: Web/API/Window -tags: - - API - - DOM - - Interface - - JavaScript - - NeedsTranslation - - Reference - - TopicStub - - Window -translation_of: Web/API/Window ---- -

{{APIRef}}

- -

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.

- -

This section provides a brief reference for all of the methods, properties, and events available through the DOM window object. The window object implements the Window interface, which in turn inherits from the AbstractView interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the JavaScript Reference and DOM Reference.

- -

In a tabbed browser, such as Firefox, each tab contains its own window object (and if you're writing an extension, the browser window itself is a separate window too - see Working with windows in chrome code for more information). That is, the window object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the window object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.

- -

{{InheritanceDiagram}}

- -

Properties

- -

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

- -

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

- -
-
{{domxref("Window.applicationCache")}}  {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
-
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
-
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
-
This property indicates whether the current window is closed or not.
-
{{domxref("Window.Components")}} {{Non-standard_inline}}
-
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code. Web code should not use this property.
-
{{domxref("Window.console")}} {{ReadOnlyInline}}
-
Returns a reference to the console object which provides access to the browser's debugging console.
-
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
-
Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.
-
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
Returns the XUL controller objects for the current chrome window.
-
{{domxref("Window.crypto")}} {{readOnlyInline}}
-
Returns the browser crypto object.
-
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
-
Gets/sets the status bar text for the given window.
-
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
-
Returns the ratio between physical pixels and device independent pixels in the current display.
-
{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}
-
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
-
{{domxref("Window.directories")}} {{obsolete_inline}}
-
Synonym of {{domxref("window.personalbar")}}
-
{{domxref("Window.document")}} {{ReadOnlyInline}}
-
Returns a reference to the document that the window contains.
-
{{domxref("Window.frameElement")}} {{readOnlyInline}}
-
Returns the element in which the window is embedded, or null if the window is not embedded.
-
{{domxref("Window.frames")}} {{readOnlyInline}}
-
Returns an array of the subframes in the current window.
-
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
-
This property indicates whether the window is displayed in full screen or not.
-
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
-
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
- Was: Multiple storage objects that are used for storing data across multiple pages.
-
{{domxref("Window.history")}} {{ReadOnlyInline}}
-
Returns a reference to the history object.
-
{{domxref("Window.innerHeight")}} {{readOnlyInline}}
-
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
-
{{domxref("Window.innerWidth")}} {{readOnlyInline}}
-
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
-
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
-
Indicates whether a context is capable of using features that require secure contexts.
-
{{domxref("Window.length")}} {{readOnlyInline}}
-
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
-
{{domxref("Window.location")}}
-
Gets/sets the location, or current URL, of the window object.
-
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
-
Returns the locationbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
-
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
-
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
-
Returns the menubar object, whose visibility can be toggled in the window.
-
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
-
Returns the message manager object for this window.
-
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
-
The time in milliseconds since epoch at which the current animation cycle began.
-
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
-
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
-
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
-
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
-
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
-
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
-
{{domxref("Window.name")}}
-
Gets/sets the name of the window.
-
{{domxref("Window.navigator")}} {{readOnlyInline}}
-
Returns a reference to the navigator object.
-
{{domxref("Window.opener")}}
-
Returns a reference to the window that opened this current window.
-
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
-
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
-
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
-
Gets the height of the outside of the browser window.
-
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
-
Gets the width of the outside of the browser window.
-
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
-
An alias for {{domxref("window.scrollX")}}.
-
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
-
An alias for {{domxref("window.scrollY")}}
-
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
-
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
-
{{domxref("Window.parent")}} {{readOnlyInline}}
-
Returns a reference to the parent of the current window or subframe.
-
{{domxref("Window.performance")}} {{readOnlyInline}}
-
Provides a hosting area for performance related attributes.
-
{{domxref("Window.personalbar")}} {{readOnlyInline}}
-
Returns the personalbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
-
Formerly provided access to install and remove PKCS11 modules.
-
{{domxref("Window.returnValue")}}
-
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
-
{{domxref("Window.screen")}} {{readOnlyInline}}
-
Returns a reference to the screen object associated with the window.
- -
{{domxref("Window.screenX")}} {{readOnlyInline}}
-
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
-
{{domxref("Window.screenY")}} {{readOnlyInline}}
-
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
-
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
-
Returns the scrollbars object, whose visibility can be toggled in the window.
-
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
-
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
-
{{domxref("Window.scrollX")}} {{readOnlyInline}}
-
Returns the number of pixels that the document has already been scrolled horizontally.
-
{{domxref("Window.scrollY")}} {{readOnlyInline}}
-
Returns the number of pixels that the document has already been scrolled vertically.
-
{{domxref("Window.self")}} {{ReadOnlyInline}}
-
Returns an object reference to the window object itself.
-
{{domxref("Window.sessionStorage")}}
-
Returns a storage object for storing data within a single page session.
-
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
-
Returns a reference to the window object of the sidebar.
-
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
-
Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using Web Speech API speech synthesis functionality.
-
{{domxref("Window.status")}}
-
Gets/sets the text in the statusbar at the bottom of the browser.
-
{{domxref("Window.statusbar")}} {{readOnlyInline}}
-
Returns the statusbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.toolbar")}} {{readOnlyInline}}
-
Returns the toolbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.top")}} {{readOnlyInline}}
-
Returns a reference to the topmost window in the window hierarchy. This property is read only.
-
{{domxref("Window.window")}} {{ReadOnlyInline}}
-
Returns a reference to the current window.
-
window[0], window[1], etc.
-
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
-
- -

Properties implemented from elsewhere

- -
-
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
-
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
-
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
-
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
-
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
-
Returns a boolean indicating whether the current context is secure (true) or not (false).
-
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
-
Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)
-
- -

Methods

- -

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.

- -
-
{{domxref("Window.alert()")}}
-
Displays an alert dialog.
- -
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Moves back one in the window history.
-
{{domxref("Window.blur()")}}
-
Sets focus away from the window.
-
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
-
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
-
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
-
Registers the window to capture all events of the specified type.
-
{{domxref("Window.clearImmediate()")}}
-
Cancels the repeated execution set using setImmediate.
-
{{domxref("Window.close()")}}
-
Closes the current window.
-
{{domxref("Window.confirm()")}}
-
Displays a dialog with a message that the user needs to respond to.
-
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.dispatchEvent()")}}
-
Used to trigger an event.
-
{{domxref("Window.dump()")}}
-
Writes a message to the console.
-
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.find()")}}
-
Searches for a given string in a window.
-
{{domxref("Window.focus()")}}
-
Sets focus on the current window.
-
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Moves the window one document forward in the history.
-
{{domxref("Window.getAttention()")}}
-
Flashes the application icon.
-
{{domxref("Window.getAttentionWithCycleCount()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.getComputedStyle()")}}
-
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
-
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
-
Gets default computed style for the specified element, ignoring author stylesheets.
-
{{domxref("Window.getSelection()")}}
-
Returns the selection object representing the selected item(s).
-
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Returns the browser to the home page.
-
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
-
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
-
{{domxref("Window.maximize()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.minimize()")}} (top-level XUL windows only)
-
Minimizes the window.
-
{{domxref("Window.moveBy()")}}
-
Moves the current window by a specified amount.
-
{{domxref("Window.moveTo()")}}
-
Moves the window to the specified coordinates.
-
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
-
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a MozBeforePaint event to fire before that repaint occurs.
-
{{domxref("Window.open()")}}
-
Opens a new window.
-
{{domxref("Window.openDialog()")}}
-
Opens a new dialog window.
-
{{domxref("Window.postMessage()")}}
-
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
-
{{domxref("Window.print()")}}
-
Opens the Print Dialog to print the current document.
-
{{domxref("Window.prompt()")}}
-
Returns the text entered by the user in a prompt dialog.
-
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
-
Releases the window from trapping events of a specific type.
-
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
-
Enables the scheduling of tasks during a browser's idle periods.
-
{{domxref("Window.resizeBy()")}}
-
Resizes the current window by a certain amount.
-
{{domxref("Window.resizeTo()")}}
-
Dynamically resizes window.
-
{{domxref("Window.restore()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.scroll()")}}
-
Scrolls the window to a particular place in the document.
-
{{domxref("Window.scrollBy()")}}
-
Scrolls the document in the window by the given amount.
-
{{domxref("Window.scrollByLines()")}}
-
Scrolls the document by the given number of lines.
-
{{domxref("Window.scrollByPages()")}}
-
Scrolls the current document by the specified number of pages.
-
{{domxref("Window.scrollTo()")}}
-
Scrolls to a particular set of coordinates in the document.
-
{{domxref("Window.setCursor()")}}
-
Changes the cursor for the current window
-
{{domxref("Window.setImmediate()")}}
-
Executes a function after the browser has finished other heavy tasks
-
{{domxref("Window.setResizable()")}}
-
Toggles a user's ability to resize a window.
-
{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}
-
Displays a modal dialog.
-
{{domxref("Window.sizeToContent()")}}
-
Sizes the window according to its content.
-
{{domxref("Window.stop()")}}
-
This method stops window loading.
-
{{domxref("Window.updateCommands()")}}
-
Updates the state of commands of the current chrome window (UI).
-
- -

Methods implemented from elsewhere

- -
-
{{domxref("EventTarget.addEventListener()")}}
-
Register an event handler to a specific event type on the window.
-
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
-
Decodes a string of data which has been encoded using base-64 encoding.
-
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
-
Creates a base-64 encoded ASCII string from a string of binary data.
-
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
-
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
-
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
-
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
-
Starts the process of fetching a resource from the network.
-
{{domxref("EventTarget.removeEventListener")}}
-
Removes an event listener from the window.
-
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
-
Schedules a function to execute every time a given number of milliseconds elapses.
-
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
-
Schedules a function to execute in a given amount of time.
-
- -

Event handlers

- -

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

- -

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.

- -
-

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

-
- -
-
{{domxref("GlobalEventHandlers.onabort")}}
-
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
-
{{domxref("WindowEventHandlers.onafterprint")}}
-
Called when the print dialog box is closed. See {{event("afterprint")}} event.
-
{{domxref("WindowEventHandlers.onbeforeprint")}}
-
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
-
{{domxref("Window.onbeforeinstallprompt")}}
-
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
-
{{domxref("WindowEventHandlers.onbeforeunload")}}
-
An event handler property for before-unload events on the window.
-
{{domxref("GlobalEventHandlers.onblur")}}
-
Called after the window loses focus, such as due to a popup.
-
{{domxref("GlobalEventHandlers.onchange")}}
-
An event handler property for change events on the window.
-
{{domxref("GlobalEventHandlers.onclick")}}
-
Called after the ANY mouse button is pressed & released
-
{{domxref("GlobalEventHandlers.ondblclick")}}
-
Called when a double click is made with ANY mouse button.
-
{{domxref("GlobalEventHandlers.onclose")}}
-
Called after the window is closed
-
{{domxref("GlobalEventHandlers.oncontextmenu")}}
-
Called when the RIGHT mouse button is pressed
-
{{domxref("Window.ondevicelight")}}
-
An event handler property for any ambient light levels changes
-
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
-
Called if accelerometer detects a change (For mobile devices)
-
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
-
Called when the orientation is changed (For mobile devices)
-
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
-
An event handler property for any device orientation changes.
-
{{domxref("Window.ondeviceproximity")}}
-
An event handler property for device proximity event
-
{{domxref("GlobalEventHandlers.onerror")}}
-
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
-
{{domxref("GlobalEventHandlers.onfocus")}}
-
Called after the window receives or regains focus. See {{event("focus")}} events.
-
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
-
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
-
{{domxref("Window.onappinstalled")}}
-
Called when the page is installed as a webapp. See {{event('appinstalled')}} event.
-
{{domxref("Window.oninput")}}
-
Called when the value of an <input> element changes
-
{{domxref("GlobalEventHandlers.onkeydown")}}
-
Called when you begin pressing ANY key. See {{event("keydown")}} event.
-
{{domxref("GlobalEventHandlers.onkeypress")}}
-
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
-
{{domxref("GlobalEventHandlers.onkeyup")}}
-
Called when you finish releasing ANY key. See {{event("keyup")}} event.
-
{{domxref("WindowEventHandlers.onlanguagechange")}}
-
An event handler property for {{event("languagechange")}} events on the window.
-
{{domxref("GlobalEventHandlers.onload")}}
-
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
-
{{domxref("WindowEventHandlers.onmessage")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmousedown")}}
-
Called when ANY mouse button is pressed.
-
{{domxref("GlobalEventHandlers.onmousemove")}}
-
Called continously when the mouse is moved inside the window.
-
{{domxref("GlobalEventHandlers.onmouseout")}}
-
Called when the pointer leaves the window.
-
{{domxref("GlobalEventHandlers.onmouseover")}}
-
Called when the pointer enters the window
-
{{domxref("GlobalEventHandlers.onmouseup")}}
-
Called when ANY mouse button is released
-
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
-
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
-
{{domxref("WindowEventHandlers.onoffline")}}
-
Called when network connection is lost. See {{event("offline")}} event.
-
{{domxref("WindowEventHandlers.ononline")}}
-
Called when network connection is established. See {{event("online")}} event.
-
{{domxref("WindowEventHandlers.onpagehide")}}
-
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
-
{{domxref("WindowEventHandlers.onpageshow")}}
-
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
-
{{domxref("Window.onpaint")}}
-
An event handler property for paint events on the window.
-
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
-
Called when a back putton is pressed.
-
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
-
An event handler for handled {{jsxref("Promise")}} rejection events.
-
{{domxref("GlobalEventHandlers.onreset")}}
-
Called when a form is reset
-
{{domxref("GlobalEventHandlers.onresize")}}
-
Called continuously as you are resizing the window.
-
{{domxref("GlobalEventHandlers.onscroll")}}
-
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
-
{{domxref("GlobalEventHandlers.onwheel")}}
-
Called when the mouse wheel is rotated around any axis
-
{{domxref("GlobalEventHandlers.onselect")}}
-
Called after text in an input field is selected
-
{{domxref("GlobalEventHandlers.onselectionchange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
-
{{domxref("WindowEventHandlers.onstorage")}}
-
Called when there is a change in session storage or local storage. See {{event("storage")}} event
-
{{domxref("GlobalEventHandlers.onsubmit")}}
-
Called when a form is submitted
-
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
-
An event handler for unhandled {{jsxref("Promise")}} rejection events.
-
{{domxref("WindowEventHandlers.onunload")}}
-
Called when the user navigates away from the page.
-
{{domxref("Window.onuserproximity")}}
-
An event handler property for user proximity events.
-
{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}
-
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
-
{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}
-
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
-
{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}
-
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).
-
- -

Constructors

- -

See also the DOM Interfaces.

- -
-
{{domxref("Window.ConstantSourceNode")}}
-
Creates an instance of {{domxref("ConstantSourceNode")}}
-
{{domxref("Window.DOMParser")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.GeckoActiveXObject")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Image")}}
-
Used for creating an {{domxref("HTMLImageElement")}}.
-
{{domxref("Option")}}
-
Used for creating an {{domxref("HTMLOptionElement")}}
-
{{domxref("Window.QueryInterface")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.XMLSerializer")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Worker")}}
-
Used for creating a Web worker
-
{{domxref("Window.XPCNativeWrapper")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.XPCSafeJSObjectWrapper")}}
-
{{todo("NeedsContents")}}
-
- -

Interfaces

- -

See DOM Reference

- -

See also

- - diff --git a/files/tr/web/api/window/opener/index.html b/files/tr/web/api/window/opener/index.html deleted file mode 100644 index 5345325459..0000000000 --- a/files/tr/web/api/window/opener/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Window.opener -slug: Web/API/Window/opener -tags: - - Pencere -translation_of: Web/API/Window/opener ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("Window")}} arabiriminin opener özelliği, {{domxref("Window.open", "open()")}} kullanarak bu pencereyi açmış olan diğer pencereye bir referans döndürür.

- -

Başka bir deyişle, eğer A penceresi B penceresini açmışsa, B.opener geriye A döndürür.

- -

Sözdizimi

- -
openerWindow = window.opener;
-
- -

Değeri

- -

Şimdiki pencereyi açmak için  open() metodunu çağırmış olan pencereye referans veren bir {{domxref("Window")}} , ya da bu pencere başka bir pencere tarafından bağlantılı olarak açılmadı veya yaratılmadıysa null 'dır.

- -

Bazı tarayıcılarda, kaynak olan {{HTMLElement("a")}} öğesindeki bir rel="noopener" özniteliği, window.opener referansının ayarlanmasını engeller, bu durumda bu özellik null döndürür.

- -

Örnek

- -
if (window.opener != indexWin) {
-  referToTop(window.opener);
-}
-
- -

Kullanım notları

- -

Bir pencere başka bir pencereden açıldığında ({{domxref("Window.open")}} metodu veya {{htmlattrxref("target", "a")}} özniteliği belirtilmiş olan bir bağlantı kullanılarak), window.opener ile bu ilk pencereye işaret eden bir referans tutar. Eğer şimdiki pencereyi açan bir pencere yoksa, bu metot null döndürür.

- -

Tarayıcı uyumluluğu

- - - -

{{Compat("api.Window.opener")}}

diff --git a/files/tr/web/css/@import/index.html b/files/tr/web/css/@import/index.html deleted file mode 100644 index 130d0b186d..0000000000 --- a/files/tr/web/css/@import/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: '@import' -slug: Web/CSS/@import -translation_of: Web/CSS/@import ---- -
{{CSSRef}}
- -

CSS @-kurallarıdan olan @import diğer stil dosyalarından stil kurallarını mevcut sayfamıza dahil etmek için kullanılır. These rules must precede all other types of rules, except {{cssxref("@charset")}} rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

- -
@import url("fineprint.css") print;
-@import url("bluish.css") projection, tv;
-@import 'custom.css';
-@import url("chrome://communicator/skin/");
-@import "common.css" screen, projection;
-@import url('landscape.css') screen and (orientation:landscape);
- -

So that {{glossary("user agent")}}s can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media queries after the URL. In the absence of any media query, the import is unconditional. Specifying all for the medium has the same effect.

- -

Syntax

- -
@import url;
-@import url list-of-media-queries;
-
- -

where:

- -
-
url
-
Is a {{cssxref("<string>")}} or a {{cssxref("<url>")}} representing the location of the resource to import. The URL may be absolute or relative. Note that the URL need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. chrome://communicator/skin/). See here for more information.
-
list-of-media-queries
-
Is a comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource.
-
- -

Formal syntax

- -{{csssyntax}} - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}} 
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}Extended the syntax to support any media query and not only simple media types.
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}Added support for {{cssxref("<string>")}} to denote the url of a stylesheet,
- and requirement to insert the @import rule at the beginning of the CSS document.
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.5{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.5{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/tr/web/css/_colon_active/index.html b/files/tr/web/css/_colon_active/index.html deleted file mode 100644 index fe5563e036..0000000000 --- a/files/tr/web/css/_colon_active/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: ':active' -slug: 'Web/CSS/:active' -translation_of: 'Web/CSS/:active' ---- -
{{CSSRef}}
- -

:active CSS pseudo-class'ı kullanıcı tarafından o an kullanılan (buton gibi) elementleri temsil eder. Bu seçicinin etkinliği, fare ile gezinirken, sol tuşa bastığınızda aktifleşir ve bıraktığınızda son bulur.  :active seçicisi genellikle {{HTMLElement("a")}} ve {{HTMLElement("button")}} buton elementleri için kullanılmaktadır ancak diğer elementler için de tercih edilebilir.

- -
/* Aktif edilmiş bir <a> elementinin seçicisidir. */
-a:active {
-  color: red;
-}
- -

:active pseudo-class'ı ({{cssxref(":link")}}, {{cssxref(":hover")}}, veya {{cssxref(":visited")}}) değerleri tanımlı ise aktif olmayacaktır. Linkleri uygun bir şekilde stillendirebilmek için,  :active kuralını linklerle alakalı tüm kurallar arasında LVHA order olarak bilinen sırada, en sonda kullanın.
-
- LVHA-order: :link — :visited — :hover — :active.

- -
Note: On systems with multi-button mice, CSS3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.
- -

Syntax

- -{{csssyntax}} - -

Example

- -
-

HTML

- -
<a href="#">This link will turn lime while you click on it.</a>
-
- -

CSS

- -
a:link { color: blue; }          /* Unvisited links */
-a:visited { color: purple; }     /* Visited links */
-a:hover { background: yellow; }  /* User hovers */
-a:active { color: lime; }        /* Active links */
-
- -

Result

- -
{{EmbedLiveSample('Example')}}
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("css.selectors.active")}}

-
- -

See also

- -
    -
  • Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}
    • -
diff --git a/files/tr/web/css/_colon_first-of-type/index.html b/files/tr/web/css/_colon_first-of-type/index.html deleted file mode 100644 index ad4ee056d6..0000000000 --- a/files/tr/web/css/_colon_first-of-type/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: ':first-of-type' -slug: 'Web/CSS/:first-of-type' -translation_of: 'Web/CSS/:first-of-type' ---- -
{{CSSRef}}
- -

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

- -
/* Selects the first <p> to appear inside a parent element
-   regardless of its position inside the siblings */
-p:first-of-type {
-  color: red;
-}
- -
-

Not: Orijinal tanımında seçili elemanın bir üst seçicisi (parent) olması gerekliliği vardı. Seçiciler Seviye 4'ten itibaren artık gerekmiyor.

-
- -

Sözdizimi

- -{{csssyntax}} - -

Örnekler

- -

Örnek 1: Temel ilk paragraf

- -

Aşağıdaki HTML'i baz alalım:

- -
<h2>Başlık</h2>
-
-<p>Paragraf</p>
-
-<p>Paragraf</p>
- -

Ve CSS:

- -
p:first-of-type {
-  color: red;
-}
- -

Bu bize aşağıdaki sonucu verecek — sadece body içerisinde görünecek ilk paragraf elemanı olarak görünecek ilk paragrafın rengini kırmızı yapar:

- -

{{EmbedLiveSample('Example_1_Simple_first_paragraph')}}

- -

Örnek 2: Evrensel seçici olarak..

- -

This example shows how the universal selector is assumed when no simple selector is written.

- -

Önce biraz HTML:

- -
<div>
-  <span>Bu ilk `span`!</span>
-  <span>Ama bu `span` değil.</span>
-  <span>Bu <em>element içinde `em`</em>!</span>
-  <span>Ve bu da <span>element içinde `span`</span>!</span>
-  <b>Bu `b` niteliği!</b>
-  <span>This final `span` does not.</span>
-</div>
-
- -

Şimdi de CSS:

- -
div :first-of-type {
-  background-color: lime;
-}
- -

Sonuç şöyle görünecek:

- -

{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}

- -

Özellikler

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Initial definition.
- -

Tarayıcı uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Temel destek2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
-
- -

Şunlar da var

- -
    -
  • {{Cssxref(":first-child")}}
    • -
  • {{Cssxref(":last-of-type")}}
    • -
  • {{Cssxref(":nth-of-type")}}
    • -
diff --git a/files/tr/web/css/_colon_focus/index.html b/files/tr/web/css/_colon_focus/index.html deleted file mode 100644 index 05ebc35ead..0000000000 --- a/files/tr/web/css/_colon_focus/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':focus' -slug: 'Web/CSS/:focus' -tags: - - ':focus' - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:focus' ---- -
{{CSSRef}}
- -

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

- -
/* Selects any <input> when focused */
-input:focus {
-  color: red;
-}
- -
-

Note: This pseudo-class applies only to the focused element itself. Use {{CSSxRef(":focus-within")}} if you want to select an element that contains a focused element.

-
- -

Syntax

- -{{CSSSyntax}} - -

Examples

- -

HTML

- -
<input class="red-input" value="I'll be red when focused."><br>
-<input class="blue-input" value="I'll be blue when focused.">
- -

CSS

- -
.red-input:focus {
-  background: yellow;
-  color: red;
-}
-
-.blue-input:focus {
-  background: yellow;
-  color: blue;
-}
- -

Result

- -

{{EmbedLiveSample("Examples")}}

- -

Accessibility concerns

- -

Make sure the visual focus indicator can be seen by people with low vision.  This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

- - - -

:focus { outline: none; }

- -

Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}Defines HTML-specific semantics.
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}No change.
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}No change.
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("css.selectors.focus")}}

-
- -

See also

- -
    -
  • {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef(":focus-within")}}
    • -
diff --git a/files/tr/web/css/_colon_last-child/index.html b/files/tr/web/css/_colon_last-child/index.html deleted file mode 100644 index b068bb7de8..0000000000 --- a/files/tr/web/css/_colon_last-child/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ':last-child' -slug: 'Web/CSS/:last-child' -tags: - - CSS S - - CSS Sozde-sınıflar - - Yerleşim -translation_of: 'Web/CSS/:last-child' ---- -
{{CSSRef}}
- -

Özet

- -

:last-child CSS pseudo-class bir grup çocuğun sonuncusunu temsil eder.

- -
-

Kullanım Notu: İlk tanımda belirtildiği üzere seçilen elemanın atası olması gerekiyordu. CSS4'le beraber artık gerekmiyor.

-
- -

Yazım Şekli

- -{{csssyntax}} - -

Örnek

- -

HTML İçerik

- -
<ul>
-  <li>Bu kısım yeşermedi</li>
-  <li>Bu da yeşermedi.</li>
-  <li>Burası yeşerdi :)</li>
-</ul>
- -

CSS İçerik

- -
li:last-child {
-  background-color: green;
-}
- -

{{EmbedLiveSample('Example', '100%', 100)}}

- -

Detaylar

- - - - - - - - - - - - - - - - - - - - - -
DetayDurumYorum
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Eşleşen elemanların atası olması zorunlu değil.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}İlk tanımlama.
- -

Tarayıcı Uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel Seviyede Destek1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.0{{CompatOpera(9.5)}}3.2
Ata zorunlu değil{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Temel Seviyede Destek{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.0{{CompatOperaMobile(10)}}3.2
Ata zorunlu değil{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
-
- -

Ayrıca Bakınız

- -
    -
  • {{cssxref(":last-of-type")}}
    • -
  • {{cssxref(":first-child")}}
    • -
  • {{cssxref(":nth-child")}}
    • -
diff --git a/files/tr/web/css/_colon_link/index.html b/files/tr/web/css/_colon_link/index.html deleted file mode 100644 index d9cd1502eb..0000000000 --- a/files/tr/web/css/_colon_link/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: ':link' -slug: 'Web/CSS/:link' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:link' ---- -
{{ CSSRef }}
- -

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited {{HTMLElement("a")}}, {{HTMLElement("area")}}, or {{HTMLElement("link")}} element that has an href attribute.

- -
/* Selects any <a> that has not been visited yet */
-a:link {
-  color: red;
-}
- -

Styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class ({{cssxref(":active")}}, {{cssxref(":hover")}}, or {{cssxref(":visited")}}) that has at least equal specificity. To style links appropriately, put the :link rule before all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.

- -
-

Note: Use {{cssxref(":any-link")}} to select an element independent of whether it has been visited or not.

-
- -

Syntax

- -{{csssyntax}} - -

Examples

- -

By default, most browsers apply a special {{cssxref("color")}} value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the {{cssxref("background-color")}} values are likely to remain, as most browsers do not set that property on visited links by default.

- -

HTML

- -
<a href="#ordinary-target">This is an ordinary link.</a><br>
-<a href="">You've already visited this link.</a><br>
-<a>Placeholder link (won't get styled)</a>
-
- -

CSS

- -
a:link {
-  background-color: gold;
-  color: green;
-}
-
- -

Result

- -

{{EmbedLiveSample("Examples")}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }}
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}No change.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Lift the restriction to only apply it for {{ HTMLElement("a") }} element.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("css.selectors.link")}}

-
- -

See also

- -
    -
  • Link-related pseudo-classes: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}
    • -
diff --git a/files/tr/web/css/_colon_not/index.html b/files/tr/web/css/_colon_not/index.html deleted file mode 100644 index e4eb3e5d93..0000000000 --- a/files/tr/web/css/_colon_not/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: 'CSS :not() Seçicisi' -slug: 'Web/CSS/:not' -tags: - - ':not() seçicisi' - - CSS - - CSS Pseudo-class - - Web -translation_of: 'Web/CSS/:not' ---- -
{{CSSRef}}
- -

Özet

- -

Olumsuzluk CSS pseudo-class seçicisi, :not(X), seçilmek istenen öğelerde bulunması istenmeyen sınıfları, kimlik değerleri vb CSS seçicilerini tanımlamak için kullanılır. Girdi olarak X yerine girilen tanımlamalara sahip olmayan öğeleri sayfa içerisinde uygular.

- -

Fakat X ifadesi içerisinde başka olumsuzluk özelliği barındırmamalıdır.

- -
Notlar: - -
    -
  • Gereksiz seçiciler bu pseudo-class seçicisi ile yazılabilir. Örneğin :not(*) ifadesi "hiçbir şey olmayan" tüm elemanlarla eşleşmesi gerektiği için boş gelir ve bu seçicideki kurallar asla uygulanamaz.
    • -
  • It is possible to rewrite other rules. E.g., foo:not(bar) will match the same element as the simpler foo. Nevertheless the specificity of the first one is higher.
    • -
  • :not(foo) ifadesi {{HTMLElement("html")}} ve {{HTMLElement("body")}}  içerisindeki <foo></foo> olmayan bütün elementleri seçer. .
    • -
  • This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, body :not(table) a will still apply to links inside of a table, since {{HTMLElement("tr")}} will match with the :not() part of the selector.
    • -
-
- -

Syntax

- -{{csssyntax}} - -

Örnek

- -

HTML

- -
<p>Bu bir paragraf.</p>
-<p class="classy">İşte sihir burada!</p>
-<div>Burası yeşil olacak </div>
- -

CSS

- -
.classy { text-shadow: 1px 1px 2px gold; }
-p:not(.classy) { color: red; }
-body :not(p) { color: green; }
- -

Sonuç

- -

{{EmbedLiveSample('Example','100%',160)}}

- -

Özelleştirmeler

- - - - - - - - - - - - - - - - - - - - - -
ÖzelleştirmeDurumAçıklama
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Çeşitli karışık seçiciler için ifadeyi genişletir.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Standart Tanımlama.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel Özellikler1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.09.53.2
Gelişmiş Çzellikler{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Temel Özellikler2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.010.03.2
Gelişmiş Çzellikler{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
diff --git a/files/tr/web/css/_colon_root/index.html b/files/tr/web/css/_colon_root/index.html deleted file mode 100644 index de77ef2a6a..0000000000 --- a/files/tr/web/css/_colon_root/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ':root' -slug: 'Web/CSS/:root' -tags: - - CSS -translation_of: 'Web/CSS/:root' ---- -
{{CSSRef}}
- -

:root CSS sözde-sınıfı dökümanda bulunan kök elemanı yerine geçer (yani onu temel alır). Örneğin HTML'de :root dökümanı oluşturan {{HTMLElement("html")}} öğesini temsil eder ve html seçicisi ile aynıdır, ancak önceliği daha yüksektir.

- -
/* Dökümandaki kök elemanı seçer:
-   Bu HTML'de <html> oluyor. */
-:root {
-  background: royalblue;
-}
- -

Sözdizimi

- -{{csssyntax}} - -

Örnek

- -

:root global CSS değişkenleri tanımlarken kullanışlı olabilir:

- -
:root {
-  --ana-renk: green;
-  --paragraf-boslugu: 5px 0;
-}
-
- -

Tanımlamalar

- - - - - - - - - - - - - - - - - - - - - -
TanımlamaDurumAçıklama
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Değişiklik yok.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Başlangıç ​​tanımı.
- -

Tarayıcı Uyumluluğu

- - - -

{{Compat("css.selectors.root")}}

diff --git a/files/tr/web/css/_doublecolon_first-letter/index.html b/files/tr/web/css/_doublecolon_first-letter/index.html deleted file mode 100644 index 8cf9b5be47..0000000000 --- a/files/tr/web/css/_doublecolon_first-letter/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: '::first-letter (:first-letter)' -slug: 'Web/CSS/::first-letter' -translation_of: 'Web/CSS/::first-letter' ---- -
{{CSSRef}}
- -

 ::first-letter CSS sözde-elementi bir blok seviyeli elementin ilk satırındaki ilk harfe stil uygulamak için kullanılır, tabii o harften önce başka bir içerik gelmiyorsa (örneğin resimler ya da satır içi tablolar).

- -
/* Bir <p> elementinin ilk harfini seçiyoruz. */
-p::first-letter {
-  font-size: 130%;
-}
- -

Bir elementin ilk harfini belirlemek her zaman kolay değildir:

- -
    -
  • İlk harften hemen önce veya hemen sonra gelen noktalama işaretleri de harfle birlikte kancalanır. Noktalama işaretleri; open (Ps), close (Pe), initial quote (Pi), final quote (Pf), ve other punctuation (Po) sınıflarında tanımlanmış tüm Unicode karakterlerini kapsar.
    • -
  • Bazı dillerde, tek bir ses çıkaran iki harfli kalıplar vardır ve bunlar her zaman beraber büyük olarak yazılırlar, örneğin Flemenkçedeki IJ gibi. Bu durumlarda, kalıbı oluşturan iki harfin de ::first-letter sözde elementi tarafından kancalanması gerekir. (Tarayıcı desteği bu konuda yetersizdir; aşağıdaki tarayıcı uyumluluk tablosuna göz atın.)
    • -
  • {{ cssxref("::before") }} sözde-elementi ve {{ cssxref("content") }} niteliğinin birlikte kullanılması hâlinde bir elementin başlangıcına yeni bir metin eklenebilir. Bu durumda, ::first-letter oluşturulan bu içeriğin ilk harfini kancalayacaktır.
    • -
- -
-

CSS3 ile birlikte, sözde-sınıfları sözde-elementlerden ayırmak amacıyla iki noktalı ::first-letter gösterimi tanıtıldı. Tarayıcılar, CSS2 ile tanıtılan, :first-letter yazımını da kabul ediyorlar.

-
- -

İzin verilen nitelikler

- -

::first-letter pseudo-elementi ile birlikte CSS niteliklerinin yalnızca küçük bir bölümü kullanılabilir:

- -
    -
  • Bütün font nitelikleri : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} ve {{ Cssxref("font-family") }}
    • -
  • Bütün arka plan(background) nitelikleri : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, ve {{cssxref("background-blend-mode")}}
    • -
  • Bütün margin nitelikleri: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}
    • -
  • Bütün padding nitelikleri: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}
    • -
  • Bütün sınır(border) nitelikleri: kısa yoldan {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, ve uzun yoldan yazılan nitelikler.
    • -
  • {{ cssxref("color") }} niteliği
    • -
  • {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (uygun olduğu vakit), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (eğer float niteliğine none değeri atanmışsa) CSS nitelikleri
    • -
- -

Söz dizimi(Syntax)

- -{{csssyntax}} - -

Örnekler

- -

Basit drop-cap(Satırdan taşan büyük harf)

- -

Bu örneğimizde <h2> elementinden hemen sonra gelen paragrafın ilk harfine basit bir drop-cap efekti uygulamak için ::first-letter sözde elementini kullanacağız

- -

HTML

- -
<h2>My heading</h2>
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
-<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
- -

CSS

- -
p {
-  width: 500px;
-  line-height: 1.5;
-}
-
-h2 + p::first-letter {
-  color: white;
-  background-color: black;
-  border-radius: 2px;
-  box-shadow: 3px 3px 0 red;
-  font-size: 250%;
-  padding: 6px 3px;
-  margin-right: 6px;
-  float: left;
-}
- -

Sonuç

- -

{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}

- -

Özel noktalama işaretleri ve Latin alfabesinde bulunmayan karakterler üzerindeki etki

- -

Aşağıdaki örnek, ::first-letter sözde elementinin özel noktalama işaretleri ve Latin alfabesinde olmayan karakterler üzerindeki etkisini gösteriyor. 

- -

HTML

- -
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
-<p>-The beginning of a special punctuation mark.</p>
-<p>_The beginning of a special punctuation mark.</p>
-<p>"The beginning of a special punctuation mark.</p>
-<p>'The beginning of a special punctuation mark.</p>
-<p>*The beginning of a special punctuation mark.</p>
-<p>#The beginning of a special punctuation mark.</p>
-<p>「特殊的汉字标点符号开头。</p>
-<p>《特殊的汉字标点符号开头。</p>
-<p>“特殊的汉字标点符号开头。</p>
- -

CSS

- -
p::first-letter {
-  color: red;
-  font-size: 150%;
-}
- -

Sonuç

- -

{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Generalizes allowed properties to typesetting, text decoration, inline layout properties, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Allows the use of {{cssxref("text-shadow")}} with ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph IJ).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}No change.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Initial definition, using the one-colon syntax.
- -

Tarayıcı Uyumluluğu

- -
- - -

{{Compat("css.selectors.first-letter")}}

-
- -

Ayrıca göz at

- -
    -
  • {{cssxref("::first-line")}}
    • -
diff --git a/files/tr/web/css/background-color/index.html b/files/tr/web/css/background-color/index.html deleted file mode 100644 index a8e0b081d1..0000000000 --- a/files/tr/web/css/background-color/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Arka plan rengi -slug: Web/CSS/background-color -tags: - - CSS - - CSS arka plan - - CSS özellikler - - arka plan rengi -translation_of: Web/CSS/background-color ---- -
{{CSSRef}}
- -

The background-color CSS özellik, bir ögenin arkaplan rengini ayarlar.

- -
{{EmbedInteractiveExample("pages/css/background-color.html")}}
- - - -

Syntax

- -
/* Anahtar Kelime Değerler */
-background-color: red;
-background-color: indigo;
-
-/* Onaltılık Değer */
-background-color: #bbff00;    /* Tamamen opak */
-background-color: #11ffee00;  /* Tamamen şeffaf */
-background-color: #11ffeeff;  /* Tamamen opak */
-
-/* RGB Değer */
-background-color: rgb(255, 255, 128);        /* Tamamen opak */
-background-color: rgba(117, 190, 218, 0.5);  /* 50% şeffaf */
-
-/* HSL Değer */
-background-color: hsl(50, 33%, 25%);         /* Tamamen opak */
-background-color: hsla(50, 33%, 25%, 0.75);  /* 75% şeffaf */
-
-/* Özel Anahtar  Değerler */
-background-color: currentcolor;
-background-color: transparent;
-
-/* Evrensel values */
-background-color: inherit;
-background-color: initial;
-background-color: unset;
- -

arka plan rengi özellik tek olarak belirtilir <renk>  değer.

- -

Değerler

- -
-
{{cssxref("<renk>")}}
-
Arka planın tek tip rengi. Herhangi bir belirtilen  {{cssxref("arka plan - resmi")}} arkasından işlenir , Rengin görüntüdeki herhangi bir saydamlıkta görünmeye devam etmesine rağmen..
-
- -

Resmi sözdizimi

- -{{csssyntax}} - -

Örnekler

- -

HTML

- -
<div class="exampleone">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="exampletwo">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="examplethree">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
- -

CSS

- -
.exampleone {
-  background-color: teal;
-  color: white;
-}
-
-.exampletwo {
-  background-color: rgb(153,102,153);
-  color: rgb(255,255,204);
-}
-
-.examplethree {
-  background-color: #777799;
-  color: #FFFFFF;
-}
-
- -

Sonuç

- -

{{EmbedLiveSample("Examples", 200, 150)}}

- -

Erişilebilirlik endişeleri

- -

Arka plan rengi ile üzerine yerleştirilen metnin rengi arasındaki kontrast oranının, düşük görme koşullarına sahip kişilerin sayfanın içeriğini okuyabilecek kadar yüksek olmasını sağlamak önemlidir..

- -

Renk kontrast oranı, metnin parlaklığı ve arka plan rengi değerlerinin karşılaştırılmasıyla belirlenir. Güncel karşılamak için Web Content Accessibility Guidelines (WCAG), metin içeriği için 4,5: 1, başlıklar gibi daha büyük metinler için ise 3: 1 oranında bir oran gereklidir. Büyük metin 18.66 piksel ve kalın veya daha büyük veya 24 piksel veya daha büyük olarak tanımlanır.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}Initial definition
- -
{{cssinfo}}
- -

Browser compatibility

- - - -

{{Compat("css.properties.background-color")}}

- -

See also

- -
    -
  • Multiple backgrounds
    • -
  • The {{cssxref("<color>")}} data type
    • -
  • Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • -
  • Applying color to HTML elements using CSS
    • -
diff --git a/files/tr/web/css/background/index.html b/files/tr/web/css/background/index.html deleted file mode 100644 index 8bfef1e9fb..0000000000 --- a/files/tr/web/css/background/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: background -slug: Web/CSS/background -translation_of: Web/CSS/background ---- -
{{CSSRef("CSS Background")}}
- -

background kısayolu arka plan stillerini - örneğin renk, imaj, kaynak ve boyut ya da tekrarlama metodu- tek seferde vermeye yarayan bir CSS özelliğidir.

- -
{{EmbedInteractiveExample("pages/css/background.html")}}
- - - -

Bu özellik aşağıdaki stilleri tek satırda vermeyi sağlayan bir  shorthand 'dir: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, ve {{cssxref("background-attachment")}}.

- -

Diğer tüm shorthand özelliklerinde olduğu gibi eklenmemiş tüm stiller ilk değerlerini almaya devam eder.

- -

Syntax

- -
/* Using a <background-color> */
-background: green;
-
-/* Using a <bg-image> and <repeat-style> */
-background: url("test.jpg") repeat-y;
-
-/* Using a <box> and <background-color> */
-background: border-box red;
-
-/* A single image, centered and scaled */
-background: no-repeat center/80% url("../img/image.png");
-
- -

background özelliği bir ya da daha fazla arka plan katmanının virgülle ayrılmış hali olarak tanımlanır.

- -

Her katmanın sentaksı aşağıdaki gibidir:

- -
    -
  • Her katman aşağıdaki değerlerden herhangi birinin sıfır ya da bir tekrarını içerebilir: - -
    • -
  •  <bg-size> değeri sadece <position> değerinden sonra eklenebilir ve '/' karakteriyle ayrılır, örneğin: "center/80%".
    • -
  •  <box> değeri hiç eklenmeyebilir ya da bir ya da iki kere eklebilir. Eğer bir kere eklendiyse hem {{cssxref("background-origin")}} hem {{cssxref("background-clip")}} ayarlar. Eğer iki kere eklendiyse, ilk eklenen {{cssxref("background-origin")}} özelliğini ayarlar, ikinci eklenen ise {{cssxref("background-clip")}} ayarlar.
    • -
  •  <background-color> değeri sadece son katmana eklebilir.
    • -
- -

Values(Değerler)

- -
-
<attachment>
-
See {{cssxref("background-attachment")}}
-
<box>
-
See {{cssxref("background-clip")}} and {{cssxref("background-origin")}}
-
<background-color>
-
See {{cssxref("background-color")}}
-
<bg-image>
-
See {{Cssxref("background-image")}}
-
<position>
-
See {{cssxref("background-position")}}
-
<repeat-style>
-
See {{cssxref("background-repeat")}}
-
<bg-size>
-
See {{cssxref("background-size")}}.
-
- -

Formal syntax

- -{{csssyntax}} - -

Örnekler

- -

HTML

- -
<p class="topbanner">
-  Starry sky<br/>
-  Twinkle twinkle<br/>
-  Starry sky
-</p>
-<p class="warning">Here is a paragraph<p>
- -

CSS

- -
.warning {
-  background: pink;
-}
-
-.topbanner {
-  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
-}
-
- -

Sonuç

- -

{{EmbedLiveSample("Examples")}}

- -

Accessibility concerns

- -

Assistive technology cannot parse background images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}No significant changes
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Initial definition
- -

{{cssinfo}}

- -

Browser compatibility

- - - -

{{Compat("css.properties.background")}}

- -

See also

- - diff --git a/files/tr/web/css/class_selectors/index.html b/files/tr/web/css/class_selectors/index.html deleted file mode 100644 index 7db7988ab8..0000000000 --- a/files/tr/web/css/class_selectors/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Sınıf seçicileri -slug: Web/CSS/Class_selectors -tags: - - CSS - - CSS Referans - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Class_selectors -original_slug: Web/CSS/Sınıf_seçicileri ---- -
{{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_background_and_borders/box-shadow_generator/index.html b/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 0e3e4b1b25..0000000000 --- a/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2882 +0,0 @@ ---- -title: Box-shadow Oluşturucu -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -tags: - - box-shadow oluşturucu -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -

Bu araç {{cssxref("box-shadow")}}  CSS yapısı oluşturarak, CSS objelerinize box-shadow efekti vermenizi sağlar.

- - - -
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
- -

Related Tool: Box Shadow CSS Generator

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 deleted file mode 100644 index f93bbe1292..0000000000 --- a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Kutu modeli -slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -tags: - - CSS - - Kutu Modeli -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -original_slug: Web/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

- -
    -
  • CSS Reference
    • -
  • {{ CSS_key_concepts() }}
    • -
  • İlgili CSS özellikleri: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}
    • -
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 deleted file mode 100644 index bc33ddb4dd..0000000000 --- a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: CSS Sayaçlarını Kullanmak -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - CSS - - CSS Counter - - CSS Sayaçlar - - MDN - - Sayaçlar -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/Guide/CSS/Sayaçlar ---- -

{{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 deleted file mode 100644 index af5308fe63..0000000000 --- a/files/tr/web/css/css_selectors/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: CSS seçiciler -slug: Web/CSS/CSS_Selectors -tags: - - Başlangıç - - CSS - - Nitelik - - Sozde - - id - - oğrenin - - seçiciler - - sınıf -translation_of: Web/CSS/CSS_Selectors -original_slug: Öğren/CSS/CSS_yapi_taslari/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/display/index.html b/files/tr/web/css/display/index.html deleted file mode 100644 index 2b26ff1cd5..0000000000 --- a/files/tr/web/css/display/index.html +++ /dev/null @@ -1,446 +0,0 @@ ---- -title: display -slug: Web/CSS/display -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/display ---- -
{{CSSRef}}
- -

Özet

- -

display özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan display değeri, daha önceden belirlenmiş HTML spesifikasyonlarından ya da tarayıcı/kullanıcı varsayılan stil şablonundan alınır. XML'de varsayılan display değeri inline'dır.

- -

Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, none değeri bir elementi görüntülemeye kapatır, bu değeri kullandığınızda, bütün alt elemanlar da görüntülenmezler. Belge, o eleman yokmuş gibi görüntülenir.

- -

{{cssinfo}}

- -

Sözdizimi kuralları

- -
display: none;
-display: inline;
-display: block;
-display: inline-block;
-display: contents;
-display: list-item;
-display: inline-list-item;
-display: table;
-display: inline-table;
-display: table-cell;
-display: table-column;
-display: table-column-group;
-display: table-footer-group;
-display: table-header-group;
-display: table-row;
-display: table-row-group;
-display: table-caption;
-display: flex;
-display: inline-flex;
-display: grid;
-display: inline-grid;
-display: ruby;
-display: ruby-base;
-display: ruby-text;
-display: ruby-base-container;
-display: ruby-text-container;
-display: run-in;
-
-/* Global values */
-display: inherit;
-display: initial;
-display: unset;
-
- -

Değerler

- -

display-value bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.

- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Değer kümesiDeğerTanım
Basic values (CSS 1)none -

Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.

- -

Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız {{cssxref("visibility")}} özelliğine gözatın.

-
inlinebir veya daha fazla satıriçi kutusu oluşturur.
blockblok element kutusu oluşturur.
list-itemElement içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.
Gelişletilmiş değerler (CSS 2.1)inline-blockinline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.
Table model değerler (CSS 2.1)inline-tableinline-table  değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir.  {{HTMLElement("table")}} HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.
tableBu elementler block {{HTMLElement("table")}} gibi davranır.
table-captionBu elementler {{HTMLElement("caption")}} HTML elementler gibi davranır.
table-cellBu elementler {{HTMLElement("td")}} gibi davranır..
table-columnBu elementler {{HTMLElement("col")}} gibi davranır.
table-column-groupBu elementler {{HTMLElement("colgroup")}} gibi davranır.
table-footer-groupBu elementler {{HTMLElement("tfoot")}} gibi davranır.
table-header-groupBu elementler {{HTMLElement("thead")}} gibi davranır.
table-rowBu elementler {{HTMLElement("tr")}} gibi davranır.
table-row-groupBu elementler {{HTMLElement("tbody")}} gibi davranır.
CSS3 liste değerleri (CSS3)inline-list-itemThe inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline.
Flexbox model değerleri (CSS3)flexElement, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.
inline-flexElement inline element gibi davranır ve flexbox modeline uygun olarak görünür.
Grid box model değerleri (CSS3) {{experimental_inline}}grid -

Element, block elementi gibi davranır ve
- grid modeline uygun olarak görünür.

- -
Deneyimlenebileceği üzere, çoğu tarayıcı henüz desteklememektedir. Özellikle -moz-grid 'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid XUL layout model 'de belirtilen ve kullanmamanız gereken bir prefix'tir.
-
inline-gridElement inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.
Ruby formatting model values (CSS3){{experimental_inline}}rubyElement inline element gibi davranır ve
- içeriği ruby format modelinde kapsar {{HTMLElement("ruby")}} gibi davranır.
ruby-baseBu elementler {{HTMLElement("rb")}} gibi davranır.
ruby-textBu elementler {{HTMLElement("rt")}} gibi davranır
ruby-base-containerThese elements behave like {{HTMLElement("rbc")}} elements generated as anonymous boxes.
ruby-text-containerThese elements behave like {{HTMLElement("rtc")}} elements.
Experimental values {{experimental_inline}}run-in -
    -
  • If the run-in box contains a block box, same as block.
    • -
  • If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
    • -
  • If an inline box follows, the run-in box becomes a block box.
    • -
-
contentsThese elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
-
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

View Live Examples

- -
p.secret  { display: none }
-<p style="display:none"> invisible text </p>
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Lists', '#valdef-display-inline-list-item', 'display')}}{{Spec2('CSS3 Lists')}}Added the inline-list-item values.
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}Added the run-in and contents values.
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}Added the ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}Added the grid box model values.
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Added the flexible box model values.
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Added the table model values and inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}Initial definition. Basic values: none, block, inline, and list-item.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
none, inline and block1.0{{CompatGeckoDesktop("1.0")}}4.07.01.0 (85)
inline-block1.0{{CompatGeckoDesktop("1.9")}}5.5 [4]7.01.0 (85)
list-item1.0{{CompatGeckoDesktop("1.0")}}6.07.01.0 (85)
inline-list-item{{CompatNo}}{{CompatNo}} [6]{{CompatNo}}{{CompatNo}}{{CompatNo}}
run-in {{experimental_inline}}1.0 [5]{{CompatNo}}8.07.01.0 (85) [5]
-

4.0

- -

Removed in 32

- 		-

5.0 (532.5)

- -

Removed in 8.0

-
inline-table1.0{{CompatGeckoDesktop("1.9")}}8.07.01.0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, and table-caption1.0{{CompatGeckoDesktop("1.0")}}8.07.01.0 (85)
flex21.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("18.0")}} [1]
- {{CompatGeckoDesktop("20.0")}}		1112.506.1{{property_prefix("-webkit")}}
inline-flex21.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("18.0")}} [1]
- {{CompatGeckoDesktop("20.0")}}		1112.506.1{{property_prefix("-webkit")}}
grid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}10.0{{property_prefix("-ms")}}{{CompatUnknown}}{{CompatUnknown}}
inline-grid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}10.0{{property_prefix("-ms")}}{{CompatUnknown}}{{CompatUnknown}}
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container {{experimental_inline}}{{CompatUnknown}}{{CompatGeckoDesktop("34.0")}} [3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contents {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop("37")}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}7.0{{property_prefix("-webkit")}}
-
- -

[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Multi-line flexbox are supported since Firefox 28.

- -

[2] In Firefox 36, it the preference governing this feature was off by default.

- -

[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.

- -

[4] Natural inline elements only

- -

[5] Not before inline-elements

- -

[6] See {{bug(1105868)}}

- -

See also

- -
    -
  • {{Cssxref("visibility")}}, {{Cssxref("float")}}, {{Cssxref("position")}}
    • -
  • {{Cssxref("flex")}}
    • -
diff --git a/files/tr/web/css/font-size/index.html b/files/tr/web/css/font-size/index.html deleted file mode 100644 index 89ce88d475..0000000000 --- a/files/tr/web/css/font-size/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: font-size -slug: Web/CSS/font-size -tags: - - CSS Fontlar - - CSS özelliği - - Referans -translation_of: Web/CSS/font-size ---- -
{{CSSRef}}
- -

font-size CSS'in bir özelliği olup yazı boyutunu ayarlar. This property is also used to compute the size of em, ex, and other relative {{cssxref("<length>")}} units.

- -
{{EmbedInteractiveExample("pages/css/font-size.html")}}
- - - -

Syntax

- -
/* <absolute-size> values */
-font-size: xx-small;
-font-size: x-small;
-font-size: small;
-font-size: medium;
-font-size: large;
-font-size: x-large;
-font-size: xx-large;
-font-size: xxx-large;
-
-/* <relative-size> values */
-font-size: smaller;
-font-size: larger;
-
-/* <length> values */
-font-size: 12px;
-font-size: 0.8em;
-
-/* <percentage> values */
-font-size: 80%;
-
-/* Global values */
-font-size: inherit;
-font-size: initial;
-font-size: unset;
-
- -

The font-size property is specified in one of the following ways:

- -
    -
  • As one of the absolute-size or relative-size keywords
    • -
  • As a <length> or a <percentage>, relative to the parent element's font size
    • -
- -

Değerler

- -
-
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
-
Absolute-size keywords, based on the user's default font size (which is medium).
-
larger, smaller
-
Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.
-
{{cssxref("<length>")}}
-
-

A positive {{cssxref("<length>")}} value. For most font-relative units (such as em and ex), the font size is relative to the parent element's font size.

- -

For font-relative units that are root-based (such as rem), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.

-
-
{{cssxref("<percentage>")}}
-
-

A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.

-
-
- -
-

Note: To maximize accessibility, it is generally best to use values that are relative to the user's default font size.

-
- -

Formal syntax

- -{{csssyntax}} - -

Açıklama

- -

There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.

- -

Anahtar Kelimeler

- -

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the {{HTMLElement("body")}} element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

- -

Pixels

- -

Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

- -

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger, the child element displays larger than the parent element in the page.

- -
Note: Defining font sizes in px is not accessible, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.
- -

Ems

- -

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the font size of the element on which the em is used. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

- -

In order to calculate the em equivalent for any pixel value required, you can use this formula:

- -
em = desired element pixel value / parent element font-size in pixels
- -

For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

- -

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

- -

One important fact to keep in mind: em values compound. Take the following HTML and CSS:

- -
html {
-  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
-}
-span {
-  font-size: 1.6em;
-}
- -
<div>
-<span>Outer <span>inner</span> outer</span>
-</div>
-
- -

The result is:

- -

{{EmbedLiveSample("Ems", 400, 40)}}

- -

Assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner {{HTMLElement("span")}}'s font-size is 1.6em which is relative to its parent's font-size, which is in turn relative to its parent's font-size. This is often called compounding.

- -

Rems

- -

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

- -

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem.

- -
html {
-  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
-}
-span {
-  font-size: 1.6rem;
-}
-
- -

Then we apply this CSS to the same HTML, which looks like this:

- -
<span>Outer <span>inner</span> outer</span>
- -

{{EmbedLiveSample("Rems", 400, 40)}}

- -

In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 10px).

- -

Örnekler

- -

Örnek 1

- -
/* Paragraf boyutunu çok büyük yapar */
-p { font-size: xx-large; }
-
-/* <h1> etiketininin boyutunu kendisini kaplayan
-   etikete göre 2.5 kat daha büyük yapar */
-h1 { font-size: 250%; }
-
-/* span etiketiyle çevrelenmiş yazının boyutu 16px yapar */
-span { font-size: 16px; }
-
- -

Örnek 2

- -

CSS

- -
.small {
-  font-size: xx-small;
-}
-.larger {
-  font-size: larger;
-}
-.point {
-  font-size: 24pt;
-}
-.percent {
-  font-size: 200%;
-}
-
- -

HTML

- -
<h1 class="small">Small H1</h1>
-<h1 class="larger">Larger H1</h1>
-<h1 class="point">24 point H1</h1>
-<h1 class="percent">200% H1</h1>
- -

Sonuç

- -

{{EmbedLiveSample('Example_2','600','200')}}

- -

Notlar

- -

em and ex units on the {{cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means em units and percentages do the same thing for {{cssxref("font-size")}}.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS4 Fonts')}}Adds xxx-large keyword.
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}No change.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}Initial definition.
- -

{{cssinfo}}

- -

Tarayıcı uyumluluğu

- - - -

{{Compat("css.properties.font-size")}}

diff --git a/files/tr/web/css/index.html b/files/tr/web/css/index.html deleted file mode 100644 index f1cd50e15c..0000000000 --- a/files/tr/web/css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 'CSS: Cascading Style Sheets (Basamaklı Stil Sayfaları)' -slug: Web/CSS -tags: - - CSS - - CSS3 - - HTML - - Referans - - Stil - - Stil Sayfası - - Tasarım - - Yerleşim -translation_of: Web/CSS ---- -

{{CSSRef}}

- -

Bir stylesheet (şablon-stil) dili olup, çoğu zaman CSS olarak kısaltılan Cascading Style Sheets,  HTML ya da XML ile yazılmış  (SVG ya da XHTML gibi çeşitli XML dillerini içeren) belgelerin sunumları tanımlamak için kullanılır. CSS,  yapılandırılmış elemanların ekranda, kağıt üzerinde, konuşmada yahut diğer medya aygıtlarında nasıl ifade edileceğini belirler. 

- -

CSS, open web'in temel dillerinden biridir ve  W3C standartlarına sahiptir. CSS1, CSS2.1, CSS3 hakkında bir şeyler duymuş olabilirsiniz. Ancak CSS4 hiçbir zaman resmi bir sürüm haline gelmedi.

- -

CSS3'ün, kapsamı önemli ölçüde arttı ve farklı CSS modüllerindeki ilerleme o kadar farklı olmaya başladı ki, önerileri modül başına ayrı ayrı geliştirmek ve yayınlamak daha etkili hale geldi. W3C, CSS spesifikasyonunu veriyonlama yerine periyodik olarak CSS spesifikasyonunun en son kararlı sürümünün anlık görüntüsünü alıyor..

- -
-
    -
  • CSS Referansı - -

    Deneyimli Web Geliştiricileri için CSS'in her özellik ve konseptini tanımlayan kapsamlı bir referans.

    -
    • -
  • CSS Dersi -

    Tüm yeni başlayanlara yardım için bir adım adım giriş kısmı. Bu kısım, ihtiyaç duyulabilecek tüm temel bilgileri içerir.

    -
    • -
  • CSS3 Örnekleri -

    CSS teknolojilerini bir aksiyon içinde gösteren bir demo kolleksiyonu ki yaratıcılık için destekleyicidir.

    -
    • -
- -
-

Bir front-end(Arayüz) geliştiricisimi olmak istiyorsunuz?

- -

Hedefinize ulaşabilmeniz için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.

- -

Buradan Başlayın

-
- -
-
-

Eğitim Aşamaları

- -

Bu CSS Eğitimi CSS'i sıfırdan öğreten birden fazla modül içerir — önceden bilmeniz gerekmez.

- -
-
CSS'ye ilk adım
-
CSS (Cascading Style Sheets), Web sayfalarını biçimlendirmek ve düzenlemek için kullanılır. Örneğin: içeriğinizin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için kullanılır.
-
Bu adımda CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML sayfalarına stil ekleyebilmek için nasıl kullanmaya başlayabileceğinizle ilgili temel bilgiler verir.  
-
CSS'in yapı taşları
-
-

Bu adım ilk adımın kaldığı yerden devam ediyor — artık dile ve sözdizimine aşına oldunuz ve onu kullanma konusunda biraz temel deyim kazandınız, biraz daha derine dalma zamanı. Bu adım, kalıtıma, sahip oluduğunuz tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasını inceler.

- -

Buradaki amak, size daha etkili CSS yazmak için bir araç seti sağlamak ve  metin şekillendirme ve CSS düzeni gibi daha özgül kurallara geçmeden önce tüm temel kavramları anlamanıza yardımcı olmaktır.

-
-
Metin stilini belirleme
-
CSS dilinin temelleri ele alındığında, odaklanmanız gereken bir sonraki CSS konusu, CSS ile yapacağınız en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipi, kalınlık, italik, satır ve harf aralığı, alt gölgeler ve diğer metin özelliklerini ayarlama dahil olmak üzere metin şekillendirme temellerine bakıyoruz. Sayfanıza özel yazı tiplerini, listeleri ve bağlantıları şekillendirmeye bakarak bu konuyu tamamlıyoruz.
-
CSS düzeni
-
Bu noktaya kadar CSS'in temellerini, metnin nasıl stilize edileceğini ve içeriğinizin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanındaki diğer bileşenler ile doğru yere nasıl yerleştireceğinize bakmanın zamanı geldi. Burada CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski teknikleri kullanabilmemiz için gerekli ön koşulları ele alacağız.
-
Yaygın sorunları çözmek için CSS kullanın
-
Bu adım, bir websayfası oluştururken yaygın sorunları çözmek için CSS'si nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.
-
-
- -
-

Kaynaklar

- - - -

Tarifler kitabı

- -

CSS düzen tarifleri kitabı sitelerinize uygulamanız gerekebilecek ortak düzen kalıpları için tarifleri bir araya getirmeyi amaçlamaktadır. Projelerinizde başlangıç noktası olarak kullanabileceğiniz kod sağlamanın yına sıra, bu tarifler yerleşim özelliklerinin kullanılabileceği farklı yolları ve bir geliştirici olarak uygulayabileceğiniz seçimleri irdeler.

- -

CSS geliştirme araçları

- - - -

Meta bugs

- -
    -
  • Firefox: {{bug(1323667)}}
    • -
-
-
-
- -

Ayrıca Bakınız

- - diff --git a/files/tr/web/css/margin/index.html b/files/tr/web/css/margin/index.html deleted file mode 100644 index e226907d8a..0000000000 --- a/files/tr/web/css/margin/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: marjin -slug: Web/CSS/margin -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new -original_slug: Web/CSS/marjin ---- -
{{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.
-
- -
    -
  • Tek bir değer  tüm dört kenara uygulanır.
    • -
  • İki değerin ilki  üst ve alt kenara ikincisi sağ ve sol kenara uygulanır.
    • -
  • Üç  değerin ilki üst kenara ikincisi sağ ve sol kenara üçüncüsü alt kenara uygulanır.
    • -
  • Dört değer üst, sağ, alt ve sol kenarlara sırasıyla (saat yönünde) uygulanı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/reference/index.html b/files/tr/web/css/reference/index.html deleted file mode 100644 index 4d415d65a6..0000000000 --- a/files/tr/web/css/reference/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CSS Referansı -slug: Web/CSS/Reference -tags: - - CSS - - CSS Referans -translation_of: Web/CSS/Reference ---- -

Bu CSS Referansı, bütün standart CSS özelliklerini, pseudo sınıflarını, pseudo elementlerini, @-kurallarını, birimleri* ve seçicileri alfabetik olarak sıralar. Bunların her biri için hızlı ve detaylı bilgiye ulaşabilirsiniz. Sadece CSS1 ve CSS2 özellikleri değil, aynı zamanda konsept standartlı veya stabil her CSS3 ile bağlantılı özellik için de bir referans niteliğindedir.

- -

Ayrıca -moz prefix'i aracılığıyla Gecko-spesifik olarak tanımlanan Mozilla CSS Eklentileri sayfasını ziyaret edebilir veya dilerseniz Webkit-spesifik olarak tanımlanan  WebKit CSS Eklentileri sayfasını ziyaret edebilirsiniz. Tüm prefixed özellikleri incelemek için Vendor-prefixed CSS Property Overview ismi ile Peter Beverloo tarafından hazırlanan sayfayı ziyaret edebilirsiniz.

- -
{{CSS_Ref}}
- -

Seçiciler

- - - -

CSS3 özelleştirmeleri için tüm seçicilerin listesi.

- -

CSS3 Kullanımı

- -

Küçük boyutlu sayfalar oluşturmak için yeni bir teknoloji ortaya çıktı CSS3, ancak yakın zamana kadar düşük destekli olan CCS2.1 kullanılıyordu.

- - - -

Kavramlar

- - diff --git a/files/tr/web/css/right/index.html b/files/tr/web/css/right/index.html deleted file mode 100644 index 3c5c003132..0000000000 --- a/files/tr/web/css/right/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: right -slug: Web/CSS/right -translation_of: Web/CSS/right ---- -
{{CSSRef}}
- -

Özet

- -

Bu CSS değeri pozisyonlanan elemanların yerleştirilmesinde rol alır.

- -

{{Cssxref("position")}}: absolute or position: fixed olarak yerleştirilmiş elemanların sağ marjin kenarı ile bu elemanı barındıran elemanın sağ kenarı arasındaki mesafeyi belirler.

- -

right değerinin pozisyonlanmamış elemanlar üzerinde etkisi yoktur.

- -

Hem right hem de {{cssxref("left")}} değerleri tanımlanmış ise, elemanın pozisyonu gereğinden daha detaylı tanımlanmış olarak kabul edilir. Bu durumda, barındıran elemanın metin yerleşimi soldan sağa ise {{cssxref("left")}} değeri, sağdan sola ise right değeri geçerli kabul edilir. Soldan sağa yerleşimlerde right değeri -left, sağdan sola yerleşimlerde left değeri -right olarak tekrar hesaplanır.

- -

{{cssinfo}}

- -

Yazım

- -
Formal syntax: {{csssyntax("right")}}
-
- -
right: 3px         /* <uzunluk> değeri */
-right: 2.4em
-
-right: 10%         /* barındıran bloğun yüzdesi olarak */
-
-right: auto
-
-right: inherit
-
- -

Değerler

- -
-
<uzunluk>
-
Negatif, null veya pozitif {{cssxref("<length>")}} değerdir. -
    -
  • Kesin yerleştirilen elemanlar için barındıran bloğun sağ kenarına olan mesafeyi belirler;
    • -
  • Göreceli yerleştirilen elemanlar için, elemanın normal akış içerisinde yerleşim değeri uygulanmazken bulunacağı pozisyondan sağa doğru öteleneceği mesafeyi belirler.
    • -
-
-
<yüzde>
-
Uzunluk değerinin barındıran bloğun yüzdesi olarak ifadesidir. {{cssxref("<percentage>")}}. 
-
auto
-
Is a keyword that represents: -
    -
  • for absolutely positioned elements, the position the element based on the {{Cssxref("left")}} property and treat width: auto as a width based on the content.
    • -
  • for relatively positioned elements, the right offset the element from its original position based on the {{Cssxref("left")}} property, or if left is also auto, do not offset it at all.
    • -
-
-
inherit
-
Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a {{cssxref("<length>")}}, {{cssxref("<percentage>")}} or the auto keyword.
-
- -

Examples

- - -
#example_3 {
-  width: 600px;
-  height: 400px;
-  background-color: #FFC7E4;
-  position: relative;
-  top: 20px;
-  left: 20px;
-}
-
-#example_4 {
-  width:200px;
-  height:200px;
-  background-color: #FFD7C2;
-  position:absolute;
-  bottom:10px;
-  right: 20px;
-}
- -
 <div id="example_3">Example 3</div>
- <div id="example_4">Example 4</div>
-
- -

{{LiveSampleLink('Examples', 'Example Demo Link')}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Defines right as animatable.
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}5.55.01.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
diff --git a/files/tr/web/css/shape-outside/index.html b/files/tr/web/css/shape-outside/index.html deleted file mode 100644 index 4a05560e8a..0000000000 --- a/files/tr/web/css/shape-outside/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: shape-outside -slug: Web/CSS/shape-outside -tags: - - Boundaries - - CSS - - CSS Property - - CSS Shapes - - Float Area - - Property - - Reference - - Shape - - margin - - 'recipe:css-property' - - shape-outside - - wrapping -translation_of: Web/CSS/shape-outside ---- -
{{CSSRef}}
- -

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

- -
{{EmbedInteractiveExample("pages/css/shape-outside.html")}}
- - - -

Syntax

- -
/* Keyword values */
-shape-outside: none;
-shape-outside: margin-box;
-shape-outside: content-box;
-shape-outside: border-box;
-shape-outside: padding-box;
-
-/* Function values */
-shape-outside: circle();
-shape-outside: ellipse();
-shape-outside: inset(10px 10px 10px 10px);
-shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
-shape-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
-
-/* <url> value */
-shape-outside: url(image.png);
-
-/* <gradient> value */
-shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
-
-/* Global values */
-shape-outside: initial;
-shape-outside: inherit;
-shape-outside: unset;
-
- -

The shape-outside property is specified using the values from the list below, which define the float area for float elements. The float area determines the shape around which inline content (float elements) wrap.

- -

Values

- -
-
none
-
The float area is unaffected. Inline content wraps around the element's margin box, like usual.
-
<shape-box>
-
The float area is computed according to the shape of a float element's edges (as defined by the CSS box model). This can be margin-box, border-box, padding-box, or content-box. The shape includes any curvature created by the {{cssxref("border-radius")}} property (behavior which is similar to {{cssxref("background-clip")}}).
-
-
-
margin-box
-
Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding {{cssxref("border-radius")}} and {{cssxref("margin")}} values. If the border-radius / margin ratio is 1 or more, then the margin box corner radius is border-radius + margin. If the ratio is less than 1, then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^3)).
-
border-box
-
-

Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.

-
-
padding-box
-
-

Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.

-
-
content-box
-
-

Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.

-
-
-
-
{{cssxref("<basic-shape>")}}
-
The float area is computed based on the shape created by of one of inset(), circle(), ellipse(),  polygon(), or as added in the level 2 specification path(). If a <shape-box> is also supplied, it defines the reference box for the <basic-shape> function. Otherwise, the reference box defaults to margin-box.
-
{{cssxref("<image>")}}
-
The float area is extracted and computed based on the alpha channel of the specified {{cssxref("<image>")}} as defined by {{cssxref("shape-image-threshold")}}.
-
-
Note: {{glossary("User agent", "User agents")}} must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.
-
-
- -

Interpolation

- -

When animating between one <basic-shape> and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc")}} where possible. If list values are not one of those types but are identical (such as finding nonzero in the same list position in both lists), those values do interpolate.

- -
    -
  • Both shapes must use the same reference box.
    • -
  • If both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side keywords, interpolate between each value in the shape functions.
    • -
  • If both shapes are of type inset(), interpolate between each value in the shape functions.
    • -
  • If both shapes are of type polygon(), both polygons have the same number of vertices, and use the same <fill-rule>, interpolate between each value in the shape functions.
    • -
  • In all other cases no interpolation occurs.
    • -
- -

Formal definition

- -

{{CSSInfo}}

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Funneling text

- -

HTML

- -
<div class="main">
-  <div class="left"></div>
-  <div class="right"></div>
-  <p>
-    Sometimes a web page's text content appears to be
-    funneling your attention towards a spot on the page
-    to drive you to follow a particular link. Sometimes
-    you don't notice.
-  </p>
-</div>
- -

CSS

- -
.main {
-  width: 530px;
-}
-
-.left,
-.right {
-  width: 40%;
-  height: 12ex;
-  background-color: lightgray;
-}
-
-.left {
-  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
-  shape-outside: polygon(0 0, 100% 100%, 0 100%);
-  float: left;
-  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
-  clip-path: polygon(0 0, 100% 100%, 0 100%);
-}
-
-.right {
-  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
-  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
-  float: right;
-  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
-  clip-path: polygon(100% 0, 100% 100%, 0 100%);
-}
-
-p {
-  text-align: center;
-}
- -

Result

- -

{{EmbedLiveSample("Funneling_text", "100%", 130)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}{{Spec2('CSS Shapes')}}Initial definition.
{{SpecName('CSS Shapes 2', '#shape-outside-property', 'shape-outside')}}{{Spec2('CSS Shapes 2')}}Adds the path() value
- -

Browser compatibility

- -
- - -

{{Compat("css.properties.shape-outside")}}

-
- -

See also

- - diff --git a/files/tr/web/css/type_selectors/index.html b/files/tr/web/css/type_selectors/index.html deleted file mode 100644 index 8c375757ba..0000000000 --- a/files/tr/web/css/type_selectors/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Tip Seçicileri -slug: Web/CSS/Type_selectors -tags: - - CSS - - CSS referansı - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Type_selectors -original_slug: Web/CSS/Tip_secicileri ---- -
{{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/demos_of_open_web_technologies/index.html b/files/tr/web/demos_of_open_web_technologies/index.html deleted file mode 100644 index aea815dff2..0000000000 --- a/files/tr/web/demos_of_open_web_technologies/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Demos of open web technologies -slug: Web/Demos_of_open_web_technologies -translation_of: Web/Demos_of_open_web_technologies ---- -

Mozilla supports a wide range of open web technologies and we encourage them to use these technologies. This page provides links to demos of popular technologies, including some of the demo studios that have been active in the past. A good application or presentation about open web technologies If you know, please add the application or promotion you know here as a link to an appropriate section.

- -

2D Graphics

- -

APNG

- - - -

Canvas

- - - -

SVG

- - - -

Video

- - - -

3D Graphics

- -

WebGL

- - - -

Virtual Reality

- - - -

CSS

- - - -

Transformations

- - - -

Games

- - - -

HTML

- - - -

Web APIs

- -
    -
- -

Notifications API

- - - -
    -
- -

Web Audio API

- - - -

Web Workers

- - diff --git a/files/tr/web/guide/ajax/index.html b/files/tr/web/guide/ajax/index.html deleted file mode 100644 index 7aece12816..0000000000 --- a/files/tr/web/guide/ajax/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Ajax -slug: Web/Guide/AJAX -translation_of: Web/Guide/AJAX ---- -
Başlarken
-Ajax'a giriş.
- -
-

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

- -

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

- -

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

-
- -
-
-

Documentation

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

View All...

- -

See also

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

Community

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

Tools

- - - -

View All...

- -

Examples

- - - - - -

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

-
-
- -

{{ListSubpages}}

diff --git a/files/tr/web/guide/graphics/index.html b/files/tr/web/guide/graphics/index.html deleted file mode 100644 index 52179a8951..0000000000 --- a/files/tr/web/guide/graphics/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Web Çizgeleri -slug: Web/Guide/Graphics -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 -original_slug: Web/Guide/Çizgeler ---- -

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 deleted file mode 100644 index c59a8bd86f..0000000000 --- a/files/tr/web/guide/html/html5/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/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 -original_slug: Web/HTML/HTML5 ---- -

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

- -
    -
  • Yeni elemanları, özellikleri ve davranışları içeren bir HTML sürümünü,
    • -
  • Çok güçlü ve farklı  Web siteleri ve uygulamalarını kapsayan çok büyük bir teknoloji kümesini ki HTML5 olarak kısaltılmış olup HTML5 ve elemanları diye bilinir.
    • -
- -

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:

- -
    -
  • Semantics (Kurgulama Durumu): İçeriğinizi daha iyi tanımlamanıza,
    • -
  • Connectivity (Bağlantı Durumu): Sunucuya yeni ve yenilikçi yollarla bağlanmanıza,
    • -
  • Offline & Storage (Çevrimdışılık ve Depolama Durumu):  Web sayfalarının yerel sunucuda veri depolamasına ve çevrimdişı daha verimli kullanılmasına,
    • -
  • Multimedia (Çoklumedya): Open Web ile 1. sınıf programcılar, video ve ses üretmesine, 
    • -
  • 2D/3D Graphics & Effects (2 ve 3 Boyutlu Grafik ve Efekler): 
    - Daha fazla ve çeşitli boyuttaki sunum seçeneklerine,  
    • -
  • Performance & Integration (Performans ve Entegre Etme): Bilgisayar donanımının daha iyi kullanılmasına ve daha büyük hızlara çıkılabilmesine, 
    • -
  • Device access (Sürücülere Ulaşma): Çeşitli giriş ve çıkış sürücülerinin kullanılmasına, 
    • -
  • Styling (Şekillendirme): Web tasarımcılarının, daha görkemli temelara hükmetmesine imkan tanır.
    -  
    • -
- -
-
-

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/index.html b/files/tr/web/guide/index.html deleted file mode 100644 index ca1aeaaa1c..0000000000 --- a/files/tr/web/guide/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Geliştirici kılavuzları -slug: Web/Guide -tags: - - Guide - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web/Guide ---- -

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

- -
-

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

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

Ayrıca bakınız

- - diff --git a/files/tr/web/html/element/aside/index.html b/files/tr/web/html/element/aside/index.html deleted file mode 100644 index 0086628d72..0000000000 --- a/files/tr/web/html/element/aside/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: