diff options
Diffstat (limited to 'files/tr/learn')
53 files changed, 12104 insertions, 0 deletions
diff --git a/files/tr/learn/common_questions/tarayıcı_geliştirici_araçları_araçları_nelerdir/index.html b/files/tr/learn/common_questions/what_are_browser_developer_tools/index.html index 57a11f27e5..57a11f27e5 100644 --- a/files/tr/learn/common_questions/tarayıcı_geliştirici_araçları_araçları_nelerdir/index.html +++ b/files/tr/learn/common_questions/what_are_browser_developer_tools/index.html 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 new file mode 100644 index 0000000000..79cd3c0a36 --- /dev/null +++ b/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,324 @@ +--- +title: Arka planlar ve kenarlıklar +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> + +<p>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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Kutuların arka planını ve kenarlığını nasıl biçimlendireceğini öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="CSSde_arka_planların_stilini_ayarlama">CSS'de arka planların stilini ayarlama</h2> + +<p>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.</p> + +<pre class="brush: css notranslate"><code>.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; +} </code> +</pre> + +<p>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.</p> + +<h3 id="Arka_plan_renkleri">Arka plan renkleri</h3> + +<p>CSS {{cssxref("background-color")}} niteliğiyle herhangi bir öğeye arka plan rengini tanımlarız. Nitelik geçerli olan her <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> değerini kabul eder. <code>background-color</code>, öğenin içeriğinin ve dolgusunun altını boyar.</p> + +<p>Aşağıdaki örnekte, kutuya bir arka plan rengi, bir başlık ve bir {{htmlelement("span")}} öğelerine çeşitli renk değerleri ekledik.</p> + +<p><strong>Geçerli olan <a href="/tr/docs/Web/CSS/color_value"><color></a> değerlerini kullanarak bunlarla oynayın.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> + +<h3 id="Arka_plan_resimleri">Arka plan resimleri</h3> + +<p>{{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.</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> + +<p><strong>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 <code>background-color</code> niteliğine renk bildiriminde bulun.</strong></p> + +<h4 id="Arka_plan_tekrarını_kontrol_etme">Arka plan tekrarını kontrol etme</h4> + +<p>{{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:</p> + +<ul> + <li><code>no-repeat</code> — arka planın tekrarlanmasını durdur.</li> + <li><code>repeat-x</code> — yatay olarak tekrarla.</li> + <li><code>repeat-y</code> — dikey olarak tekrarla.</li> + <li><code>repeat</code> — varsayılan değer; her iki yönde de tekrarlayın.</li> +</ul> + +<p><strong>Bu değerleri aşağıdaki örnekte deneyin. Biz değerini <code>no-repeat</code> 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. </strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> + +<h4 id="Arka_plan_resmini_boyutlandırma">Arka plan resmini boyutlandırma</h4> + +<p>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 <a href="/tr/docs/Web/CSS/length">uzunluk</a> veya <a href="/tr/docs/Web/CSS/percentage">yüzde</a> değeri alabilen {{cssxref("background-size")}} niteliğini kullanabiliriz.</p> + +<p>Ayrıca anahtar kelimeleri de kullanabiliriz:</p> + +<ul> + <li><code>cover</code> — 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.</li> + <li><code>contain</code> — 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.</li> +</ul> + +<p>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.</p> + +<p>Uygula.</p> + +<ul> + <li>Arka planın boyutunu değiştirmek için kullanılan uzunluk birimlerini değiştir.</li> + <li>Uzunluk birimlerini sil ve <code>background-size: cover</code> veya <code>background-size: contain</code> tanımlamalarını yap.</li> + <li>Resmin görüntülemek istediğin kutudan küçükse, görüntüyü tekrarlamak için <code>background-repeat</code> niteliğinin değerini değiştir.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> + +<h4 id="Arka_plan_resmini_konumlandırma">Arka plan resmini konumlandırma</h4> + +<p>{{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 (<code>x</code>) ve dikey (<code>y</code>) eksenler boyunca konumlandırıldığı bir koordinat sistemi kullanır.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Varsayılan olarak <code>background-position</code>'ın başlangıç değeri<code>(0,0)</code> dır.</p> +</div> + +<p><code>background-position</code> yatay ve dikey olarak iki ayrı değer alır.</p> + +<p><code>top</code> ve <code>right</code> gibi anahtar kelimeler kullanabilirsin(alabildiği tüm değerleri görmek için {{cssxref("background-position")}} sayfasına bak):</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top center; +} </code> +</pre> + +<p><a href="/tr/docs/Web/CSS/length">Uzunluk</a> ve <a href="/tr/docs/Web/CSS/percentage">yüzdeler</a>:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: 20px 10%; +} </code> +</pre> + +<p>Anahtar kelimeleri uzunluklar veya yüzdelerle de karıştırabilirsin:</p> + +<pre class="brush: css notranslate">.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px; +}</pre> + +<p>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:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px right 10px; +} </code></pre> + +<p><strong>Bu değerlerle oynamak ve yıldızı kutunun içinde hareket ettirmek için aşağıdaki örneği kullanın..</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: <code>background-position</code> is a shorthand for {{cssxref("background-position-x")}} and {{cssxref("background-position-y")}}, which allow you to set the different axis position values individually.</p> +</div> + +<h3 id="Degrade_arka_planlar">Degrade arka planlar</h3> + +<p>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.</p> + +<p><code><a href="/tr/docs/Web/CSS/gradient"><gradient></a></code> 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 <a href="https://cssgradient.io/">birini kullanmaktır</a>.bir degrade oluşturabilir ve ardından onu oluşturan kaynak kodunu kopyalayıp projende kullanabilirsin.</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> + +<h3 id="Birden_çok_arka_plan_görüntüsü">Birden çok arka plan görüntüsü</h3> + +<p>Birden çok arka plan görüntüsüne sahip olmak da mümkündür — <code>background-image</code> niteliğinde her birini virgülle ayırarak tek bir komutla birden çok değeri belirtebilirsin.</p> + +<p>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.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Degradeler, normal arka plan görüntüleriyle uyumlu bir şekilde karıştırılabilir</p> +</div> + +<p>Diğer <code>background-*</code> nitelikleride <code>background-image</code> gibi virgülle ayrılmış değerlere sahip olabilirler:</p> + +<pre class="brush: css notranslate">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;</pre> + +<p>Farklı özelliklerin her bir değeri, diğer özelliklerdeki aynı konumdaki değerlele eşleşecektir. Örneğin yukarıdaki <code>image1</code>'in <code>background-repeat</code> değeri <code>no-repeat</code> 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 <code>background-position</code> değeri vardır. İlk iki konum değeri ilk iki resme uygulancak, ardından tekrar geri dönecek — <code>image3</code>'e ilk konum değeri <code>image4</code>'de de ikinci konum değeri verilecektir.</p> + +<p><strong>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.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> + +<h3 id="Arka_plan_sabitleme">Arka plan sabitleme</h3> + +<p>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 <span>{{cssxref("background-attachment")}} niteliği aşağıdaki belirtilen değerler kullanılarak kontrol edilir.</span></p> + +<ul> + <li><code>scroll</code>: 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.</li> + <li><code>fixed</code>: 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.</li> + <li><code>local</code>: Bu değer daha sonra eklendi(Yanlızca Internet Explorer 9+'da desteklenir. Diğerleri IE4+'da desteklenir). Çünkü <code>scroll</code> değeri oldukça kafa karıştırıcıdır ve çoğu durumda istediğini yapmayabilir. <code>local</code> 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.</li> +</ul> + +<p>{{cssxref("background-attachment")}} niteliğine tanımlanabilecek bu üç değerin aralarındaki farkları görebilmen için size örnek bir sayfa dım — <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (ayrıca <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">kaynak koduda</a> burada).</p> + +<h3 id="Arka_plan_tanımı_için_kısatanım_kullanımı">Arka plan tanımı için kısatanım kullanımı</h3> + +<p>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.</p> + +<p>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 <code>no-repeat</code> değerine sahip bir görüntü ve en altta bir renk var.</p> + +<p>Arka plan kısatanım değerlerini yazarken uyulması gereken birkaç kural vardır, örneğin</p> + +<ul> + <li><code>background-color</code>, yalnızca son virgülden sonra tanımlanabilir. İlk belirtilen konum en üstte blunur.</li> + <li> + <p><code>background-size</code> değeri, sadece <code>background-position</code> değerinden sonra '<code>/</code>' karakteriyle ayırarak tanımlanabilir.</p> + </li> +</ul> + +<p>{{cssxref("background")}} tüm detaylarını görebilmek için MDN sayfasına bir göz atın.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> + +<h3 id="Arka_planla_erişilebilirlikle_ilgili_hususlar">Arka planla erişilebilirlikle ilgili hususlar</h3> + +<p>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 <code>background-color</code> tanımlamalısın.</p> + +<p>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.</p> + +<h2 id="Kenarlıklar">Kenarlıklar</h2> + +<p>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.</p> + +<p>Aşağıdaki {{cssxref("border")}} ile bir kutunun dört kenarı için kenarlık belirleyebiliriz.</p> + +<pre class="brush: css notranslate"><code>.box { + border: 1px solid black; +} </code></pre> + +<p>Veya kutunun bir kenarını hedefleyebiliriz, örneğin:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top: 1px solid black; +} </code></pre> + +<p>Bu kısatanımların bireysel nitelikleride böyle olacaktır:</p> + +<pre class="brush: css notranslate"><code>.box { + border-width: 1px; + border-style: solid; + border-color: black; +} </code></pre> + +<p>Ve daha detaylı tanımlama için:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Bu üst, sağ, alt ve sol kenarlık nitelikleri, belgenin yazma moduyla eşleştirilmiş olan <em>mantıksal</em> niteliklere de sahiptir. (Örn. Soldan sağa, sağdan sola veya yukarıdan aşağıya). Bunları, <a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">farklı metin yönleri</a>'ni ele alan bir sonraki derste işleyeceğiz.</p> +</div> + +<p><strong>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.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> + +<h3 id="Yuvarlatılmış_köşeler">Yuvarlatılmış köşeler</h3> + +<p>{{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.</p> + +<p>Örneğin, bir kutunun dört köşesinin de 10 piksellik bir yarıçapa sahip olmasını sağlamak için:</p> + +<pre class="brush: css notranslate"><code>.box { + border-radius: 10px; +} </code></pre> + +<p>Veya sağ üst köşenin yatay yarıçapı 1em ve dikey yarıçapı %10 olmasını sağlamak için:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-right-radius: 1em 10%; +} </code></pre> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> + +<h2 id="Beçerilerini_test_et!">Beçerilerini test et!</h2> + +<p>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 — <a href="/tr/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders">Becerilerini test edin: Arka Planlar ve Kenarlıklar</a>.</p> + +<h2 id="Özet">Özet</h2> + +<p>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.</p> + +<p>Bir sonraki derste, belgelerinin Yazma Modunun CSS'inle nasıl etkileşime girdiğini öğreneceğiz. Metin soldan sağa akmadığında ne olur? </p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> 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 new file mode 100644 index 0000000000..2e70a368d6 --- /dev/null +++ b/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,357 @@ +--- +title: Kaynak sırası ve miras +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>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 <a title="Cascade: Adım adım kontrol">art arda denetim</a>, <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> ve kalıtım hakkındaki bilgilerini geliştirmektir.</p> + +<p>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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td><a title="Cascade: Adım adım kontrol">ardarda denetim</a> ve <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> hakkında bilgi edinmek ve CSS'de kalıtımın nasıl çalıştığını öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Çakışan_kurallar">Çakışan kurallar</h2> + +<p>CSS, <strong>Basamaklı Stil Sayfaları</strong> anlamına gelir ve <em>basamaklandırmanın(<a title="Cascade: Basamaklama - adım adım kontrol">art arda denetimin</a>)</em> anlaşılması inanılmaz derecede önemlidir. Art arda denetimin davranış şekli, CSS'i anlamanın anahtarıdır.</p> + +<p>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. <strong><a title="Cascade: Basamaklama - adım adım kontrol">Art arda Denetim</a></strong> ve <strong><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a></strong> 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.</p> + +<p>Burada ayrıca önemli olan <strong>kalıtım</strong> 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.</p> + +<p>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.</p> + +<h3 id="Art_arda_denetim"><a title="Cascade: Basamaklama - adım adım kontrol">Art arda denetim</a></h3> + +<p>Stil sayfaları <strong>basamaklıdır</strong> — çok basit bir şekilde bu, CSS kurallarının sırasının önemli olduğu anlamına gelir; eşit <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllüğe</a> sahip olan iki kural uygulandığında, CSS en son gelen kural kullanılacaktır.</p> + +<p>Aşağıdaki örnekte, <code>h1</code> 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(<code>blue</code>) olan kırmızı(<code>red</code>)'dan sonra geldiği için bu yarışı kazanır.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> + +<p>Şö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 <code>h1</code> etiketimizi seçip <code>color</code> niteliğini 2. satırda belirtiğimiz kırmızı(<code>red</code>) olarak tanımlar ve dosyamızı okumaya devam eder. 3. satırdaki } süstlü parantezle birlikte <code>h1</code> öğemizle ilgili tamınlamayı bitir. Tekrardan 4. satırdaki <code>h1</code> öğesinin <code>color</code> niteliğini 5. satırdaki mavi(<code>blue</code>) olarak tanımlar. CSS stil sayfamızın sonuna geldiğinde etiketteki nitelik değerlerini HTML sayfamızdaki öpelere uygulamaya başlar. <code>h1</code> öğesinin <code>color</code> değişkeninde en son atanan değer mavi(<code>blue</code>) olduğu için HTML sayfamızdaki <code>h1</code> öğemizin renk değeri mavi olur.</p> + +<p>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.</p> + +<h3 id="Özgüllük"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">Özgüllük</a></h3> + +<p>Ö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:</p> + +<ul> + <li>öğ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.</li> + <li>Sınıf seçici daha belirgindir — sadece HTML sayfasındaki <code>class</code> nitelik değerine sahip öğeleri seçer — bu yüzden daha yüksek puan alır.</li> +</ul> + +<p>Örnek zamanı! Aşağıda <code>.main-heading</code> sınıfına dahil <code><h1></code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> + +<p>Bunuda şöyle özetlemek gerekirse: CSS stil sayfamızı yorumlamaya başladığında sayfamızı adım adım okumaya başlar. İlk önce <code>.main-heading</code> sınıfımızın color niteliğini kırmızı olarak tanımlar. Sonraki adımlarda <code>h1</code> öğemizin <code>color</code> 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 <code>h1</code> öğeleri renk tanımlarını blue olarak tanımlayacaktır fakat bizim HTML sayfamızda sadece tek bir <code>h1</code> öğ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.</p> + +<p>Özgüllük puanlamasını ve diğer benzer nitelikleri daha sonra açıklayacağız.</p> + +<h3 id="Miras">Miras</h3> + +<p>Üst öğelere uygulanan CSS stillerin bir kısmı alt öğeler tarafından <strong>miras</strong> olarak alınır.</p> + +<p>Örneğin, <code>color</code> ve <code>font-family</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> + +<p>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!</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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. <a href="/tr/docs/Web/CSS/color#Specifications">Renk özelliği ayrıntıları</a>, bölümüne bakın.</p> +</div> + +<h2 id="Kavramların_birlikte_nasıl_çalıştığını_anlamak">Kavramların birlikte nasıl çalıştığını anlamak</h2> + +<p>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.</p> + +<p>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:</p> + +<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p> + +<h2 id="Mirası_anlamak">Mirası anlamak</h2> + +<p>Mirasla başlayacağız. Aşağıdaki örnekte , İki seviyeli sırasız listemiz bulunmakta {{HTMLElement("ul")}}. Dış taraftaki <code>ul</code> öğemize bir sınır, dolgu ve yazı tipi rengi verdik.</p> + +<p>Renk doğrudan çocuklara da uygulandı, aynı zamanda dolaylı çocuklara(torunlara) da uygulandı <code><li></code>. Daha sonra ikinci listemizi <code>special</code> 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ı.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> + +<p>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!</p> + +<p>Hangi özellikler varsayılan olarak miras alınıp alınmadı büyük ölçüde sağduyuya bağlıdır.</p> + +<h3 id="Mirası_kontrol_etmek">Mirası kontrol etmek</h3> + +<p>CSS, mirası kontrol etmek için dört özel evrensel nitelik değeri sağlar. Her CSS niteliği bu değerleri kabul eder.</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>Seçilen öğe niteliğinin miras alıp alamadığına bakılmaksızın, ebeveyninden miras alması sağlanır.</dd> + <dt>{{cssxref("initial")}}</dt> + <dd>Niteliğe tanımlanmış tüm kurallar yok sayılır ve tüm miraslar engellenilerek <a href="/tr/docs/Web/CSS/initial_value">başlangıç değerine</a> ayarlanır(sıfırlarnır. Varsayılan değerler de kullanılmaz).</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>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.</dd> + <dt>{{cssxref("revert")}}</dt> + <dd>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.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<p>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.</p> + +<p>Örnek:</p> + +<ol> + <li>İkinci liste öğesine <code>my-class-1</code> sınıfı uygulanmıştır. Bu sınıf <code><a></code> öğesinin rengini miras alacak şekilde ayarlar. Kuralı kaldırdığında bağlantı rengi nasıl gözükür?</li> + <li>Üçü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.</li> + <li><code><a></code> öğesinin yeni bir renk tanımlarsan hangi öğelerin rengi değişir. Örnek <code>a { color: red; }</code>?</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> + +<h3 id="Tüm_öğelerin_değerlerini_sıfırlama">Tüm öğelerin değerlerini sıfırlama</h3> + +<p>CSS'in <code>all</code> 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(<code>inherit</code>, <code>initial</code>, <code>unset</code> veya <code>revert</code>). 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.</p> + +<p>Aşağıdaki örnekte iki adet alıntı bloğu var(<code>blockquote</code>). 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 <code>unset</code> değerini atayan bir bildirimimiz var: <code>all</code>: <code>unset</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> + +<p> <code>all</code> niteliğine mevcut diğer değerleri atayıp farkın neler olduğunu gözlemle.</p> + +<h2 id="Ardarda_kontrolü_anlamak">Ardarda kontrolü anlamak</h2> + +<p>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.</p> + +<p>Burada önem sırasına göre sıralanan, dikkate alınması gereken üç etken vardır. Sonraki bir öncekini geçersiz kılar:</p> + +<ol> + <li><strong>Kaynak sırası</strong></li> + <li><strong>Özgüllük</strong></li> + <li><strong>Önem</strong></li> +</ol> + +<p>Tarayıcıların tam olarak hangi CSS'in uygulanması gerektiğini nasıl anladığını görmek için bunları irdeliyeceğiz.</p> + +<h3 id="Art_arda_denetim_2">Art arda denetim</h3> + +<p>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.</p> + +<h3 id="Özgüllük_2"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçiciyi belirleme">Özgüllük</a></h3> + +<p>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 <strong>daha yüksek özgüllüğe</strong> 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(<code>class</code>, <code>id</code> 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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> + +<p>Ş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.</p> + +<p>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.</p> + +<ol> + <li><strong>Binler basamağı</strong>: 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.</li> + <li><strong>Yüzler basamağı</strong>: Öğeye tanımlanmış bir kimlik için seçici <code>(id</code>) varsa, bu sütuna bir puan eklenir.</li> + <li><strong>Onlar Basamağı</strong>: Her bir sınıf(<code>class</code>), öznitelik veya genel seçicide bulunan sözde sınıf için bu sütuna bir puan eklenir.</li> + <li><strong>Birler</strong>: Genel seçici içinde bulunan her bir öğe veya sözde öğe için bu sütunda bir puan eklenir.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: Evrensel seçici (<code>*</code>), birleştirici seçiciler (<code>+</code>, <code>></code>, <code>~</code>, ' '), ve olumsuzluk ifadesi sözde sınıfının (<code>:not</code>) özgüllük üzerinde herhangi bir etkisi yoktur.</p> +</div> + +<p>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 <a href="/tr/docs/Web/CSS/CSS_Selectors">seçiciler kaynağına </a>bakabilirsin.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Seçici</th> + <th scope="col">Binler</th> + <th scope="col">Yüzler</th> + <th scope="col">Onlar</th> + <th scope="col">Birler</th> + <th scope="col">Toplam özgüllük</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="tr"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>{{htmlattrxref("style")}} niteliği. İçinde seçici yok.</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>Devam etmenden önce bir örneğe bakalım.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> + +<p>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.</p> + +<ul> + <li>İ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 <code>id</code> seçicisi vardır: özgüllüğü 201'e karşı 101'dir.</li> + <li>Üçü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.</li> + <li>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.</li> +</ul> + +<ol> +</ol> + +<div class="note"> +<p><strong>Not</strong>: 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 <em>milyon</em> <strong>sınıf(<code>class</code>) </strong>seçici, bir <strong>kimlik(<code>id</code>) </strong>seçicinin üzerine yazamaz.</p> + +<p>Ö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.</p> +</div> + +<h3 id="!important_!önemli">!important (!önemli)</h3> + +<p>Yukarıdaki hesaplamaların tümünü geçersiz kılmak için kullanabileceğin özel bir CSS <em>bildirimi</em> var, ancak onu kullanırken çok dikkatli olmalısın — <code>!important</code>. 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.</p> + +<p>Bir tanesinin bir kimliğe sahip iki tane paragrafımızın olduğu bu örneğe bir göz atın.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> + +<p>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:</p> + +<ol> + <li>Üçü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.</li> + <li>Bununla birlikte, yukarıdaki kurallar kazanır, çünkü sınıf seçiciler öğe seçilerden daha yüksek özgüllüğe sahiptir.</li> + <li>Her iki elamanda <code>better</code> sınıfına ({{htmlattrxref("class")}}) atanmış, ama bir tanesi <code>winning</code> kimliğine({{htmlattrxref("id")}}) atanmış. Kimliklerin sınıflardan <em>daha yüksek bir özgüllüğü</em> 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.</li> + <li>2. elamanın arka planı kırmızı (<code>red)</code> ancak hiçbir sınırı yok. Neden? Çünkü ikinci kuraldaki bildirim nedeniyle: <code>!important</code> — Kimlik(<code>ID</code>) daha yüksek bir özgüllüğe sahip olsa bile, <code>border: none</code> nitelik tanımlaması <code>!important</code> bildirimine sahip olduğu için tüm kuralları aşarak kazanmış olur.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: <code>!important</code> 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 <code>!important</code> bildiriminde bulunmak.</p> +</div> + +<p><code>!important</code> 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. <strong>Ancak, kesinlikle mecbur kalmadıkça asla kullanmamanı şiddetle taviye ederim</strong>. <code>!important</code> 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.</p> + +<p>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.</p> + +<h2 id="CSS_konumunun_etkisi">CSS konumunun etkisi</h2> + +<p>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..</p> + +<h2 id="Özet">Özet</h2> + +<p>İhtilaflı beyanlar aşağıdaki sırayla uygulanacak, daha sonraki beyanlar öncekileri geçersiz kılacaktır:</p> + +<ol> + <li>Kullanıcı aracındaki stil sayfaları (ör. Tarayıcının varsayılan stilleri, başka bir stil ayarlanmadığında kullanılır).</li> + <li>Kullanıcı stil sayfalarındaki normal bildirimler (bir kullanıcı tarafından belirlenen şekillendirmeler).</li> + <li>Yazar şekillendirme sayfasındaki normal bildirimler (bunlar, web geliştiricileri olarak bizim tarafımızdan belirlenen şekillendirmelerdir).</li> + <li>Yazar stil sayfalarındaki önemli bildirimler.</li> + <li>Kullanıcı stil sayfalarındaki önemli bildirimler.</li> +</ol> + +<p>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 <code>!important</code> bildirimini kullanarak sağlayabilirler.</p> + +<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> + +<p>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. <a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_tasks">Becerilerini test edin: Kaynak sırası.</a></p> + +<h2 id="Sıradaki_ne">Sıradaki ne</h2> + +<p>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.</p> + +<p>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.</p> + +<p>Beklendiği gibi uygulanmayan şekillendirmelerle ilgili garip sorunlarla karşılaşmaya başlarsan buraya tekrar bak. Özgüllük sorunu olabilir.</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> diff --git a/files/tr/learn/css/building_blocks/debugging_css/index.html b/files/tr/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..05b5c9a4ab --- /dev/null +++ b/files/tr/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,212 @@ +--- +title: CSS'de hata ayıklamak +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> + +<p>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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Tarayıcının temellerini ve DevTools ile CSS'in basit bir şekilde nasıl incelenip düzenlenebileceğini öğrenmek</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcılarda_DevToolsa_nasıl_erişilir">Tarayıcılarda DevTools'a nasıl erişilir</h2> + +<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirici araçları nelerdir</a> 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.</p> + +<p>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, <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Izgara Düzeni</a>, <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>'ı ve <a href="/tr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Biçimleri</a> 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.</p> + +<p>Bu derste, Firefox Geliştirici Araçlarının CSS ile çalışmak için bazı yararlı özelliklerine bakacağız. Bunu yapmak için <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">örnek bir dosya</a> 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.</p> + +<h2 id="DOM_ve_görüntüleme_kaynağı_karşılaştırması">DOM ve görüntüleme kaynağı karşılaştırması</h2> + +<p>Yeni gelenleri DevTools'a çekebilecek bir şey, bir web sayfasının <a href="/tr/docs/Tools/View_source">kaynağını görüntülediğinde</a> veya sunucuya koyduğunuz HTML dosyasına baktığınızda gördüklerin ile DevTools'un <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Panelinde</a> 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.</p> + +<p>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 <code><h2></code><font><font> etiketini </font></font><code></h3></code> ile kapatırsanız, tarayıcı ne yapmak istediğinizi anlar ve DOM'daki HTML'yi yanlış kapatılan <code></h3></code>'ü <code></h2></code> 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.</p> + +<p>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) <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML ağacı</a>'nda ne olup bittiği hakkında daha detaylı bilgi vermektedir.</p> + +<h2 id="Uygulanan_CSSi_inceleme">Uygulanan CSS'i inceleme</h2> + +<p>Sayfanda incelemek istediğin öğeyi seçtikten sonra, farenin sağ/ctrl+sol tuşuyla tıkladıktan sonra açılan menüden <em>öğeyi incele</em>'yi seçerek veya <em>Araçlar</em> menüsündeki <em>Web geliştirici</em> sekmesinde bulunan seçeneklerden birini seçerek <em>DevTools'a</em> geçiş yapabilirsin. Ders boyunca ortak çalışma alanımız olması için hazırladığım örnek web sayfasındaki <code>box1</code> sınıfına atanmış öğeyi seçip <em>DevTools'u </em>aktif hale getirerek anlatımıza başlayabiliriz. Seçecek olduğumuz öğe örneğimizdeki kenarlığa sahip ilk öğededir.</p> + +<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> + +<p>Açılan <em>DevTools</em> 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 <em>Denetçi</em> sekmesinde bulunan HTML alanının sağındaki <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Kurallar görünümüne</a> bakarsan, seçmiş olduğun öğeye uygulanan CSS niteliklerini ve değerlerini görmelisin. Öğemize doğrudan uygulanan <code>box1</code> sınıfına ait kuralları ve ebeveynlerinden miras aldığı CSS kurallarını listeleyecektir, bizim durumumuzda öğemizin ebeveyni olan <code><body></code>'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.</p> + +<p>Ayrıca, kısa tanımları genişletme yeteneğini de faydalı bulacaksın. Örneğimizde kullandığım <code>margin</code> kısa tanımı üzerinden ilerleyelim.</p> + +<p><strong>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.</strong></p> + +<p><strong>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, <code>border-radius</code> 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 <em>DevTools</em> 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.</strong></p> + +<p>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 <code>box1</code> 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.</p> + +<p>Aşağıdaki video, Firefox Geliştirici Araçlarını kullanarak CSS'de hata ayıklama konusunda bazı yararlı ipuçları sağlar:</p> + +<p>{{EmbedYouTube("O3DAm82vIvU")}}</p> + +<h2 id="Değerleri_düzenleme">Değerleri düzenleme</h2> + +<p>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.</p> + +<p><strong>Seçtimiz <code>box1</code> sınıfına ait öğemizin <em>Kurallar görünümündeki</em> <code>color</code> niteliğinin yanıda ki küçük renkli daireye tıklayalım.</strong><strong> 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.</strong></p> + +<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> + +<h2 id="Yeni_nitelik_eklemek">Yeni nitelik eklemek</h2> + +<p><em>DevTools'u</em> kullanarak niteliklerde ekleyebiliriz. Belki de kutunun <code><body></code> öğ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.</p> + +<p><strong>Yeni bir bildirim girebilmek için kuralın sonunda bulunan <code>}</code> 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 <code>font-size</code> 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.</strong></p> + +<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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 <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS'i inceleme ve düzenleme</a> dersine bakın.</p> +</div> + +<h2 id="Kutu_modelini_anlamak">Kutu modelini anlamak</h2> + +<p>Önceki derslerde <a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu Modeline</a> 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.</p> + +<p><a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Düzen görünümde(Layout)</a> 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.</p> + +<p>Bu panelde, kutu modeli özelliklerinden biri olan <code>box-sizing</code> öğenin hangi kutu modelini kullandığını kontrol eden niteliktir.</p> + +<p><strong><code>box1</code></strong><strong> ve <code>box2</code> 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 <code>box1</code> 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 <code>context-box</code> 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.</strong></p> + +<p><strong><code>box2</code> sınıfına dahil olan öğemizin kutu modeli <code>border-box</code> 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.</strong></p> + +<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Kutu Modelini İnceleme ve Düzenleme</a> bölümünden daha fazla bilgi edinebilirsin.</p> +</div> + +<h2 id="Özgüllük_sorunlarını_çözme">Özgüllük sorunlarını çözme</h2> + +<p>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.</p> + +<p>Örnek dosyamızda bir <code><em></code> öğ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:</p> + +<pre class="brush: css notranslate">em { + color: hotpink; + font-weight: bold; +}</pre> + +<p>Bunla birlikte stil sayfamda <code>.special</code> sınıf seçicisine sahip bir kuralım daha var:</p> + +<pre class="brush: css notranslate">.special { + color: orange; +}</pre> + +<p><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Art arda denetim ve miras</a> 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.</p> + +<p><strong>Kontrol görünümünde <code><em></code> öğe ve <code>.special</code> 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 <code>color</code> niteliğininde üzerinin çizik olduğunu görebilirsin. Artık aynı tür öğenin içerisinde bulunan metinlerin neden farklı olduğunu anlayabiliyoruz.</strong></p> + +<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> + +<h2 id="Firefox_Geliştirici_Araçları_hakkında_daha_fazla_bilgi_edinin">Firefox Geliştirici Araçları hakkında daha fazla bilgi edinin</h2> + +<p>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 <a href="/tr/docs/Tools">DevTools bölümüne</a> ve <a href="/tr/docs/Tools/Page_Inspector#How_to">Nasıl Yapılır Rehberi'ne</a> bakın.</p> + +<h2 id="CSSde_hata_ayıklama_sorunları">CSS'de hata ayıklama sorunları</h2> + +<p>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.</p> + +<h3 id="Sorundan_bir_adım_uzaklaşın">Sorundan bir adım uzaklaşın</h3> + +<p>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.</p> + +<h3 id="HTML_ve_CSS_kodların_geçerli_mi">HTML ve CSS kodların geçerli mi?</h3> + +<p>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.</p> + +<ul> + <li><a href="https://jigsaw.w3.org/css-validator/">CSS doğrulayıcı</a></li> + <li><a href="https://validator.w3.org/">HTML doğrulayıcı</a></li> +</ul> + +<h3 id="Nitelik_ve_değer_test_ettiğin_tarayıcı_tarafından_destekleniyor_mu">Nitelik ve değer, test ettiğin tarayıcı tarafından destekleniyor mu?</h3> + +<p>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.</p> + +<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> + +<p>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.</p> + +<p>{{Compat("css.properties.shape-outside")}}</p> + +<h3 id="CSSini_geçersiz_kılan_başka_bir_etken_mi_var">CSS'ini geçersiz kılan başka bir etken mi var?</h3> + +<p>Ö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.</p> + +<h3 id="İndirgenmiş_test_senaryosu">İndirgenmiş test senaryosu</h3> + +<p>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.</p> + +<p>İ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.</p> + +<p>İndirgenmiş bir test senaryosu oluşturmak:</p> + +<ol> + <li>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. <a href="https://codepen.io/">CodePen</a> 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.</li> + <li>JavaScript'i kaldırıp sorunun devam edip etmediğine bakın. Eğer javascript kaldırmanız sorunu çözmediyse javascript kodunuzu yeniden ekleyin.</li> + <li>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.</li> + <li>Sorunu etkilemeyen tüm CSS'leri kaldırın.</li> +</ol> + +<p>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.</p> + +<p>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.</p> + +<p>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 <a href="https://bugzilla.mozilla.org">bugzilla</a> sitesi).</p> + +<p>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")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> 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 new file mode 100644 index 0000000000..372e9d8f6b --- /dev/null +++ b/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,168 @@ +--- +title: Farklı metin yönlerini kullanma +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> + +<p>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.</p> + +<p>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 <strong>yazma modu</strong> 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Modern CSS için yazma modlarının önemini anlamak.</td> + </tr> + </tbody> +</table> + +<h2 id="Yazma_modları_nelerdir">Yazma modları nelerdir?</h2> + +<p>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.</p> + +<p>Aşağıdaki örnekte <code>writing-mode: vertical-rl</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> + +<p><code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> niteliği için olası üç değer şunlardır:</p> + +<ul> + <li><code>horizontal-tb</code>: Yukarıdan aşağıya blok akış yönü. Cümleler yatay olarak ilerler.</li> + <li><code>vertical-rl</code>: Sağdan sola blok akış yönü. Cümleler dikey olarak ilerler.</li> + <li><code>vertical-lr</code>: Soldan sağa blok akış yönü. Cümleler dikey olarak ilerler.</li> +</ul> + +<p>Yani <code>writing-mode</code> 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.</p> + +<h2 id="Yazma_modları_ve_blok_ve_satır_içi_düzen">Yazma modları ve blok ve satır içi düzen</h2> + +<p><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">Blok ve satır içi düzeni</a>, 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.</p> + +<p>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 <code>writing-mode: horizontal-tb</code>, sayfanın üstünden altına doğru yatay eksende hareket eden bir yazma modu kullanır. İkincisi <code>writing-mode: vertical-rl</code>; sayfanın sağından sola doğru dikey eksende hareket eden bir yazma modudur.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> + +<p>Yazma modunu değiştirdiğimizde, aslın hangi yönün blok ve hangisinin de satır içi olduğunu belirliyoruz. Bir <code>horizontal-tb</code> yazma modunda blok yönü yukarıdan aşağıya doğru ilerler; bir <code>vertical-rl</code> yazma modunda blok yönü yatay olarak sağdan sola ilerler. Daha iyi açıklamak istersek; <strong>block dimension:</strong> 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. <strong>inline dimension: </strong>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.</p> + +<p>Bu şekil, yatay yazma modundayken iki boyutu göstermektedir.</p> + +<p>,<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png"></p> + +<p>Bu şekil, dikey yazma modundaki iki boyutu göstermektedir.</p> + +<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p> + +<p>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.</p> + +<h3 id="Yön">Yön</h3> + +<p><span>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 </span>— 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.</p> + +<p>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 <em>başlangıç</em> ve <em>bitiş</em> 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.</p> + +<h2 id="Mantıksal_özellikler_ve_değerler">Mantıksal özellikler ve değerler</h2> + +<p>Öğ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.</p> + +<p>İki kutumuza tekrar bir göz atalım — biri <code>horizontal-tb</code> ve diğeride <code>vertical-rl</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> + +<p>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.</p> + +<p>Bunu kolaylaştırmak için, CSS yakın zamanda bir dizi eşlenmiş özellik geliştirdi. Bunlar esasen fiziksel özellikleri — <code>width</code> ve <code>height</code> gibi — <strong>mantıksal</strong> veya <strong> akışla ilgili</strong> sürümlerle değiştirir.</p> + +<p>Yatay yazma modundayken çağırılan {{cssxref("inline-size")}} niteliği satır içi boyuttaki <code>width</code>'yi ifade eder. {{cssxref("block-size")}} niteliği ise blok boyuttaki <code>height</code> boyutunu ifade eder. Bunların nasıl çalıştığını aşağıdaki örnekte görebilirsin. <code>inline-size</code> ile <code>width</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p> + +<h3 id="Mantıksal_kenar_boşluğu_kenarlık_ve_dolgu_nitelikleri">Mantıksal kenar boşluğu, kenarlık ve dolgu nitelikleri</h3> + +<p>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.</p> + +<p><code>margin-top</code> niteliğinin eşlemesi olan {{cssxref("margin-block-start")}}, her zaman kenar boşluğunun blok boyutunun başında olmasını sağlayacaktır.</p> + +<p>{{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.</p> + +<p>Aşağıda fiziksel ve mantıksal nitelikler arasında bir karşılaştırma görebilirsin.</p> + +<p><strong>Eğer <code>.box</code> sınıfı içerisindeki <code>writing-mode</code>'u </strong><strong><code>vertical-rl</code> olarak değiştirirsen, fiziksel boyut ile mantıksal niteliklerin yazma modu üzerindeki etkisini daha iyi anlayabilirsin.</strong></p> + +<p><strong>Ayrıca </strong><strong>{{htmlelement("h2")}} etiketinin <code>border-bottom</code> 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?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> + +<p>Tek tek kenarlık uzuntanımları göz önünde bulundurduğunda çok sayıda nitelik vardır ve <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Mantıksal Özellikler ve Değerler</a> için MDN sayfasında eşlenen tüm nitelikleri görebilirsin.</p> + +<h3 id="Mantıksal_değerler">Mantıksal değerler</h3> + +<p>Şimdiye kadar mantıksal nitelik adlarına baktık. Fiziksel yönleri belirten bazı nitelik son ekleri vardır <code>top</code>, <code>right</code>, <code>bottom</code>, ve <code>left</code>. Bu yönleri belirten eklerin de eşleştirmeleri vardır — mantıksal son eklerine bakacak olursa, <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, ve <code>inline-start</code>.</p> + +<p>Örneğin, metnin resmin etrafına sarılmasına neden olmak için bir resmi sola kaydırmak isteyebilirsin. <code>left</code> değerinin yerini <code>inline-start</code> değerinin aldığını görebilirsin</p> + +<p><strong>Resim üzerinde nasıl bir etkisi olduğunu görebilmek için <code>horizontal-tb</code> değerini <code>vertical-rl</code> ile değiştirebilirsin. Ayrıca <span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace;'>float</span><span style="background-color: #ffffff;"> niteliğindeki </span><code>inline-start</code> değerini <code>inline-end</code> ile değiştirin.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p> + +<p>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.</p> + +<div class="blockIndicator note"> +<p>Şu anda, yalnız"ca Firefox için <code>float</code> akış kontrol değerleri desteklenmektedir. Eğer <strong>Google Chrome</strong> veya <strong>Microsoft Edge</strong> kullanıyorsan, metnin kaymadığını fark edebilirsin.</p> +</div> + +<h3 id="Fiziksel_veya_mantıksal_özellikleri_kullanmalı_mısın">Fiziksel veya mantıksal özellikleri kullanmalı mısın?</h3> + +<p>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.</p> + +<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> + +<p>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. <a href="/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Becerilerini test edin: yazma modları</a>.</p> + +<h2 id="Özet">Özet</h2> + +<p>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.</p> + +<p>Bir sonraki modülde, CSS'deki taşmayı derinlemesine ele alacağız.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> + <li>/ol></li> +</ol> 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 new file mode 100644 index 0000000000..44d6747ddd --- /dev/null +++ b/files/tr/learn/css/building_blocks/images_media_form_elements/index.html @@ -0,0 +1,211 @@ +--- +title: 'Görseller, medya ve form öğeleri' +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> + +<p>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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Bazı öğelerin CSS ile stil verildiğinde alışılmadık davranışlar göstermesini anlamak</td> + </tr> + </tbody> +</table> + +<h2 id="Yenilenen_öğeler">Yenilenen öğeler</h2> + +<p>Görüntüler ve medyalar <strong><a href="/en-US/docs/Web/CSS/Replaced_element">yenilenen öğeler</a></strong> 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.</p> + +<p>Görüntüler ve medyalar gibi bazı değiştirilebilen öğeler de bir <strong>en boy oranına</strong> 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.</p> + +<h2 id="Görüntüleri_boyutlandırma">Görüntüleri boyutlandırma</h2> + +<p>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.</p> + +<p>Aşağıdaki örnekte, her ikisi de 200 piksel boyutunda iki kutumuz var:</p> + +<ul> + <li>Biri 200 pikselden daha küçük bir görüntü içeriyor — kutudan daha küçük ve onu doldurmak için genişlemiyor.</li> + <li>Diğeri 200 pikselden büyüktür ve kutunun sınırları dışına taşmaktadır.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> + +<p>Öyleyse taşma konusu hakkında ne yapabiliriz?</p> + +<p><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Önceki dersimizde</a> öğ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, <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code>lar ve <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>ler içinde geçerlidir.</p> + +<p><strong>Yukarıdaki örnekte bulunan <code><img></code> öğesine <code>max-width: 100%;</code> 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.</strong></p> + +<p>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.</p> + +<p>Bunu sağlamak için {{cssxref("object-fit")}} niteliği size yardımcı olacaktır. <code>object-fit</code> niteliği yenilenebilen öğelerde kullanıldığında, görselin kutuya sığabilmesi için çeşitli şekillerde bize yardımcı olur..</p> + +<p>Aşağıda <code>cover</code>, 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> + +<p>Değer olarak <code>contain</code>'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.</p> + +<p><code>fill</code> 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.</p> + +<h2 id="Düzende_yenilenebilen_öğeler">Düzende yenilenebilen öğeler</h2> + +<p>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.</p> + +<p>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 <code><div></code> öğ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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> + +<p>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.</p> + +<p>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:</p> + +<pre class="brush: css notranslate">img { + width: 100%; + height: 100%; +}</pre> + +<p>Ancak bu, görüntüyü uzatır ve bu olmasını istediğin bir görünüm değidir.</p> + +<h2 id="Form_öğeleri">Form öğeleri</h2> + +<p>Form öğeleri, CSS ile stil oluşturma söz konusu olduğunda zor bir konu olabilir ve <a href="/en-US/docs/Learn/Forms">Web Formları dersi</a>, 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.</p> + +<p><code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code> 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 <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code> 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 — <code><a href="/en-US/docs/Web/HTML/Element/fieldset"><fieldset></a></code> ve <code><a href="/en-US/docs/Web/HTML/Element/legend"><legend></a></code> gibi.</p> + +<p>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.</p> + +<h3 id="Metin_giriş_öğelerini_şekillendirme">Metin giriş öğelerini şekillendirme</h3> + +<p>Metin girişine izin veren <code><input type="text"></code> gibi, belirli türlerin girişine izin veren <code><input type="email"></code> gibi ve birden fazla satıra sahip metin girişine izin veren <code><textarea></code> 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.</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> + +<div class="blockIndicator warning"> +<p><strong>Önemli</strong>: 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.</p> +</div> + +<p>Bu kursun HTML bölümündeki <a href="/en-US/docs/Learn/Forms/Styling_web_forms">form stiliyle</a> 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.</p> + +<h3 id="Kalıtım_ve_form_öğeleri">Kalıtım ve form öğeleri</h3> + +<p>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.</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family : inherit; + font-size : 100%; +} </code></pre> + +<h3 id="Form_öğeleri_ve_kutu_boyutlandırma">Form öğeleri ve kutu boyutlandırma</h3> + +<p>Tarayıcılar arasında form öğleri, farklı widget'ler için farklı kutu boyutlandırma kuralları kullanır. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli dersimizde</a> <code>box-sizing</code> 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.</p> + +<p>Tutarlılık için tüm öğelerde kenar boşlukları ve dolgu değerlerini <code>0</code> olarak ayarlamak ve ardından belirli kontrolleri şekillendirirken bunları tekrardan tanımlamak iyi bir fikirdir.</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + box-sizing: border-box; + padding: 0; + margin: 0; +}</code></pre> + +<h3 id="Diğer_kullanışlı_ayarlar">Diğer kullanışlı ayarlar</h3> + +<p>Yukarıda belirtilen kurallara ek olarak, hiç gereği yokken <code><textarea></code> öğesinde bir kaydırma çubuğu gösteren IE'yi durdurmak için, <code>overflow: auto</code> tanımını yapın:</p> + +<pre class="brush: css notranslate">textarea { + overflow: auto; +}</pre> + +<h3 id="Hepsini_bir_araya_getirerek_sıfırlamak">Hepsini bir araya getirerek "sıfırlamak"</h3> + +<p>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:</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + padding: 0; margin: 0; +} + +textarea { + overflow: auto; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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 <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> bakabilirsin.</p> +</div> + +<p>Biçimlendirme formları hakkında daha fazla bilgi için, MDN'nin HTML bölümdeki iki derse göz atın.</p> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Web formlarını şekillendirme</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Gelişmiş form stili</a></li> +</ul> + +<h2 id="Becerilerini_test_edin!">Becerilerini test edin!</h2> + +<p>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. <a href="/en-US/docs/Learn/CSS/Building_blocks/Images_tasks">Becerilerini test et: Görüntüler ve form öğeleri.</a></p> + +<h2 id="Özet">Özet</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> diff --git a/files/tr/learn/css/building_blocks/index.html b/files/tr/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..e898c37760 --- /dev/null +++ b/files/tr/learn/css/building_blocks/index.html @@ -0,0 +1,101 @@ +--- +title: CSS yapı taşları +slug: Öğren/CSS/CSS_yapi_taslari +tags: + - Başlangıç + - Beginner + - CSS + - Learn + - building blocks + - kutu oluşturmak + - Öğrenme +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Bu derste, <a href="/tr/docs/Learn/CSS/First_steps">CSS'in ilk adımlarının</a> 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.</p> + +<p class="summary">Buradaki amaç, sana yeterli CSS yazman için altyapı hazırlamak ve <a href="/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha karakteristik kurallara geçmeden önce tüm temel teorileri anlamana yardımcı olmak</p> + +<div class="in-page-callout webdev"> +<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</h3> + +<p><span>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık</span>.</p> + +<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p> +</div> + +<h2 id="Gereksinimler">Gereksinimler</h2> + +<p>Bu üniteye başlamadan önce şunlara sahip olmalısın:</p> + +<ol> + <li>Bilgisayar kullanma ve Web'i sıradan bir şekilde kullanma (örn. web sayfalarında dolaşma, web üzerinde araştırma yapabilme)</li> + <li><a href="https://developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Gerekli uygulamaların yüklenmesi</a> bölümünde ayrıntılı olarak verilen çalışma ortamı ve <a href="https://developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışmak</a> 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ı</li> + <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> ünitesinde tartışıldığı gibi alt yapıya sahip olmak.</li> + <li><a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adımlar</a> ünitesinde açıklanan temellerin anlaşılması.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: 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: <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Kılavuzlar">Kılavuzlar</h2> + +<p>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.</p> + +<dl> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Art arda denetim ve miras</a></dt> + <dd> + <p>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 <a title="Cascade: Adım adım kontrol">art arda denetim</a>, <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> ve miras anlayışını geliştirmektir.</p> + </dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a></dt> + <dd>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: + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></dt> + <dd>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 <em>Kutu Modeline</em> derinlemesine bakacağız.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönlerini kullanma</a></dt> + <dd>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 <strong>yazma modu</strong> 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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></dt> + <dd>Bu derste CSS'deki başka bir önemli soruna bakacağız — <strong>taşma</strong>. 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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">CSS değerleri ve birimleri</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutlandırma</a></dt> + <dd>Ş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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form nesneleri</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Değerlendirmeler">Değerlendirmeler</h2> + +<p>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.</p> + +<dl> + <dt><a href="/tr/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Temel CSS anlayışı</a></dt> + <dd>Bu değerlendirme, temel sözdizimi, seçiciler, özgüllük, kutu modeli ve daha fazlası hakkında öğrendiklerini sınar.</dd> + <dt><a href="/tr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Süslü antetli kağıt oluşturma</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Harika görünümlü bir kutu</a></dt> + <dd>Burada, göz alıcı bir kutu oluşturmak için arka plan ve kenarlık stilini kullanma konusunda biraz pratik yapacağız.</dd> +</dl> + +<h2 id="Göz_at">Göz at</h2> + +<dl> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Gelişmiş stil efektleri</a></dt> + <dd>Bu makale, kutu gölgleri, karışım modları ve filtreler gibi bazı ilginç gelişmiş stil özelliklerine giriş sağlayan bir <em>numara kutusu</em> görevi görür.</dd> +</dl> diff --git a/files/tr/learn/css/building_blocks/organizing/index.html b/files/tr/learn/css/building_blocks/organizing/index.html new file mode 100644 index 0000000000..383d4db9e5 --- /dev/null +++ b/files/tr/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,376 @@ +--- +title: CSS planlama +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<h2 id="CSSi_düzenli_tutmak_için_ipuçlar">CSS'i düzenli tutmak için ipuçlar</h2> + +<p>Düzenli stil sayfaları yazmak ve stül sayfalarını düzenli tutmak için bazı genel öneriler</p> + +<h3 id="Projende_kodlama_stili_rehberin_var_mı">Projende kodlama stili rehberin var mı?</h3> + +<p>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.</p> + +<p>Örneğin, <a href="/tr/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN kod örnekleri için CSS yönergelerine</a> bir göz atın.</p> + +<h3 id="Tutarlı_olmasını_sağlayın">Tutarlı olmasını sağlayın</h3> + +<p>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?)</p> + +<p>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.</p> + +<h3 id="CSS_biçimlendirmen_okunabilir_olsun">CSS biçimlendirmen okunabilir olsun</h3> + +<p>CSS'i biçimlendirmenin birkaç yolu vardır. Bazı geliştiriciler, tüm kuralları tek bir satıra koyar. Örneğin:</p> + +<pre class="brush: css notranslate">.box { background-color: #567895; } +h2 { background-color: black; color: white; }</pre> + +<p>Diğer geliştiriciler her şeyi yeni bir satıra ayırmayı tercih ediyor:</p> + +<pre class="brush: css notranslate">.box { + background-color: #567895; +} + +h2 { + background-color: black; + color: white; +}</pre> + +<p>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.</p> + +<h3 id="CSS_hakkında_yorumlarda_bulun">CSS hakkında yorumlarda bulun</h3> + +<p>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.</p> + +<pre class="brush: css notranslate">/* Bu bir CSS yorumudur +Birden fazla satıra bölünebilir. */</pre> + +<p>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 <code>||</code> mantıksal işaretini kullandım.</p> + +<pre class="brush: css notranslate">/* || Genel stiler */ + +... + +/* || Yazıları şekillendir */ + +... + +/* || Üst bilgi ve ana gezinti bölmesi */ + +... + +</pre> + +<p>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.</p> + +<p>Eski tarayıcı uyumsuzluklarını aşmak için eski tarayıcıların desteklediği bir bildirimde bulunmuş olabilirsin. Örneğin:</p> + +<pre class="brush: css notranslate">.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); +} +</pre> + +<p>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ı.</p> + +<h3 id="Stil_sayfanda_mantıksal_bölümler_oluştur.">Stil sayfanda mantıksal bölümler oluştur.</h3> + +<p>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:</p> + +<ul> + <li><code>body</code></li> + <li><code>p</code></li> + <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> + <li><code>ul</code> ve <code>ol</code></li> + <li><code>table</code> özellikleri</li> + <li>Bağlantılar</li> +</ul> + +<p>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.</p> + +<pre class="brush: css notranslate">/* || Genel Stiller */ + +body { ... } + +h1, h2, h3, h4 { ... } + +ul { ... } + +blockquote { ... } +</pre> + +<p>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.</p> + +<pre class="brush: css notranslate">/* || Araçlar */ + +.nobullets { + list-style: none; + margin: 0; + padding: 0; +} + +... + +</pre> + +<p>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.</p> + +<pre class="brush: css notranslate">/* || Site geneli */ + +.main-nav { ... } + +.logo { ... } +</pre> + +<p>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.</p> + +<pre class="brush: css notranslate">/* || Site sayfaları */ + +.product-listing { ... } + +.product-box { ... } +</pre> + +<p>Ç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.</p> + +<h3 id="Aşırı_karakteristik_seçicilerden_kaçının">Aşırı karakteristik seçicilerden kaçının</h3> + +<p>Ç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, <code>main</code> sınıfına dahil <code><article></code> öğesinin torunlarından <code>box</code> sınıfına dahil <code><p></code> öğeleri için bir kuralımız olabilir.</p> + +<pre class="brush: css notranslate">article.main p.box { + border: 1px solid #ccc; +}</pre> + +<p>Fakat daha sonra aynı kuralları <code>main</code> sınıfına dahil olmayan ebeveyne sahip öğeye veya <code><p></code> öğ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 <code>.box</code> seçiciye sahip bir kural oluşturur ve bu kuralı uygulamak istediğimiz tüm öğeleri <code>box</code> sınıfına dahil ederiz.</p> + +<pre class="brush: css notranslate">.box { + border: 1px solid #ccc; +}</pre> + +<p>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.</p> + +<h3 id="Büyük_stil_sayfalarını_daha_küçük_parçalara_bölün">Büyük stil sayfalarını daha küçük parçalara bölün</h3> + +<p>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.</p> + +<p>Ö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.</p> + +<p>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.</p> + +<h2 id="Yardımcı_olabilecek_diğer_araçlar">Yardımcı olabilecek diğer araçlar</h2> + +<p>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.</p> + +<h3 id="CSS_metodolojileri">CSS metodolojileri</h3> + +<p>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.</p> + +<p>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.</p> + +<h4 id="OOCSS">OOCSS</h4> + +<p>Karşılaşacağın yaklaşımların çoğu, <a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan'ın çalışmasıyla</a> 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, <a href="/tr/docs/Web/CSS/Layout_cookbook/Media_objects">Media Nesnesi</a> 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.</p> + +<p>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 <code>comment</code> adlı bir sınıf ve neredeyse <code>comment</code> sınıfıyla arasında bazı farklılıklar haricinde aynı olan <code>list-item</code> 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.</p> + +<pre class="brush: css notranslate">.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; +}</pre> + +<p>OOCSS'de, her iki bileşen içinde ortak CSS'e sahip olan <code>media</code> 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.</p> + +<pre class="brush: css notranslate">.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; +} </pre> + +<p>HTML'emizdeki yorum kısmının hem <code>media</code>, hem de <code>comment</code> sınıflarına dahil edilmesi gerekir:</p> + +<pre class="brush: html notranslate"><div class="media comment"> + <img /> + <div class="content"></div> +</div> +</pre> + +<p>Liste öğelerinin de hem <code>media</code>, hem de <code>list-item</code> sınıfklarına dahil edilmesi gerekir:</p> + +<pre class="brush: html notranslate"><ul> + <li class="media list-item"> + <img /> + <div class="content"></div> + </li> +</ul></pre> + +<p>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.</p> + +<h4 id="BEM">BEM</h4> + +<p>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, <a href="http://getbem.com/naming/">BEM Adlandırma kuralları</a> sayfasındaki HTML'ye uygulanan sınıflara bakın:</p> + +<pre class="brush: html notranslate"><form class="form form--theme-xmas form--simple"> + <input class="form__input" type="text" /> + <input + class="form__submit form__submit--disabled" + type="submit" /> +</form></pre> + +<p>Ek sınıflar, OOCSS örneğinde kullanılanlara benzer, ancak BEM katı adlandırma kuralları kullanır.</p> + +<p>BEM, daha büyük web projelerinde yaygın olarak kullanılmaktadır ve birçok kişi CSS'lerini bu şekilde yazmaktadır.</p> + +<p>Sistem hakkında daha fazla bilgi edinmek için CSS Hileleri üzerine <a href="https://css-tricks.com/bem-101/">BEM 101'i</a> okuyun.</p> + +<h4 id="Diğer_yaygın_sistemler">Diğer yaygın sistemler</h4> + +<p>Kullanımda olan bu sistemlerden daha fazlası da vardır. Diğer popüler yaklaşımlar arasında Jonathan Snook tarafından oluşturulan <a href="http://smacss.com/">Ölçeklenebilir ve Modüler CSS Mimarisi(SMACSS)</a>, Harry Roberts'tan <a href="https://itcss.io/">ITCSS</a> ve Yahoo! tarafından oluşturulan <a href="https://acss.io/">Atomic CSS (ACSS)</a> 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.</p> + +<p>Böyle bir sistemi kullanmanın dezavantajı, özellikle küçük projeler için aşırı derecede karmaşık görünebilmeleridir.</p> + +<h3 id="CSS_için_bir_sistem_oluşturun.">CSS için bir sistem oluşturun.</h3> + +<p>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.</p> + +<p>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.</p> + +<p>En popüler ön işlemci <a href="https://sass-lang.com/">Sass</a>'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, <a href="https://sass-lang.com/guide">Sass Temelleri</a> makalesi ile başlayın ve ardından diğer belgelerine geçin.</p> + +<h4 id="Değişken_tanımlama">Değişken tanımlama</h4> + +<p>CSS artık yerel <a href="/tr/docs/Web/CSS/Using_CSS_custom_properties">özel özelliklere</a> 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.</p> + +<p>Aşağıdaki ilk satırdaki gibi bir <code>$base-color</code> değişkeni tanımlarsak, onu stil sayfası aracıyla bu rengi kullanmamız gereken her yerde kullanabiliriz.</p> + +<pre class="brush: css notranslate"><code>$base-color: #c6538c; + +.alert { + border: 1px solid $base-color; +}</code></pre> + +<p>CSS derlendikten sonra aşağıdaki gibi gözükecektir.</p> + +<pre class="brush: css notranslate"><code>.alert { + border: 1px solid #c6538c; +}</code></pre> + +<h4 id="Birleşen_stil_sayfalarını_derlemek">Birleşen stil sayfalarını derlemek</h4> + +<p>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.</p> + +<p>Örneğin, <a href="https://sass-lang.com/documentation/at-rules/use#partials">partials(kısımlar)</a> ile bir dizin içerisinden birkaç stil dosyaların olabilir: Diyelim ki <code>foundation/_code.scss</code>, <code>foundation/_lists.scss</code>, <code>foundation/_footer.scss</code>, <code>foundation/_links.scss</code> vb. dosyaların olsun. Bunları Sass'da kullanmak için <code>@use</code> bildirimini kullanabilirsin:</p> + +<pre class="brush: css notranslate">// foundation/_index.sass +@use 'code' +@use 'lists' +@use 'footer' +@use 'links'</pre> + +<p>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:</p> + +<pre class="brush: css notranslate">// style.sass +@use 'foundation'</pre> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Sass'ı denemenin basit bir yolu <a href="https://codepen.io">CodePen</a> 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.</p> +</div> + +<h4 id="Optimizasyon_için_son_işlem">Optimizasyon için son işlem</h4> + +<p>Ö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 <a href="https://cssnano.co/">cssnano</a>.</p> + +<h2 id="Bundan_sonra">Bundan sonra</h2> + +<p>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.</p> + +<p>CSS'de mizanpaj hakkında daha fazla bilgi edinmek için <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Mizanpajını Hakkında</a> bölümüne bakabilirsin.</p> + +<p>Artık <a href="/tr/docs/Web/CSS">MDN CSS</a> materyalinin geri kalanını keşfetme becerisine sahip olmalısın. özellikleri ve değerleri arayabilir, kullanılacak kalıplar için <a href="/tr/docs/Web/CSS/Layout_cookbook">CSS YemekKitabını</a> inceleyebilir ve <a href="/tr/docs/Web/CSS/CSS_Grid_Layout">CSS Izgara Düzeni Rehberi</a> gibi bazı özel kılavuzlardan daha fazlasını okuyabilirsin.</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> +</ol> diff --git a/files/tr/learn/css/building_blocks/overflow_tasks/index.html b/files/tr/learn/css/building_blocks/overflow_tasks/index.html new file mode 100644 index 0000000000..7ee1ceaad0 --- /dev/null +++ b/files/tr/learn/css/building_blocks/overflow_tasks/index.html @@ -0,0 +1,66 @@ +--- +title: 'Becerilerinizi test edin: Taşma' +slug: Öğren/CSS/CSS_yapi_taslari/Overflow_Tasks +tags: + - Acemi + - Beginner + - CSS +translation_of: Learn/CSS/Building_blocks/Overflow_Tasks +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>Bu görevlerin amacı, CSS'deki taşma konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p> + +<p>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.</p> +</div> + +<h2 id="Birinci_Görev">Birinci Görev</h2> + +<p>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.</p> + +<p><img alt="A small box with a border and a vertical scrollbar." src="https://mdn.mozillademos.org/files/17133/mdn-overflow1.png" style="height: 456px; width: 632px;"></p> + +<p>Bitmiş örneği oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/overflow/overflow-scroll-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="İkinci_Görev">İkinci Görev</h2> + +<p>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.</p> + +<p><img alt="A box with an image which fills the box but does not spill out the edges." src="https://mdn.mozillademos.org/files/17134/mdn-overflow2.png" style="height: 389px; width: 565px;"></p> + +<p>Örneği resimde gösterildiği gibi yeniden oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/overflow/overflow-hidden-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> + +<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> + +<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> + +<ol> + <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> + <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: + <ul> + <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> + <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> + <li>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.</li> + <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> + </ul> + </li> +</ol> diff --git a/files/tr/learn/css/building_blocks/overflowing_content/index.html b/files/tr/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..5f332ca348 --- /dev/null +++ b/files/tr/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,140 @@ +--- +title: İçerik taşması +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> + +<p>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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Taşmayı ve onu nasıl yöneteceğini anlamak.</td> + </tr> + </tbody> +</table> + +<h2 id="Taşma_nedir">Taşma nedir?</h2> + +<p>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. <strong>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.</strong> 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.</p> + +<h2 id="CSS_veri_kaybını_önlemeye_çalışır">CSS, "veri kaybını" önlemeye çalışır</h2> + +<p>Taşma olduğunda CSS'in varsayılan davranışını gösteren iki örneği ele alım.</p> + +<p>İlk örnek, <code>height</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> + +<p>İ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ı.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> + +<p>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?</p> + +<p>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.</p> + +<p>Bir kutuya <code>width</code> veya <code>height</code> 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)</p> + +<p>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.</p> + +<h2 id="Taşma_niteliği_overflow">Taşma niteliği: <code>overflow</code></h2> + +<p>{{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 <code>visible</code>'dir. Bu varsayılan ile içeriği taştığını da görebiliriz.</p> + +<p>Taşan içeriği gizlemek için de ayarlayabilirsin; <code>overflow: hidden</code>. 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> + +<p>Bunun yerine, belki de içerik taştığında kaydırma çubukları eklemek istersen; <code>overflow: scroll</code>. 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.</p> + +<p><strong>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.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> + +<p>Yukarıdaki örnekte, sadece <code>y</code> ekseni için kaydırmamız gerekiyor, ancak her iki eksende de kaydırma çubukları görünüyor. Sadece <code>y</code> ekseninde kaydırma çubuğu olsun istiyorsak {{cssxref("overflow-y")}} niteliğini kullanmamız gerekiyor, tanımlama <code>overflow-y: scroll</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> + +<p>{{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, <a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğeleri boyutlandırma bölümünde</a> tartışılan yöntemlerden bazıları, değişken içerik miktarlarını daha iyi ölçeklendiren kutular oluşturmana yardımcı olabilir.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> + +<p><code>scroll</code>'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.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: <code>overflow</code> 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, <code>overflow: scroll hidden</code>'nin açılımı: <code>overflow-x: scrool</code> ve <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">overflow-y: hidden</span></font> olacak şekilde yorumlanacaktır.</p> +</div> + +<p>Kaydırma çubuklarının sadece kutuya sığamayacak kadar fazla içerik olduğunda görünmesini istiyorsan, <code>overflow:auto</code> 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.</p> + +<p><strong>Aşağıdaki örnekte, kutuya sığana kadar içeriği silin. Kaydırma çubuklarının kaybolduğunu görmelisin.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> + +<div class="blockIndicator note"> +<p><strong>Not:</strong> 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ı)</p> +</div> + +<h2 id="Taşma_Blok_Biçimlendirme_Kapsamı_oluşturur">Taşma, Blok Biçimlendirme Kapsamı oluşturur</h2> + +<p><code>scroll</code> veya <code>auto</code> gibi bir taşma değeri kullandığında, <strong>Blok Biçimlendirme Kapsamı(Block Formatting Context - BFC)</strong> oluşturursun. <code>overflow</code> 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.</p> + +<h2 id="Web_tasarımında_istenmeyen_taşma">Web tasarımında istenmeyen taşma</h2> + +<p>Modern yerleşim yöntemleri (<a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeninde</a> 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.</p> + +<p>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.</p> + +<p>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)</p> + +<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> + +<p>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. <a href="/tr/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Becerilerini test edin: taşma</a>.</p> + +<h2 id="Özet">Özet</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> 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 new file mode 100644 index 0000000000..9da820f78a --- /dev/null +++ b/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,153 @@ +--- +title: CSS'de öğeleri boyutlandırma +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<p>https://wiki.developer.mozilla.org/tr/docs/%C3%96%C4%9Fren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS$edit</p> + +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> + +<p>Ş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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>CSS'de nesneleri boyutlandırmanın farklı yollarını anlamak.</td> + </tr> + </tbody> +</table> + +<h2 id="Nesnelerin_doğal_veya_içsel_boyutu">Nesnelerin doğal veya içsel boyutu</h2> + +<p>HTML öğeleri, herhangi bir CSS'den etkilenmeden önce ayarlanmış doğal bir boyuta sahiptir. Görüntü buna iyi bir örnektir. Bir <code><image></code>'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 <strong>gerçek boyut</strong> olarak tanımlanır.</p> + +<p>Bir sayfaya bir resim yerleştirirsen ve yüksekliğini, genişliğini <code><img></code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> + +<p>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 <code><div></code> blok boyutundaki boyutu içeriğin boyutundan gelmektedir. Yani içeriğindeki öğenin gerçek boyutuyla öğemizin boyutu belirlenir.</p> + +<h2 id="Belirli_bir_boyut_belirleme">Belirli bir boyut belirleme</h2> + +<p>Elbette tasarımımızdaki öğelere belirli bir boyut verebiliriz. Bir öğenin boyutunu biz belirtirsek buna <strong>dışsal boyut</strong> denir. Yukarıdaki <code><div></code> ö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. <a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşma konusundaki dersimizde</a> öğ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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> + +<p>Taşma sorunu nedeniyle, web tasarımı yaparken öğelere vereceğin yüksekliklere çok dikkat etmelisin.</p> + +<h3 id="Yüzdeler_kullanma">Yüzdeler kullanma</h3> + +<p>Yüzdeler birçok yönden uzunluk birimleri gibi davranır ve <a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">değerler ve birimlerle ilgili derste</a> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> + +<p>Bunun nedeni, yüzdelerin kapsayıcı bloğunun boyutuna göre çözülmesidir. <code><div></code>'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.</p> + +<h3 id="Yüzde_kenar_boşlukları_ve_dolgu">Yüzde kenar boşlukları ve dolgu</h3> + +<p>Eğer <code>margins</code> ve <code>padding</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> + +<p>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!</p> + +<p>Yüzdelik cinsinden kenar boşluğu ve dolgu niteliğini tanımladığında, yüzdelik ebeveynin <strong>satır içi boyutundan</strong> 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.</p> + +<h2 id="min-_ve_max-_boyutlar">min- ve max- boyutlar</h2> + +<p>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 <em>en azından</em> 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.</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> + +<p>Bu teknik değişken içeriğe sahip olan öğelerde taşmayı önelemek için çok kullanışlıdır.</p> + +<p>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.</p> + +<p>Misal; <code>width: 100%</code> 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.</p> + +<p>Bunun yerine <code>max-width: 100%</code> 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.</p> + +<p>Aşağıdaki örnekte aynı resmi üç kez kullandık. İlk görüntüye <code>width: 100%</code> 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ü <code>max-width: 100%</code> tanımlası yapıldı, bu nedenle kutuyu duldurmak için genişlemiyor sadece kendi iç boyutu kadar genişliyor. üçüncü kutu yine <code>max-width: 100%</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> + +<p>Bu teknik, görüntüleri <em>duyarlı</em> 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.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: <a href="/tr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Duyarlı görüntüleme teknikleri</a> hakkında daha fazla bilgi edinin.</p> +</div> + +<h2 id="Görüntü_alanı_birimleri">Görüntü alanı birimleri</h2> + +<p>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(<code>vw</code>) ve görüntüleme alanı yüksekliği(<code>vh</code>) birimi. Bu birimleri kullanarak, kullanıcının görüntüleme alanına göre herhangi bir öğeyi boyutlandırabilirsin.</p> + +<p><code>1vw</code> görüntüleme alanının genişliğinin %1'ine, <code>1vh</code>'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 <code>font-size</code>'ı 10vh olan bir "A" harfi var.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> + +<p><strong>Eğer <code>vh</code> ve <code>vw</code> 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 <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">örneği yeni bir pencerede açın</a>(yukarıdaki örnek <code><iframe></code> 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)</strong></p> + +<p>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 <strong>100vh</strong> 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.</p> + +<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> + +<p>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. <a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Becerilerini test et: Boyutlandırma</a>.</p> + +<h2 id="Özet">Özet</h2> + +<p>Bu ders de web'deki öğeleri boyutlandırırken karşılaşabileceğin bazı temel sorunların bir özetini anlattım. <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Düzenine</a> 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.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> diff --git a/files/tr/learn/css/building_blocks/sizing_tasks/index.html b/files/tr/learn/css/building_blocks/sizing_tasks/index.html new file mode 100644 index 0000000000..ffccae6a72 --- /dev/null +++ b/files/tr/learn/css/building_blocks/sizing_tasks/index.html @@ -0,0 +1,82 @@ +--- +title: 'Becerilerinizi test edin: Boyutlandırma' +slug: Öğren/CSS/CSS_yapi_taslari/Sizing_tasks +tags: + - Acemi + - Beginner + - CSS + - Example + - Örnek +translation_of: Learn/CSS/Building_blocks/Sizing_tasks +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>Bu görevin amacı <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de Öğeleri Boyutlandırma</a> dersinde incelediğimiz bazı bazı değerler ve birimler hakkındaki öğrendiklerinizi kontrol etmenize yardımcı olmaktır.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p> + +<p>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.</p> +</div> + +<h2 id="Birinci_Görev">Birinci Görev</h2> + +<p>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.</p> + +<p>İ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.</p> + +<p><img alt="Two boxes one with overflowing content" src="https://mdn.mozillademos.org/files/17140/mdn-sizing-height-min-height.png" style="height: 551px; width: 746px;"></p> + +<p>Aşağıdaki örneği resimdeki gibi görünebilemesi için kodu düzenleyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/height-min-height-download.html">Kaynak Kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="İkinci_Görev">İkinci Görev</h2> + +<p>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.<img alt="A box with another box nested inside" src="https://mdn.mozillademos.org/files/17141/mdn-sizing-percentages.png" style="height: 274px; width: 720px;"></p> + +<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/percentages-download.html">kaynak kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="Görev_Üç">Görev Üç</h2> + +<p>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.</p> + +<p><img alt="Two boxes with images in" src="https://mdn.mozillademos.org/files/17142/mdn-sizing-max-width.png" style="height: 807px; width: 742px;"></p> + +<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/max-width-download.html">kaynak kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> + +<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> + +<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> + +<ol> + <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> + <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: + <ul> + <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> + <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> + <li>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.</li> + <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> + </ul> + </li> +</ol> diff --git a/files/tr/learn/css/building_blocks/styling_tables/index.html b/files/tr/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..c7fb4335d7 --- /dev/null +++ b/files/tr/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,330 @@ +--- +title: Tabloları şekillendirme +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>HTML tablolarının nasıl etkili bir şekilde biçimlendirileceğini öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Standart_bir_HTML_tablosu">Standart bir HTML tablosu</h2> + +<p>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.</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>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 <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> sayfasına bakın.):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>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.</p> + +<h2 id="Tablomuzu_şekillendirmek">Tablomuzu şekillendirmek</h2> + +<p>Tablo örneğimizi birlikte şekillendirmeye çalışalım.</p> + +<ol> + <li>Başlangıç olarak, <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">kaynak kodları</a> ve iki adet resmi(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>) bilgisayarınıza indirin. İndirmiş olduğunuz üç dosyayıda bilgisayarınıza bir klasöre kopyalayın.</li> + <li>Ardından, adı <code>style.css</code> olan bir dosya oluşturun ve diğer indirmiş olduğunuz dosyalarla aynı klasörün içerisine kaydedin.</li> + <li>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. + <pre class="brush: html notranslate"><link href="style.css" rel="stylesheet" type="text/css"></pre> + </li> +</ol> + +<h3 id="Aralık_ve_düzen">Aralık ve düzen</h3> + +<p>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 <code>style.css</code> dosyasına eklemelisin:</p> + +<pre class="brush: css notranslate">/* 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; +}</pre> + +<p>Dikkat edilmesi gereken en önemli kısımlar aşağıdaki gibidir:</p> + +<ul> + <li>Bir {{cssxref("table-layout")}} niteliğine atanan <code>fixed</code> 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 <code>tablo-layout: fixed</code> 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 <code>thead th:nth-child(<em>n</em>)</code> 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ığı <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a> makâlesinin çevirisine bakabilirsiniz.</li> + <li>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)</li> + <li>{{cssxref("border-collapse")}} niteliğine <code>collapse</code> 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: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Bu hoş bir görüntü oluşturmuyor(belgide istediğin bu görüntü olabilir, benimki bu değildi) <code>border-collapse: collapse;</code> bildirimi kenarlıkları teke indiriyor ve bu çok daha iyi görünüyor:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{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.</li> +</ul> + +<p>Bu noktada, tablomuz biraz daha iyi görünür:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Basit_bir_tipografi">Basit bir tipografi</h3> + +<p>Şimdi metnimizi biraz şekillendirelim.</p> + +<p><a href="https://www.google.com/fonts">Google Fonts</a>'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.</p> + +<p>Öncelikle, aşağıdaki {{htmlelement("link")}} etiketini HTML başlığınıza, css dosya <code><link></code> tanımının hemen üstüne eklemelisin:</p> + +<pre class="brush: html notranslate"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> + +<p>Şimdi, aşağıdaki CSS'i <code>style.css</code> dosyasının önceki eklemenin altına eklemelisin:</p> + +<pre class="brush: css notranslate">/* 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; +}</pre> + +<p>Bu son tanımda tablolara özgü birşey yok; genelde yazı tipi stilini okumayı kolaylaştırmak için değiştiriyoruz.</p> + +<ul> + <li>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.</li> + <li>{{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.</li> + <li>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 <code>left</code> olarak gelir. Ancak başlıkların varsayılan değerleri <code>center</code> 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.</li> + <li>{{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ı.</li> +</ul> + +<p>Sonuç biraz daha düzgün görünüyor:</p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Grafikler_ve_renler">Grafikler ve renler</h3> + +<p>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.</p> + +<p>Aşağıdaki CSS'i <code>style.css</code> dosyanıza eklemelisin:</p> + +<pre class="brush: css notranslate">/* 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; +} +</pre> + +<p>Burada da tablolara özgü bir tanım yok, ancak birkaç noktayı not etmeye değer.</p> + +<p>{{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.</p> + +<h4 id="Zebra_çizgisi">Zebra çizgisi</h4> + +<p><strong>Zebra çizgilerinin</strong> 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 <code>sytle.css</code> dosyasına eklemelisin:</p> + +<pre class="brush: css notranslate">/* 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; +}</pre> + +<ul> + <li>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 <code>2n-1</code> ile tüm tek sayılı çocukları (1, 3, 5, vb), <code>2n</code> formülü ilede tüm çift sayılı çocukları (2, 4, 6, vb) seçer. Fakat kodumuzda <code>odd</code>(tek) ve <code>even</code>(çift) anahtar kelimelerini kullandık, yukarıda belirtilen formüllerle aynı işlemi yaparak, tek ve çift sıralara farklı renkler veriyoruz.</li> + <li>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.</li> + <li>Son olarak, tüm tabloya düz bir arka plan rengi verdim ki <code>:nth-child</code> seçicisini desteklemeyen tarayıcılarda tablomuzun halen bir arka plan rengi olabilsin.</li> +</ul> + +<p>Bu renk cümbüşü aşağıdaki görünüme neden olur:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>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.</p> + +<h3 id="Başlığın_stilini_ayarlamak">Başlığın stilini ayarlamak</h3> + +<p>Tablomuzda yapmamız gereken son bir şey daha var — başlık stili vermek. Bunu yapmak için aşağıdakileri <code>style.css</code> dosyasına eklemelisin.</p> + +<pre class="brush: css notranslate">/* caption */ + +caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p>Burada <code>bottom</code> 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(<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> görmek için bakın):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="Tablo_şekillendirme_için_hızlı_ipuçları">Tablo şekillendirme için hızlı ipuçları</h2> + +<p>Devam etmeden önce, size yukarıda gösterilen en yarlı noktaların hızlı bir listesini vermem gerektiğini düşümdüm:</p> + +<ul> + <li>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.</li> + <li>{{cssxref("table-layout")}}<code>: fixed;</code> 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.</li> + <li>{{cssxref("border-collapse")}}<code>: collapse;</code> kullanarak daha sāde kenarlıklar eklemelisin.</li> + <li>{{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.</li> + <li>Satırların birbirinden ayrılıp daha rahat okunabilemesi için zebra çizgisini kullanın.</li> + <li>{{htmlelement("th")}} and {{htmlelement("td")}} öğelerinde takip etmeyi kolaylaştırmak için {{cssxref("text-align")}} niteliğini kullanmaktan çekinmemelisin.</li> +</ul> + +<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> + +<p>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. <a href="/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks">Becerilerini test et: Tablolar</a>.</p> + +<h2 id="Sıradaki">Sıradaki</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> +</ol> diff --git a/files/tr/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 new file mode 100644 index 0000000000..b144c19470 --- /dev/null +++ b/files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html @@ -0,0 +1,87 @@ +--- +title: 'Becerilerinizi test edin: Arka Planlar ve Kenarlıklar' +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<p>Bu beceri testinin amacı, önceki derste öğrendiğiniz becerileri kullanarak, CSS arka planları ve kenarlıklar üzerinde çalışmanızı sağlamaktır.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ancak kodu indirip ve görevler üzerinde çalışmak için <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması yararlı olabilir.</p> + +<p>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.</p> +</div> + +<h2 id="Arka_Planlar_ve_Kenarlıklar_1">Arka Planlar ve Kenarlıklar 1</h2> + +<p>Bu görevde, sayfa başlığına bir arka plan, kenarlık ve bazı basit stil eklemenizi istiyoruz:</p> + +<ol> + <li>Kutuya 10 piksellik yuvarlatılmış köşeleri olan 5 piksellik siyah düz bir kenarlık verin.</li> + <li>Bir arka plan resmi ekleyin (<code>balloons.jpg</code>'yi kullanın) ve kutuyu kaplayacak şekillde boyutlandırın.</li> + <li><code><h2></code> yarı saydam bir siyah arka plan rengi verin ve metni beyaz yapın.</li> +</ol> + +<p>Bitmiş örnek aşağıdaki gibi görünmelidir.</p> + +<p><img alt="Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background." src="https://mdn.mozillademos.org/files/16946/backgrounds-task1.png" style="height: 236px; width: 911px;"></p> + +<p>Birmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenleyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p>Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/backgrounds/backgrounds1-download.html">kaynak kodunu</a> indirin.</p> +</div> + +<h2 id="Arka_Planlar_ve_Kenarlıklar_2">Arka Planlar ve Kenarlıklar 2</h2> + +<p>Bu görevde, dekoratif bir kutuya arka plan resimleri, kenarlık ve diğer bazı stilleri eklemenizi istiyoruz:</p> + +<ul> + <li>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.</li> + <li>Arka plan resmi olarak, solda ortalanmış bir yıldız, sağda tekrar eden bir yıldız deseni oluşturun. Resim olarak <code>star.png</code> kullanın.</li> + <li>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.</li> +</ul> + +<p>İşin sonunda örneğiniz aşağıdaki resimdeki gibi gözükmelidir:</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/16947/backgrounds-task2.png" style="height: 300px; width: 534px;"></p> + +<p>Örneğinizi oluşturabilimeniz için aşağıdaki canlı kodu düzenleyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p>Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/backgrounds/backgrounds2-download.html"> Kaynak kodunu </a>indirin.</p> +</div> + +<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> + +<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> + +<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> + +<ol> + <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> + <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: + <ul> + <li>"Flexbox düzen 1 beceri testi için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> + <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> + <li>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.</li> + <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> + </ul> + </li> +</ol> 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 new file mode 100644 index 0000000000..016c021985 --- /dev/null +++ b/files/tr/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,367 @@ +--- +title: Kutu Modeli +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<p>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, <em>CSS Kutu Modeline</em> giriş yapacağız, böylece nasıl çalıştığı ve bununla ilgili terminolojiyi anlayarak daha karmaşık düzen görevleri oluşturabilirsin.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<h2 id="Blok_ve_satır_içi_kutular">Blok ve satır içi kutular</h2> + +<p>CSS'de genel olarak iki tür kutuya sahibiz — <strong>blok kutular</strong> ve <strong>satır içi kurular</strong>. 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.</p> + +<p>Bir kutunun türü blok(<code>block</code>) olarak tanımlanmışsa, aşağıdaki şekilde davranacaktır:</p> + +<ul> + <li>Kutu yeni bir satıra geçer.</li> + <li>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.</li> + <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olacaktır.</li> + <li>Dolgu (<code>padding</code>), kenar boşluğu (<code>margin</code>) ve kenarlık (<code>border</code>) diğer öğelerin kutudan uzağa itilmesine neden olur. Kendisinden sonraki öğelerin konumları etkilenir, önceki öğelere göre kendi konumunu belirler.</li> +</ul> + +<p>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(<code>block</code>) olan öğelere örnektir.</p> + +<p>Eğer kutunun görüntüleme türü satır içi(<code>inline</code>) olacak şekilde tanımlanmışsa:</p> + +<ul> + <li>Kutu yeni bir satıra geçmeyecektir.</li> + <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olmayacaktır.</li> + <li>Dikey yöndeki; dolgu, kenar boşlukları ve kenarlıklar uygulanacak ve diğer kutuların kutudan uzaklaşmasına neden <strong><u>olmayacaktır</u></strong>.</li> + <li>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 <strong><u>olacaktır</u></strong>.</li> +</ul> + +<p>Bağlantılar için kullanılan <code><a></code> öğesi, <code><span></code>, <code><em></code> ve <code><strong></code> varsayılan tür olarak satır içi(<code>inline</code>) görüntülenecek öğelere örnektir.</p> + +<p>Bir öğenin kutu türünü tanımlayabilmek için {{cssxref("display")}} niteliğine <code>block</code> ve <code>inline</code> değerleri kullanılır.</p> + +<h2 id="Ayrıca_İç_ve_dış_görüntüleme_türleri">Ayrıca: İç ve dış görüntüleme türleri</h2> + +<p>Bu noktada <strong>iç</strong> ve <strong>dış</strong> 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 <em>dış</em> gösterim türüne sahiptir.</p> + +<p>Kutular ayrıca, bu kutunun içindeki öğeleri nasıl yerleştirileceğini belirleyen bir <em>iç</em> gösterim türünede sahiptir. Varsayılan olarak, bir kutunun içindeki öğeler <strong><a href="/tr/docs/Learn/CSS/CSS_layout/Normal_Flow">normal aşkışta</a></strong> 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).</p> + +<p>Bu özellikler sayesinde, bir öğenin <code>display</code> niteliğine <code>flex</code> değerini tanımlayarak iç ekran türünü değiştirebiliriz. Öğeyi <code>display: flex</code> şeklinde tanımlarsak, öğenin dış görünümü <code>block</code> olur, fakat öğenin içindeki diğer öğelerin görüntüleme türü <code>flex</code> 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 <a href="/tr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> özelliklerinde belirtilen kurallara göre düzenlenir.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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 <a href="/tr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Blok ve Satır İçi Düzen'e</a> bir göz at.</p> +</div> + +<p>CSS Mizanpajı hakkında daha ayrıntılı bilgi edinmeye devam ettiğinde, <code>flex</code>'siyi ve kutularının sahip olabileceği çeşitli değerlerle karşılaşaksınn. Örneğin <code><a href="/tr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> + +<p>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 <em>normal akış</em> 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.</p> + +<h2 id="Farklı_görüntüleme_türlerine_örnekler">Farklı görüntüleme türlerine örnekler</h2> + +<p>Konumuza devam edelim ve bazı örneklere bir göz atalım. Aşağıda, hepsinin dış görüntüleme türü <code>block</code> 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.</p> + +<p>İkincisi, görüntüleme türü olarak <code>display: flex</code> tanımlanmış bir listemiz var. Bu, <code>ul</code> 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.</p> + +<p>Bununda altında, içinde iki adet <code><span></code> öğe bulunan blok türünde bir paragrafımız var. Ancak bu iki öğe normalde <code>inline</code> türüne sahipler, içlerinden bir tanesini <code>.block</code> sınıfına dahil edip görüntü türünü <code>display: block</code> olarak tanımlıyoruz ve <code>inline</code> türüne sahip bir öğe <code>block</code> türüne sahip bir öğe gibi davranmaya başlıyor.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> + +<p>Bir sonraki örnekte, <code>inline</code> görüntüleme türüne sahip öğelerin nasıl davrandığını görebilirsin. ilk paragrafın içindeki <code><span></code> öğ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.</p> + +<p>Bir de <code><ul></code> öğemiz var. Bu öğemisin görüntüleme türünü <code>display:inline-flex</code> 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.</p> + +<p>Son olarak, iki adet paragrafımız var. Bu paragraflarımızın görüntüleme türünü <code>display: inline</code> 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.</p> + +<p><strong>Değiştirin! sizde farklılıkları daha iyi görebilmek için <code>display: inline</code></strong> <strong>tanımı</strong><strong>nı <code>display: block</code> ve <code>display: inline-flex</code> tanımını da <code>display: flex</code> olarak değiştirin.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> + +<p>İlerleyen derslerde esnek düzen gibi kavramlarla karşılaşacaksın; şimdilik hatırlanması gereken en önemli şey, <code>display</code> 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.</p> + +<p>Dersin geri kalanında, dış ekran türüne odaklanacağız.</p> + +<h2 id="CSS_kutu_modeli_nedir">CSS kutu modeli nedir?</h2> + +<p>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.</p> + +<h3 id="Bir_kutunun_parçaları">Bir kutunun parçaları</h3> + +<p>Bir blok kutu oluşturabilmek için, CSS'in bize verdikleri:</p> + +<ul> + <li><strong>İçerik(<em>Content</em>)</strong>: İçeriğin görüntülendiği alandır. {{cssxref("width")}} ve {{cssxref("height")}} gibi nitelikler kullanılarak boyutlandırılabilir.</li> + <li><strong>Dolgu(<em>Padding</em>)</strong>: İçeriği saran bir boşluktur. boyutu {{cssxref("padding")}} ve ilişkili niteliklerle belirlenir.</li> + <li><strong>Kenarlık(<em>Border</em>)</strong>: İçeriği ve dolguyu sarar. Boyutu ve stili {{cssxref("border")}} ve ilişkili niteliklerle belirlenir.</li> + <li><strong>Kenar boşluğu(<em>Margin</em>)</strong>: İç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.</li> +</ul> + +<p>Aşağıdaki şema bu katmanları göstermektedir:</p> + +<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="Standart_CSS_kutu_modeli">Standart CSS kutu modeli</h3> + +<p>Standart kutu modelinde, bir kutuya <code>width</code> ve <code>height</code> niteliklerine değer verirsen, bu <u><em>içeriğin</em></u> 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.</p> + +<p>Aşağıda bir kutunun modelini tanımlayan <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, ve <code>padding</code> niteliklerini CSS kodu bulunmakta:</p> + +<pre class="brush: css notranslate">.box { + width: 350px; + height: 150px; + margin: 10px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>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.</p> + +<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<h3 id="Alternatif_CSS_kutu_modeli">Alternatif CSS kutu modeli</h3> + +<p>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)</p> + +<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>Varsayılan olarak, tarayıcılar standart kutu modelini kullanır. Bir öğeye alternatif modeli tanımlayabilmen için <code>box-sizing: border-box</code> tanımını yapman gerekmektedir. Bu sayede tarayıcıya, belirlediğin herhangi bir boyut için, kenarlığı dikkate almasını söylemiş olursun.</p> + +<pre class="brush: css notranslate"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>Tüm öğelerinin alternatif kutu modelini kullanmasını istiyorsan <code>box-sizing</code> özelliğini <code><html></code> öğ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,<a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">CSS'de Kutu Boyutlandırma Hakkındaki Püf Noktalar'a</a> bakın.</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<h2 id="Kutu_modelleriyle_oynamak">Kutu modelleriyle oynamak</h2> + +<p>Aşağıda iki kutu görüyorsun. Bu kutular aynı <code>.box</code> sınıfına dahiller ve bu sınıf ikisinede aynı <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, ve <code>padding</code> özelliklerin atamasını yapar. Tek fark, ikinci kutu aynı zamanda alternatif kutu modelini kullanacak şekilde ayarlanmış olmasıdır.</p> + +<p><strong>İkinci kutunun boyutunu(<code>.alternate</code> sınıfına ekleyerek) ilk kutuyla eşleşecek şekilde değiştirebilir misin?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">Burada</a>, bu görev için bir çözüm bulabilirsin..</p> +</div> + +<h3 id="Kutu_modelini_görüntüleyebilmek_için_tarayıcı_DevToolsu_kullanın">Kutu modelini görüntüleyebilmek için tarayıcı DevTools'u kullanın</h3> + +<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirme araçlarıyla(developer tools)</a> 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.</p> + +<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="Kenar_boşluğu_dolgu_ve_kenarlıklar">Kenar boşluğu, dolgu ve kenarlıklar</h2> + +<p>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 <strong>kısayollardır</strong> 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.</p> + +<p>Şimdi bu nitelikleri daha detaylı inceleyelim.</p> + +<h3 id="Kenar_boşluğumargin">Kenar boşluğu(margin)</h3> + +<p>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.</p> + +<p>{{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:</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>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.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> + +<h4 id="Kenar_boşluğunun_daralması">Kenar boşluğunun daralması</h4> + +<p>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.</p> + +<p>Aşağıdaki örnekte iki paragrafımız var. Üst paragrafta <code>margin-bottom: 50px</code> olarak tanımlanmış. İkinci paragraf ise <code>margin-top: 30px</code> 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 <strong>50px</strong> kadar boşluk oluşmuştur.</p> + +<p><strong><code>margin-top</code> 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 <code>bottom-margin: 50px</code> değeri korunur. Eğer <code>margin-top: -10px</code> olarak tanımlarsan aradaki boşluğun 40px olduğunu görürsün. 50px - 10px = 40px.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> + +<p>Kenar boşluklarının ne zaman azalacağını ve ne zaman kapanmayacağını belirleyen birkaç kural vardır. Daha fazla bilgi için, <a href="/tr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">kenar boşluğu daraltmayla</a> 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.</p> + +<div class="blockIndicator note"> +<p><strong>Not:</strong> 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.</p> +</div> + +<h3 id="Kenarlık">Kenarlık</h3> + +<p>Kenarlık, kenar boşluğu ile kutunun dolgusu arasına çizilir. Standart kutu modelini kullanıyorsan, sınırın boyutu kutunun <code>width</code> ve <code>heigh</code> 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.</p> + +<p>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.</p> + +<p>{{cssxref("border")}} niteliği ile bu dört kenarlığın stilini, rengi ve genişliğini aynı anda ayarlayabilirsin.</p> + +<p>Her bir kenarın özelliklerini ayrı ayrı tanımlamak için şunları kullanabilirsin:</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>Her kenarın stilini, rengini ve genişliğini ayarlamak için şunları kullanabilirsin:</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>Her bir kenarın stil, renk ve genişlik ayarlarını ayrı ayrı yapmak istediğinde aşağıdaki nitelikleri kullanabilirsin:</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>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.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> + +<h3 id="Dolgu">Dolgu</h3> + +<p>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.</p> + +<p>{{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.</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>Aşağıdaki örnekte bulunan <code>.box</code> 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.</strong></p> + +<p><strong>Ayrıca <code>.container</code> 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.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> + +<h2 id="Kutu_modeli_ve_satır_içi_kutular">Kutu modeli ve satır içi kutular</h2> + +<p>Yukarıdakilerin tümü tamamen blok kutuları için geçerlidir. <code><span></code> gibi bazı satır içi kutulara sahip öğelere de kutu modeli uygulanabilir.</p> + +<p>Aşağıdaki örnekte, paragraf içerisinde bir adet <code><span></code> var. Bu satır içi kutuya <code>width</code><font><font>,<span> </span></font></font><code>height</code><font><font>,<span> </span></font></font><code>margin</code><font><font>,<span> </span></font></font><code>border</code><font><font>, ve<span> </span></font></font><code>padding</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> + +<div class="blockIndicator note"> +<p>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.</p> +</div> + +<h2 id="display_inline-block_kullanımı">display: inline-block kullanımı</h2> + +<p><code>display</code> 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.</p> + +<p><code>display: inline-block</code> bir öğeye zaten bildiğimiz blok kutuların davranışlarından bazılarını kazandırır:</p> + +<ul> + <li><code>width</code> ve <code>height</code> nitelikleri uygulanır.</li> + <li><code>padding</code>, <code>margin</code>, ve <code>border</code> nitelikleri diğer öğelerin kutudan uzağa itilmesine neden olur.</li> +</ul> + +<p>Bunlarla birlikte, yeni bir satıra bölünmez ve sadece, <code>width</code> ve <code>height</code> nitelikleri belirtilirse içeriğinden daha büyük hale gelir.</p> + +<p><strong>Bu sonraki örnekte, <code><span></code> öğesine eklediğimiz <code>display: inline-block</code> komutunu <code>display: block</code> olarak değiştirmeyi veya satırı tamamen kaldırmayı deneyin.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> + +<p>Bunun yararının görülebileceği bir örnek vermek gerekirse; <code>padding</code> uygulayarak daha büyük isabet alanına sahip bağlantı öğeleri eklemek isteyebiliriz. oysa <code><a></code> öğesi <code><span></code> gibi bir satır içi öğesidir ve <code>padding</code> istediğimiz gibi davranmayacaktır. Bunun için, <code>display: inline-block</code> 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.</p> + +<p>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. <code><a></code> 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 <u>dolgu</u>, <code><ul></code> öğesinin üzerindeki kenarlık ile çakışıyor. Bunun nedeni, <code><a></code>'nın bir satır içi öğe olmasıdır.</p> + +<p><strong><code>.links-list a</code></strong> <strong>seçicisine <code>display: inline-block</code> kuralını eklediğin de, dolgunun diğer öğeler tarafından dikkate alındığını ve bu sorunun giderildiğini göreceksin.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p> + +<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> + +<p>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 — <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Becerilerini test et: Kutu Modeli</a>.</p> + +<h2 id="Özet">Özet</h2> + +<p>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.</p> + +<p>Bir sonraki derste, düz kutularının daha ilginç görünmesini sağlama için <a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">arka planların ve kenarlıkların</a> nasıl kullanılabileceğine bir göz atacağız.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> 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 new file mode 100644 index 0000000000..9d42ba1317 --- /dev/null +++ b/files/tr/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,414 @@ +--- +title: CSS değerleri ve birimleri +slug: Öğren/CSS/CSS_yapi_taslari/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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>CSS niteliklerinde kullanılan farklı değer ve birimler hakkında bilgi edinmek</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_değeri_nedir">CSS değeri nedir?</h2> + +<p>CSS eğitiminde ve MDN'deki nitelik sayfalarında, değer türlerini açılı parantezlerle çevrili olarak göreceksin, <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> veya <code><a href="/tr/docs/Web/CSS/length"><length></a></code> gibi. <code><color></code> veri türünün herhangi bir nitelik için kullanılabilir olduğunu gördüğünüzde; <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> referans sayfasında listelenen değerin, bu niteliğe uygulanabilir olduğu anlamına gelir.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: <em>Veri türleri</em> 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.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Evet, CSS değer türleri ile CSS niteliklerini (örn. {{cssxref("color")}} nitelik, <a href="/tr/docs/Web/CSS/color_value"><color></a> 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.</p> +</div> + +<p>Aşağıdaki örnekte, bir anahtar kelime kullanarak başlığımızın ve arka plan rengimizi <code>rgb()</code> fonksiyonunu kullanarak ayarladık:</p> + +<pre class="brush: css notranslate"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>CSS'de bir öğeye değer türüyle, izin verilen değerler kümesinin içinden değer atamanın tek yoludur. <code><color></code> 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, <code>rgb()</code> fonksiyounu, gibi. Ayrıca tarayıcılar tarafından desteklenen tüm <code><color></code> değerlerini kullanabilirsin. İstersen her değer için MDN sayfasında tarayıcı desteği hakkında bilgi edinebilirsin. Örn, <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> 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).</p> + +<p>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.</p> + +<h2 id="Sayılar_uzunluklar_ve_yüzdeler">Sayılar, uzunluklar ve yüzdeler</h2> + +<p>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:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Veri tipi</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/tr/docs/Web/CSS/integer"><integer></a></code></td> + <td><code><integer></code> bir tamsayıyı temsil eder, <code>1024</code> veya <code>-55</code> gibi.</td> + </tr> + <tr> + <td><code><a href="/tr/docs/Web/CSS/number"><number></a></code></td> + <td><code><number></code> ondalıklı bir sayıyı temsil eder — kesirli bileşeni olan bir ondalık basamağa sahip olabilir veya olmayabilir. Örn, <code>0.255</code>, <code>128</code> veya <code>-1.2</code>.</td> + </tr> + <tr> + <td><code><a href="https://developer.mozilla.org/tr/docs/Web/CSS/dimension"><dimension></a></code></td> + <td> <code><dimension></code> bir birime bağlı olan <code><number></code> tipinde bir sayıdır. Örn., <code>45deg</code>, <code>5s</code>, or <code>10px</code>. <code><dimension></code>; <code><a href="/tr/docs/Web/CSS/length"><length></a></code>, <code><a href="/tr/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/tr/docs/Web/CSS/time"><time></a></code>, ve <code><a href="/tr/docs/Web/CSS/resolution"><resolution></a></code> değer türlerini içeren bir kapsayıcı kategoridir<a href="/tr/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/tr/docs/Web/CSS/percentage"><percentage></a></code></td> + <td><code><percentage></code> başka bir değerin bir kısmını temsil eder. Örn., <code>50%</code>. 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.</td> + </tr> + </tbody> +</table> + +<h3 id="Uzunluklar">Uzunluklar</h3> + +<p>En sık karşılaşacağın sayısal tür <code><length></code>'dir. Örn. <code>10px</code> (pixels) veya <code>30em</code>. 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.</p> + +<h4 id="Mutlak_uzunluk_birimleri">Mutlak uzunluk birimleri</h4> + +<p>Aşağıdakilerin tümü <strong>mutlak</strong> uzunluk birimleridir — başka hiçbir şeye bağlı değildirler ve genellikle her zaman aynı boyutta kabul edilirler.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Birim</th> + <th scope="col">İsim</th> + <th scope="col">Eşittir</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Santimetre</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Milimetre</td> + <td>1mm = 1/10th of 1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Çeyrek milimetre</td> + <td>1Q = 1/40th of 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>İnç</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas</td> + <td>1pc = 1/6th of 1in</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Point</td> + <td>1pt = 1/72th of 1in</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Piksel</td> + <td>1px = 1/96th of 1in</td> + </tr> + </tbody> +</table> + +<p>Bu birimlerin çoğu, ekran yerine baskı için kullanıldığında daha kullanışlıdır. Örn., genellike ekranda<code>cm</code>(santimetre) kullanmayız. Yaygın olarak kullanacağın tek değer <code>px</code>(piksel)'dir.</p> + +<h4 id="Bağıl_uzunluk_birimleri">Bağıl uzunluk birimleri</h4> + +<p>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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Birim</th> + <th scope="col">Bağıl</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>Öğenin veya ebeveyninin yazı tipi boyutuna.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>mevcut yazı tipinin x harfinin yüksekliğine.</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>Öğenin yazı tipinin "0"(sıfır) karakterinin ilerleme ölçüsü(genişliği).</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>Kök(root) öğenin yazı tipi boyutu.</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>Öğenin satır yüksekliği.</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>Görüntü alanı genişliğinin %1'i.</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>Görüntü alanı yüksekliğinin %1'i.</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>Görüntü alanında küçük olan değerin %1'i.</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>Görüntü alanının büyük olan değerin %1!i</td> + </tr> + </tbody> +</table> + +<h4 id="Bir_örnekle_keşfedelim">Bir örnekle keşfedelim</h4> + +<p>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.</p> + +<p>İkinci kutu, <code>vw</code>(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 <code><iframe></code> 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, <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">örneği kendi tarayıcı sekmesinde açtıktan sonra denemen gerekir</a>.</p> + +<p>Üçücü kutu <code>em</code> birimi kullanır. Bunlar yazı tipi boyutuna bağlıdır. <code>.wrapper</code> sınıfının yazı tipi boyutunu <code>1em</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_ve_rems">ems ve rems</h4> + +<p><code>em</code> ve <code>rem</code> 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 <a href="/tr/docs/Learn/CSS/Styling_text">stil metni</a> veya <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha karmaşık konulara geçmeye başladığında. Aşağıdaki örnek anlayabilmen için bir sunum sunar.</p> + +<p>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 <em>ems</em> sınıfına ve ikicinin bir <em>rems</em> sınıfına sahip olmasıdır.</p> + +<p>Başlangıç olarak, <code><html></code> öğenin yazı tipi boyutu olarak 16px ayarladık.</p> + +<p><strong>Özetlemek gerekirse</strong>, tipografi durumunda <strong>em birimi "ana öğenin yazı tipi boyutu" anlamına gelir</strong>. {{htmlelement("li")}} İçindeki {{htmlelement("ul")}} öğeleri <code>ems</code> 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 <code>1.3</code><code>em</code>'dir, ebeveyninin yazı tiği boyutunun 1,3 katıdır.</p> + +<p><strong>Özetlemek gerekirse, rem birimi "Kök(root) öğenin yazı tipi boyutu" anlamına gelir</strong> (rem "kök em" anlamına gelir). {{htmlelement("li")}} öğesinin içindeki {{htmlelement("ul")}} öğeleri, boyutlarını <code>rems</code> sınıfındaki <code>rem</code> tanımından dolayı kök öğenin<code><html></code> 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.</p> + +<p>Bununla birlikte, <code><html></code> öğesinin <code>font-size</code> niteliğini CSS'de değiştirirsen, diğer her şeyin ona göre değiştiğini göreceksin — hem <code>rem</code>, hemde <code>em</code> buyutlu metinler.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="Yüzdeler">Yüzdeler</h3> + +<p>Ç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 <code>font-size</code> yüzde olarak ayarlarsan, bu öğenin üst öğesinin <code>font-size</code> nitelik değerinin bir yüzdesi olacaktır. Bir <code>width</code> değer için yüzde kullanırsan, üst öğenin <code>width</code> nitelik değerinin yüzdesi olacaktır.</p> + +<p>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.</p> + +<p>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!</p> + +<p><strong>Bunun nasıl çalıştığını görmek için çerçevenin genişliğini veya yüzde değerini değiştirmeyi dene.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>Sonraki örnekte yazı tipi boyutları yüzde olarak belirlenmiştir. <code><li></code> öğesinin <code>font-size</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>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 <code><a href="/tr/docs/Web/CSS/length-percentage"><length-percentage></a></code>'ri içeriyorsa, bir uzunluk veya yüzde kullanılabilir. izin verilen değer yalnızca <code><length></code> içeriyorsa, yüzde kullanmak mümkün değildir.</p> + +<h3 id="Sayılar">Sayılar</h3> + +<p>Bazı değer türleri, herhangi bir birim eklenmeden sayıları kabul eder. Birimsiz bir sayıyı kabul eden bir niteliğe örnek, <code>opacity</code> bir öğenin opaklığını(ne kadar şeffaf olduğunu) kontrol eden özelliktir. Bu özellik <code>0</code>(tamamen şeffaf) ve <code>1</code>(şeffaflık yok) arasında bir sayıyı kabul eder.</p> + +<p><strong>Aşağıdaki örnekte, <code>opacity</code> değerini değiştirmeyi deneyin. <code>0</code> ve <code>1</code> arasında çeşitli ondalık değerler vererek kutunun şeffaflığının nasıl değiştiğine dikkat edin.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>:CSS'de değer olarak bir sayı kullandığında, bu sayı tırnak içine <u>alınmamalıdır</u>.</p> +</div> + +<h2 id="Renk">Renk</h2> + +<p>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.</p> + +<p>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.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<h3 id="Anahtar_kelime_renkleri">Anahtar kelime renkleri</h3> + +<p>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! <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> değer türü için sayfada tam bir liste görebilirsin.</p> + +<p><strong>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.</strong></p> + +<h3 id="Onaltılık_RGB_değerleri">Onaltılık RGB değerleri</h3> + +<p>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 <code>0123456789abcdef</code>. 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).</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>Renklerin nasıl değiştiğini görmek için değerleri değiştirmeyi deneyin.</strong></p> + +<h3 id="RGB_ve_RGBA_deperleri">RGB ve RGBA deperleri</h3> + +<p>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 — <code>rgb()</code>. 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.</p> + +<p>RGB renklerini kullanmak için son örneğimizi yeniden yazalım:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>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 <code>0</code> olarak ayarlarsan rengi tamamen şeffaf hale getirir, <code>1</code> olarak ayarlarsan tamamen opak hale getirir. Ara değerler farklı şeffaflık düzeyi verir.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>Bu örnekte, renk çıktısını nasıl etkilediğini görmek için alfa kanalı değerlerini değiştirmeyi deneyin. </strong></p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: <code>rgba()</code> ile <code>rgb()</code> ve <code>hsl()</code> ile <code>hsla()</code>(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 <code>rgba()</code>, hemde <code>rgb()</code> ile alfa kanalı değerleri olmadan renkleri oluşturabiliyoruz. Yukarıdaki örneğin <code>rgba()</code> fonksiyonunu <code>rgb()</code> 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.</p> +</div> + +<h3 id="HSL_ve_HSLA_değeri">HSL ve HSLA değeri</h3> + +<p>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. <code>hsl()</code> 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:</p> + +<ul> + <li><strong>Ton</strong>: Rengin temel tonudur. Bu, renk tekerleği etrafındaki açıları temsil eden, 0 ile 360 arasında bir değer alır.</li> + <li><strong>Doygunluk</strong>: 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.</li> + <li><strong>Hafiflik</strong>: 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</li> +</ul> + +<p>HSL renklerini şu şekilde kullanmak için RGB örneğini güncelleyebiliriz:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>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!</p> + +<h2 id="Görüntüler">Görüntüler</h2> + +<p><code><a href="/tr/docs/Web/CSS/image"><image></a></code> değer türü kullanıldığı herhangi bir yerde geçerli bir görüntü değeri taşır. Bu, bir <code>url()</code> fonksiyonu ile işaret edilen gerçek bir görüntü dosyası veya bir gradyan olabilir.</p> + +<p>Aşağıdaki örnekte, CSS <code>background-image</code> niteliğine tanımlanan bir görüntü ve gradyanı gösterdik.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: <code><image></code> 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 <code><a href="/tr/docs/Web/CSS/image"><image></a></code> sayfasına bakabilirsin.</p> +</div> + +<h2 id="Konum">Konum</h2> + +<p><code><a href="/tr/docs/Web/CSS/position_value"><position></a></code> değer türü, arka plan görüntüsünü, 2 Boyutlu koordinat sistemine göre öğeye konumlandırmak(<code><a href="/tr/docs/Web/CSS/background-position">background-position</a></code> üzerinden) için kullanılan bir değerdir. Değer türü, <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, ve <code>center</code> gibi anahtar kelimeleri alabilir, kutunun üst ve sol kenarından uzaklıkları temsil eden 2 boyutlu bir koordinatlamayı da kullanabilir.</p> + +<p>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: <code>center</code>.</p> + +<p>Aşağıdaki örnekte, bir anahtar kelime kullanarak kabın üstünden 40 piksel uzaklıkta, sağ tarafa dayalı bir arka plan yerleştirdik:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>Görüntünün nasıl hareket ettirebileceğini görebilmek içn bu değerlerle oynayabilirsin.</strong></p> + +<h2 id="Dizeler_ve_tanımlayıcılar">Dizeler ve tanımlayıcılar</h2> + +<p>Daha önceki örneklerde, anahtar kelimelerin nerede ve nasıl kullanıldıklarını gördük(Örn., <code><color></code> değer türünde kullandığımız <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, ve <code>goldenrod</code> anahtar kelimeleri gibi). Bu anahtar kelimeler, <em>tanımlayıcılar</em> olarak ifade edilir ve CSS'de onların özel değer olduklarını anlar. Bu nedenle, <a title="Tırnak içine alınmamış.">alıntı</a> yapılmaz — dizeler olarak değerlendirilmezler.</p> + +<p>CSS'de dizeleri kullandığımız yerler de var. örneğin <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">oluşturulan içeriği belirtirken</a>. 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 <a title="Tırnak içine alınmamış.">alıntılanmamış</a> renk anahtar sözcükleri kullanıyoruz.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="Fonksiyonlar">Fonksiyonlar</h2> + +<p>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 — <code>rgb()</code>, <code>hsl()</code> ve bir dosyadan görüntüyü döndürmek için kullanılan <code>url()</code> gibi.</p> + +<p><code>calc()</code> 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.</p> + +<p>Örneğin, aşağıda <code>calc()</code> fonksiyonunu kutunun genişliğini <code>%20 + 100px</code> yapmak için kullanıyoruz. %20, ebeveyn öğesinin genişliğinden hesaplanır. <code>.wrapper</code> 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 <code>calc()</code> fonksiyonunu kullanarak tarayıcıya bunu bizim için yapmasını söyleyebiliriz.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> + +<p>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. <a href="/tr/docs/Learn/CSS/Building_blocks/Values_tasks">Becerilerini test et: Değerler ve birimler</a>.</p> + +<h2 id="Özet">Özet</h2> + +<p>Bu, karşlaşabileceğin en yaygın değer ve birim türlerinin hızlı bir şekilde gözden geçerilmesi olmuştur. <a href="/tr/docs/Web/CSS/CSS_Values_and_Units">CSS Değerleri ve birimleri</a> referans sayfasındaki tüm farklı türlere göz atabilirsin; bu derslerde çalışırken bunların çoğuyla karşılaşacaksın.</p> + +<p>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.</p> + +<p>Örneğin <code><a href="/tr/docs/Web/CSS/image"><image></a></code> 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.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> diff --git a/files/tr/learn/css/building_blocks/values_tasks/index.html b/files/tr/learn/css/building_blocks/values_tasks/index.html new file mode 100644 index 0000000000..138fd5a290 --- /dev/null +++ b/files/tr/learn/css/building_blocks/values_tasks/index.html @@ -0,0 +1,97 @@ +--- +title: 'Becerilerinizi test edin: değerler ve birimler' +slug: Öğren/CSS/CSS_yapi_taslari/Values_tasks +tags: + - Acemi + - Beginner + - CSS + - Example + - Örnek +translation_of: Learn/CSS/Building_blocks/Values_tasks +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>Bu görevin amacı, <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS Değerleri ve Birimleri</a> dersinde incelediğimiz bazı değerler ve birimler hakkındaki anlayışınızı kontrol etmenize yardımcı olmaktır.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p> + +<p>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.</p> +</div> + +<h2 id="Birinci_Görev">Birinci Görev</h2> + +<p>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.</p> + +<ul> + <li>İkinci liste öğesini RGB rengini kullanmalıdır.</li> + <li>üçüncüsü HSL rengini kullanmalıdır.</li> + <li>Dördüncüsü RGB rengini kullanmalı ancak alfa kanalı 0.2 olarak ayarlanmalıdır.</li> +</ul> + +<p>Onaltılık renk için dönüşümleri <a href="https://convertingcolors.com/hex-color-86DEFA.html">Bu bağlantıda</a> bulabilirsiniz.CSS'deki değerleri nasıl kullanağınızı bulmanız gerekir.</p> + +<p><img alt="Four list items. The first three with the same background color and the last with a lighter background." src="https://mdn.mozillademos.org/files/17135/mdn-value-color.png" style="height: 535px; width: 1270px;"></p> + +<p>Bitmiş öreği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/values/color.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/color-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="İkinci_görev">İkinci görev</h2> + +<p>Bu görevde çeşitli metin öğelerinin boyutunu ayarlamanız gerekir.</p> + +<ul> + <li>{{HTMLElement("h1")}} 50 piksel olmalıdır.</li> + <li>{{HTMLElement("h2")}} 2em olmalıdır.</li> + <li>{{HTMLElement("p")}} 16 piksel olmalıdır.</li> + <li>{{HTMLElement("h1")}}'in ilk kardeşi olan {{HTMLElement("p")}}, {{HTMLElement("h1")}} %120'si olmalıdır.</li> +</ul> + +<p><img alt="Some text at varying sizes." src="https://mdn.mozillademos.org/files/17136/mdn-value-length.png" style="height: 845px; width: 1267px;"></p> + +<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için canlı kodu düzenlemeyi deneyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/length-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="Üçüncü_görev">Üçüncü görev</h2> + +<p>Bu görevde, arka plan resmini yatay olarak ortalayacak şekilde ve kutunun üstünden %20 oranında hareket ettirmeniz gerekir.</p> + +<p><img alt="A stat centered horizontally in a box and a short distance from the top of the box." src="https://mdn.mozillademos.org/files/17137/mdn-value-position.png" style="height: 383px; width: 734px;"></p> + +<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu güncellemeyi deneyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/position-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> + +<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> + +<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> + +<ol> + <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> + <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: + <ul> + <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> + <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> + <li>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.</li> + <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> + </ul> + </li> +</ol> 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 new file mode 100644 index 0000000000..a28339307f --- /dev/null +++ b/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html @@ -0,0 +1,82 @@ +--- +title: 'Becerilerinizi test edin: Yazma Modları ve Mantıksal Özellikler' +slug: Öğren/CSS/CSS_yapi_taslari/Writing_Modes_Tasks +tags: + - Başlangıç + - Beginner + - CSS +translation_of: Learn/CSS/Building_blocks/Writing_Modes_Tasks +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>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, <a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönlerini kullanma</a> dersinde ele alınmaktadır.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p> + +<p>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.</p> +</div> + +<h2 id="1._Görev">1. Görev</h2> + +<p>Ö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.</p> + +<p><img alt="A box with a vertical writing mode" src="https://mdn.mozillademos.org/files/17129/mdn-writing-modes1.png" style="height: 537px; width: 1163px;"></p> + +<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/writing-modes/writing-mode-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="2._Görev">2. Görev</h2> + +<p>Aşağıdaki örnekte, dikey olarak döndürüldüğünde kutunun en boy oranını korumak için <code>width</code> ve <code>height</code> nitelikleri yerine mantıksal nitelikleri kullanın. Nihai sonucunuz resimdeki gibi görünmelidir.</p> + +<p><img alt="Two boxes one horizontal the other vertical" src="https://mdn.mozillademos.org/files/17130/mdn-writing-modes2.png" style="height: 994px; width: 1163px;"></p> + +<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/writing-modes/logical-width-height-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="3._Görev">3. Görev</h2> + +<p>Kenar boşluğu, kenarlık ve dolgu özelliklerinin tanımlanması için <code>top</code>, <code>left</code>, <code>bottom</code> ve <code>right</code> yerine mantıksal sürümlerini kullanın. Bunun nasıl görünmesi gerektiğini ağaşıdaki resimde görebilirsiniz.</p> + +<p>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.</p> + +<p><img alt="Two boxes one horizontal one vertical with different margin, border and padding" src="https://mdn.mozillademos.org/files/17131/mdn-writing-modes3.png" style="height: 704px; width: 1246px;"></p> + +<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/writing-modes/logical-mbp-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> +</div> + +<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> + +<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> + +<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> + +<ol> + <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> + <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: + <ul> + <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> + <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> + <li>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.</li> + <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> + </ul> + </li> +</ol> diff --git a/files/tr/learn/css/css_layout/index.html b/files/tr/learn/css/css_layout/index.html new file mode 100644 index 0000000000..1ffe9c03cb --- /dev/null +++ b/files/tr/learn/css/css_layout/index.html @@ -0,0 +1,84 @@ +--- +title: CSS layout +slug: Öğren/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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<div class="in-page-callout webdev"> +<h3 id="Bir_Web_ön-uçfront-end_geliştiricisi_mi_olmak_istiyorsun">Bir Web ön-uç(front-end) geliştiricisi mi olmak istiyorsun?</h3> + +<p>Hedefinize ulaşmak için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Başlayın</a></p> +</div> + +<h2 id="Ön_koşullar">Ön koşullar</h2> + +<p>Bu üniteye başlamdan önce şunları yapmalısınız:</p> + +<ol> + <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> ünitesinde anlatıldığı gibi temel HTML bilgisine sahip olun.</li> + <li><a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a> bölümünde anlatıldığı gibi, temel CSS bilgisine sahip olun.</li> + <li><a href="/tr/docs/Öğren/CSS/Styling_boxes">Kutuları şekillendirme</a> hakkında bilgi sahibi olun.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: Kendi dosayalrınızı oluşturma yeteneğinizin olmadığı bir bilgisayar/table/başka bir cihaz üzerinde çalışıyorsanız, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi bir çevrim içi kodlama programıyla okd örnelerinin çoğunu deneyebilirsiniz.</p> +</div> + +<h2 id="Dersler">Dersler</h2> + +<p>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.</p> + +<dl> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Introduction">CSS mizanpajına giriş</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Normal_Flow">Normal akış(Normal Flow)</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox">Esnek kutular (Flexbox)</a></dt> + <dd><a href="/tr/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a>, öğ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 <a href="/tr/docs/Öğren/CSS/CSS_layout/Flexbox_skills">flexbox becerilerinizi test</a> edebilirsiniz.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Grids">Izgaralar(Grids)</a></dt> + <dd>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 <a href="/tr/docs/Öğren/CSS/CSS_layout/Grid_skills">ızgara(grid) becerilerinizi test</a> edecektir.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Floats">Yüzen nesneler (Floats)</a></dt> + <dd>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ü.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Positioning">Konumlandırma(Positioning)</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Multiple-column_Layout">Birden çok sütun düzeni</a></dt> + <dd>Ç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.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Responsive_Design">Duyarlı tasarım</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Media_queries">Acemiler için medya sorguları klavuzu</a></dt> + <dd><strong>CSS Medya Sorugusu</strong> 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.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Legacy_Layout_Methods">Eski düzen yönetmleri</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Supporting_Older_Browsers">Eski tarayıcıları desteklemek</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Fundamental_Layout_Comprehension">Değerlendirme: Temel düzeni anlama</a></dt> + <dd>Bir web sayfası düzenleyerek farklı düzen yöntemlerini hakkındaki bilginizi test etmek için bir değerlendirme.</dd> +</dl> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<dl> + <dt><a href="/tr/docs/Öğren/CSS/CSS_layout/Practical_positioning_examples">Pratik konumlandırma örnekleri</a></dt> + <dd>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.</dd> +</dl> diff --git a/files/tr/learn/css/css_layout/introduction/index.html b/files/tr/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..396d9459f6 --- /dev/null +++ b/files/tr/learn/css/css_layout/introduction/index.html @@ -0,0 +1,707 @@ +--- +title: CSS mizanpajına giriş +slug: Öğren/CSS/CSS_layout/Introduction +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>The basics of HTML (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of How CSS works (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To give you an overview of CSS page layout techniques. Each technique can be learned in greater detail in subsequent tutorials.</td> + </tr> + </tbody> +</table> + +<p>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</p> + +<ul> + <li>Normal flow</li> + <li>The {{cssxref("display")}} property</li> + <li>Flexbox</li> + <li>Grid</li> + <li>Floats</li> + <li>Positioning</li> + <li>Table layout</li> + <li>Multiple-column layout</li> +</ul> + +<p>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.</p> + +<h2 id="Normal_flow">Normal flow</h2> + +<p>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> + +<pre class="brush: html notranslate"><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></pre> + +<p>By default, the browser will display this code as follows:</p> + +<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> + +<p>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.</p> + +<p>The elements that appear one below the other are described as <em>block</em> elements, in contrast to <em>inline</em> elements, which appear one beside the other, like the individual words in a paragraph.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>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.</p> + +<p>The methods that can change how elements are laid out in CSS are as follows:</p> + +<ul> + <li><strong>The {{cssxref("display")}} property</strong> — Standard values such as <code>block</code>, <code>inline</code> or <code>inline-block</code> can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a> for more information). We also have entire layout methods that are switched on via specific <code>display</code> values, for example <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, which alter how elements inside the element they are set on are laid out.</li> + <li><strong>Floats</strong> — Applying a {{cssxref("float")}} value such as <code>left</code> 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.</li> + <li><strong>The {{cssxref("position")}} property</strong> — Allows you to precisely control the placement of boxes inside other boxes. <code>static</code> 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.</li> + <li><strong>Table layout</strong> — features designed for styling the parts of an HTML table can be used on non-table elements using <code>display: table</code> and associated properties.</li> + <li><strong>Multi-column layout</strong> — The <a href="/en-US/docs/Web/CSS/CSS_Columns">Multi-column layout</a> properties can cause the content of a block to layout in columns, as you might see in a newspaper.</li> +</ul> + +<h2 id="The_display_property">The display property</h2> + +<p>The main methods of achieving page layout in CSS are all values of the <code>display</code> property. This property allows us to change the default way something displays. Everything in normal flow has a value of <code>display</code>, 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 <code>display: block</code>. 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 <code>display: inline</code> by default.</p> + +<p>You can change this default display behavior. For example, the {{htmlelement("li")}} element is <code>display: block</code> by default, meaning that list items display one below the other in our English document. If we change the display value to <code>inline</code> they now display next to each other, as words would do in a sentence. The fact that you can change the value of <code>display</code> 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.</p> + +<p>In addition to being able to change the default presentation by turning an item from <code>block</code> to <code>inline</code> and vice versa, there are some bigger layout methods that start out as a value of <code>display</code>. However, when using these, you will generally need to invoke additional properties. The two values most important for our purposes when discussing layout are <code>display: flex</code> and <code>display: grid</code>.</p> + +<h2 id="Flexbox">Flexbox</h2> + +<p>Flexbox is the short name for the <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> 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 <code>display: flex</code> 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.</p> + +<p>The HTML markup below gives us a containing element, with a class of <code>wrapper</code>, inside which are three {{htmlelement("div")}} elements. By default these would display as block elements, below one another, in our English language document.</p> + +<p>However, if we add <code>display: flex</code> to the parent, the three items now arrange themselves into columns. This is due to them becoming <em>flex items</em> 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 <code>row</code>. 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 <code>stretch</code>. 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.</p> + +<div id="Flex_1"> +<div class="hidden"> +<h6 id="Flexbox_Example_1">Flexbox Example 1</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> + +<p>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.</p> + +<p>As a simple example of this, we can add the {{cssxref("flex")}} property to all of our child items, with a value of <code>1</code>. 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.</p> + +<div id="Flex_2"> +<div class="hidden"> +<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> + +<div class="note"> +<p><strong>Note</strong>: This has been a very short introduction to what is possible in Flexbox, to find out more, see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> article.</p> +</div> + +<h2 id="Grid_Layout">Grid Layout</h2> + +<p>While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.</p> + +<p>Once again, you can switch on Grid Layout with a specific value of display — <code>display: grid</code>. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using <code>display: grid</code>, 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 <code>1fr</code> and two rows of <code>100px</code>. I don’t need to put any rules on the child elements; they are automatically placed into the cells our grid has created.</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Grid_example_1">Grid example 1</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html notranslate"><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> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> + +<p>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.</p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Grid_example_2">Grid example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.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; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> + +<div class="note"> +<p><strong>Note</strong>: These two examples are just a small part of the power of Grid layout; to find out more see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a> article.</p> +</div> + +<p>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.</p> + +<h2 id="Floats">Floats</h2> + +<p>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.</p> + +<p>The {{cssxref("float")}} property has four possible values:</p> + +<ul> + <li><code>left</code> — Floats the element to the left.</li> + <li><code>right</code> — Floats the element to the right.</li> + <li><code>none</code> — Specifies no floating at all. This is the default value.</li> + <li><code>inherit</code> — Specifies that the value of the <code>float</code> property should be inherited from the element's parent element.</li> +</ul> + +<p>In the example below we float a <code><div></code> 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.</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Floats_example">Floats example</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html notranslate"><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> + +</pre> + +<pre class="brush: css notranslate"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> + +<div class="note"> +<p><strong>Note</strong>: Floats are fully explained in our lesson on the <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float and clear</a> 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 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">legacy layout methods</a>.</p> +</div> + +<h2 id="Positioning_techniques">Positioning techniques</h2> + +<p>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.</p> + +<p>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.</p> + +<p>There are five types of positioning you should know about:</p> + +<ul> + <li><strong>Static positioning</strong> 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".</li> + <li><strong>Relative positioning</strong> 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.</li> + <li><strong>Absolute positioning</strong> 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 <code><html></code> 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.</li> + <li><strong>Fixed positioning</strong> 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.</li> + <li><strong>Sticky positioning</strong> is a newer positioning method which makes an element act like <code>position: static</code> until it hits a defined offset from the viewport, at which point it acts like <code>position: fixed</code>.</li> +</ul> + +<h3 id="Simple_positioning_example">Simple positioning example</h3> + +<p>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:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>This HTML will be styled by default using the following CSS:</p> + +<pre class="brush: css notranslate">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; +} +</pre> + +<p>The rendered output is as follows:</p> + +<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p> + +<h3 id="Relative_positioning">Relative positioning</h3> + +<p>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:</p> + +<pre class="brush: css notranslate">.positioned { + position: relative; + top: 30px; + left: 30px; +}</pre> + +<p>Here we give our middle paragraph a {{cssxref("position")}} value of <code>relative</code> — 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.</p> + +<p>Adding this code will give the following result:</p> + +<div id="Relative_1"> +<div class="hidden"> +<h6 id="Relative_positioning_example">Relative positioning example</h6> + +<pre class="brush: html notranslate"><h1>Relative positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my relatively positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">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; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: relative; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> + +<h3 id="Absolute_positioning">Absolute positioning</h3> + +<p>Absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.</p> + +<p>Going back to our original non-positioned example, we could add the following CSS rule to implement absolute positioning:</p> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + top: 30px; + left: 30px; +}</pre> + +<p>Here we give our middle paragraph a {{cssxref("position")}} value of <code>absolute</code>, and the same {{cssxref("top")}} and {{cssxref("left")}} properties as before. Adding this code, however, will give the following result:</p> + +<div id="Absolute_1"> +<div class="hidden"> +<h6 id="Absolute_positioning_example">Absolute positioning example</h6> + +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my absolutely positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">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; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> + +<p>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 <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>.</p> + +<h3 id="Fixed_positioning">Fixed positioning</h3> + +<p>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.</p> + +<p>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 <code>position: fixed</code>.</p> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p>Paragraph 1.</p> +<p>Paragraph 2.</p> +<p>Paragraph 3.</p> +</pre> + +<div id="Fixed_1"> +<div class="hidden"> +<h6 id="Fixed_positioning_example">Fixed positioning example</h6> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</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> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<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> + +</pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> + +<h3 id="Sticky_positioning">Sticky positioning</h3> + +<p>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 <code>position: sticky</code> 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 <code>position: fixed</code> applied.</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<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> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<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> </pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<div class="note"> +<p><strong>Note</strong>: to find more out about positioning, see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a> article.</p> +</div> + +<h2 id="Table_layout">Table layout</h2> + +<p>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).</p> + +<p>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".</p> + +<p>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.</p> + +<p>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.</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>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.</p> + +<p>You'll notice that the caption paragraph has been given <code>display: table-caption;</code> — which makes it act like a table {{htmlelement("caption")}} — and <code>caption-side: bottom;</code> to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the <code><input></code> elements in the source. This allows for a nice bit of flexibility.</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>This gives us the following result:</p> + +<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p> + +<p>You can also see this example live at <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">source code</a> too.)</p> + +<h2 id="Multi-column_layout">Multi-column layout</h2> + +<p>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.</p> + +<p>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.</p> + +<p>In the below example we start with a block of HTML inside a containing <code><div></code> element with a class of <code>container</code>.</p> + +<pre class="brush: html notranslate"><div class="container"> + <h1>Multi-column layout</h1> + + <p>Paragraph 1.</p> + <p>Paragraph 2.</p> + +</div> +</pre> + +<p>We are using a <code>column-width</code> 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.</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="Multicol_example">Multicol example</h6> + +<pre class="brush: html notranslate"> <div class="container"> + <h1>Multi-column Layout</h1> + + <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> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css notranslate"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> + +<h2 id="Summary">Summary</h2> + +<p>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!</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> +</ul> diff --git a/files/tr/learn/css/first_steps/getting_started/index.html b/files/tr/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..b3d18a095a --- /dev/null +++ b/files/tr/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,272 @@ +--- +title: CSS'e başlarken +slug: Öğren/CSS/Ilk_adimlar/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> + +<p class="summary">Bu derste, basit bir HTML belgesi alıp ona CSS uygulayacağız. Bu sırada dil hakkında bazı pratik bilgiler öğreneceksini.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü incele)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Bir CSS belgesini bir HTML doyasına bağlamanın temellerini anlamak ve CSS ile basit metin biçimlendirme yapabilmek.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_ile_başlayalım">HTML ile başlayalım</h2> + +<p>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ı <code>index.html</code> olacak şekilde bir klasöre kaydedin.</p> + +<pre class="brush: html notranslate"><!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> +</pre> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<h2 id="Belgene_CSS_eklemek">Belgene CSS eklemek</h2> + +<p>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 — <em>CSS'i belgemizin başından bağlamak.</em></p> + +<p>HTML belgenle aynı klasörde adı <code>styles.css</code> bir dosya oluşturun. <code>.css</code> dosya uzantısı bu dosyanın bir css dosyası olduğunu belirtir.</p> + +<p><code>index.html</code> belgesindeki {{htmlelement("head")}} etiketinin içinde <code>styles.css</code> dosyasına bağlantı oluşturmak için:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> + +<p>Bu {{htmlelement("link")}} etiketi tarayıcıya, <code>rel</code> niteliği ile bu dosyanın bir stil sayfası olduğunu ve <code>href</code> niteliğiylede dosyanın bulunduğu konumu söyler. <code>styles.css</code> dosyası içerisine bir kural ekleyerek CSS'in çalışıp çalışmadığını kontrol edebilirsin.</p> + +<pre class="brush: css notranslate">h1 { + color: red; +}</pre> + +<p>HTML ve CSS dosyalarını kaydedin ve <code>index.html</code> 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.</p> + +<p><code>styles.css</code> 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.</p> + +<h2 id="HTML_öğelerini_şekillendirme">HTML öğelerini şekillendirme</h2> + +<p>Başlığımızı kırmızı yaparak, bir HTML öğesini seçebileceğimizi ve biçimlendirebileceğimizi göstermiş olduk. Bunu, bir <em>öğe seçiciyle</em> yaptık — bu HTML öğe etiketiyle doğrudan eşleşen bir seçicidir. Belgedeki tüm paragrafları seçebilmek için <code>p</code> seçiciyi kullanırsın. Tüm paragrafları yeşile çevirmek için:</p> + +<pre class="brush: css notranslate">p { + color: green; +}</pre> + +<p>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> + +<pre class="brush: css notranslate">p, li { + color: green; +}</pre> + +<p>Bunu aşağıdaki etkileşimli düzenleyicide veya yerel uygulamanda dene.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> + +<h2 id="Öğelerin_varsayılan_davranışlarını_değiştirme">Öğelerin varsayılan davranışlarını değiştirme</h2> + +<p>İ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.</p> + +<p>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 <code><ul></code> iyi bir örnektir. Listemizde noktalar var ve bu noktaları istemediğime karar verirsem onları şu şekilde kaldırabilirim.</p> + +<pre class="brush: css notranslate">li { + list-style-type: none; +}</pre> + +<p>Örneği CSS'e ekleme.</p> + +<p><code>list-style-type</code> niteliğinin desteklediği değerleri görmek için MDN içerisindeki <code><a href="/tr/docs/Web/CSS/list-style-type">list-style-type</a></code> 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. </p> + +<p>Bu referans sayfasına baktığında, listenin madde işaretlerini kaldırmanın yanı sıra bunları değiştirebileceğini göreceksin — <code>square</code> değerini kullanarak bunları kare madde imlerine dönüştürmeyi dene.</p> + +<h2 id="Bir_sınıf_eklemek">Bir sınıf eklemek</h2> + +<p>Ş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.</p> + +<p>HTML belgende, ikinci liste(<code><ul></code>) öğeni bir <a href="/tr/docs/Web/HTML/Global_attributes/class">sınıf etiketi</a> ekle. Listeni oluşturan kodlar artık böyle gözükmeli:</p> + +<pre class="brush: html; highlight[3] notranslate"><ul> + <li>Öğe bir</li> + <li class="special">Öğe iki</li> + <li>Öğe <em>üç</em></li> +</ul></pre> + +<p>CSS'nde nokta ile başlayan <code>special</code> seçici kullanarak sınıfı seçebilirsin. Aşağıdakileri CSS kurallarını dosyana ekle:</p> + +<pre class="brush: css notranslate">.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Sonucun ne olduğunu görmek için kaydedin ve yenile.</p> + +<p><code>special</code> sınıfını bu liste öğesiyle aynı görünüme sahip olmasını istediğin herhangi bir öğeye uygulayabilirsin. Örn; <code><span></code> öğesinin içeriğininde turuncu ve kalın olmasını isteyebilirsin. bu öğeyenin <code>class</code> niteliğine <code>special</code> değerini ekle ve sayfayı yenile. Amacına ulaştığını göreceksin.</p> + +<p>Bazen, sınıfla birlikte HTML öğelerinin birlikte kullanıldığı kurallar görürsünüz:</p> + +<pre class="brush: css notranslate">li.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Bu sözdizimi, "special sınıfana dahil bir <code>li</code> öğesi seç" anlamına gelir. Bu şekilde bir kural tanımladığında, bu kuralı <code><span></code> veya başka bir öğeye yalnızca sınıf ekleyerek uygulayamazsın. Bu öğe veya öğeler içinde kural tanımlaman gerekir:</p> + +<pre class="brush: css notranslate">li.special, +span.special { + color: orange; + font-weight: bold; +}</pre> + +<p>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.</p> + +<h2 id="Belgedeki_konumlarına_göre_öğeleri_şekillendirme">Belgedeki konumlarına göre öğeleri şekillendirme</h2> + +<p>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 <code><em></code> öğesi vardır — biri bir paragrafın içinde, diğeri bir listenin içinde. Yalnızca <code><li></code> öğesinin içerisine yerleştirilen <code><em></code> öğesini seçmek için, diğer seçiciyle arasına <strong>boşluk karakterini</strong> koyarak, <code>soy birleştirici</code> adı verilen bir seçici kullanabilirim.</p> + +<p>Aşağıdaki kuralı stil sayfana ekle.</p> + +<pre class="brush: css notranslate">li em { + color: rebeccapurple; +}</pre> + +<p>Bu seçici <code><li></code> içindeki (soyundan gelen) <code><em></code> öğesini seçecektir. Dolayısıyla, örnek belgemizde, <code><em></code> içerisindeki üçüncü listedeki ifadenin mor olduğunu, ancak dışında kalan ifadenin değişmediğini görmelisin. </p> + +<p>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 <code>+</code> (<strong>Komşu kardeş birleştirici</strong>) yerleştirin.</p> + +<p><span>Bu kuralı stil sayfana eklemeyi dene:</span></p> + +<pre class="brush: css notranslate">h1 + p { + font-size: 200%; +}</pre> + +<p>Aşağıdaki etkileşimli örnekte, yukarıdaki iki kuralı içerir. Sizde bir paragrafın içindeki <code><span></code> öğ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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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 <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">Seçiciler</a> dersimizde bu seçicilerin tümüne ve çok daha fazlasına düzgün bir şekilde göz atacağız.</p> +</div> + +<h2 id="Öğeleri_durumuna_göre_şekillendirme">Öğeleri durumuna göre şekillendirme</h2> + +<p>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 <code><a></code> (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.</p> + +<pre class="brush: css notranslate">a:link { + color: pink; +} + +a:visited { + color: green; +}</pre> + +<p>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.</p> + +<pre class="brush: css notranslate">a:hover { + text-decoration: none; +}</pre> + +<p>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?</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> + +<p>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.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Bu derslerde ve MDN genelinde <a href="/tr/docs/Learn/Accessibility">erişilebilirlilikten</a> 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.</p> + +<p>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.</p> + +<p>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.</p> +</div> + +<h2 id="Seçicileri_ve_birleştiricileri_birleştirmek">Seçicileri ve birleştiricileri birleştirmek</h2> + +<p>Birden çok seçici ve birleştiriciyi bir araya getirebileceğini belirtmekte fayda var. Örneğin:</p> + +<pre class="brush: css notranslate">/* <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 { ... }</pre> + +<p>Birden çok türü bir arada da birleştirebilirsin. Aşağıdakileri koduna eklemeyi dene:</p> + +<pre class="brush: css notranslate">body h1 + p .special { + color: yellow; + background-color: black; + padding: 5px; +}</pre> + +<p>Bu kural, <code><body></code> öğesinin içerisinde bulunan <code><h1></code> öğesinden sonra ilk gelen <code>special</code> sınıfına dahil <code><p></code> öğesini seçer. Vay be!</p> + +<p>Orjinal HTML'de şekil verilmeyen tek öğe <code><span class="special"></code>dir.</p> + +<p>Şu anda bu size karmaşık geliyorsa endişelenme — daha fazla CSS yazdıkça buna anlamaya başlayacaksın.</p> + +<h2 id="Özet">Özet</h2> + +<p>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.</p> + +<p>Bir sonraki derste CSS'in nasıl yapılandırıldığına bir göz atacağız.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS Nedir?</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır?</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerimizi uygulamak</a></li> +</ol> 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 new file mode 100644 index 0000000000..4a40f8481d --- /dev/null +++ b/files/tr/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,551 @@ +--- +title: CSS nasıl yapılandırılır +slug: Öğren/CSS/Ilk_adimlar/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> + +<p class="summary">Artık CSS'in amacını ve kullanımını anlamaya başladığına göre, CSS'in yapısını inceleyelim.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Önkoşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler, HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü incele) ve <a href="/tr/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS'in nasıl çalıştığı hakkın</a> bilgi.</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>CSS'in temel sözdizimi yapılarını ayrıntılı olarak öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="CSSi_HTMLye_uygulama">CSS'i HTML'ye uygulama</h2> + +<p>İ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.</p> + +<h3 id="Harici_stil_sayfası">Harici stil sayfası</h3> + +<p>Harici bir stil sayfası, <code>.css</code> 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. <a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e Başlarken</a> bölümünde harici bir stil sayfasını web sayfamıza bağlamıştık.</p> + +<p>Bir HTML <code><link></code> etiketi ile harici bir CSS stil sayfası dosyasına başvuruyoruz :</p> + +<pre class="brush: html notranslate"><!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></pre> + +<p>CSS stil sayfası dosyası aşağıdaki şekilde görünebilir:</p> + +<pre class="brush: css notranslate">h1 { + color: blue; + background-color: yellow; + border: 1px solid black; +} + +p { + color: red; +}</pre> + +<p>{{htmlelement("link")}} etiketi <code>href</code> 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:</p> + +<pre class="brush: html notranslate"><!-- 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"></pre> + +<h3 id="Dahili_stil_sayfası">Dahili stil sayfası</h3> + +<p>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.</p> + +<p>Dahili bir stil sayfasının HTML'si şöyle görünebilir:</p> + +<pre class="brush: html notranslate"><!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></pre> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Satır_içi_stiller">Satır içi stiller</h3> + +<p>Satır içi stiller, bir <code>style</code> 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:</p> + +<pre class="brush: html notranslate"><!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></pre> + +<p><strong>Mümkünse CSS'i bu şekilde kullanmaktan sakının.</strong> 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.</p> + +<p>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.</p> + +<h2 id="CSS_ile_oynamak">CSS ile oynamak</h2> + +<p>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:</p> + +<p><strong>index.html:</strong></p> + +<pre class="brush: html notranslate"><!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></pre> + +<p><strong>styles.css:</strong></p> + +<pre class="brush: css notranslate">/* Create your test CSS here */ + +p { + color: red; +}</pre> + +<p>Denemek ve değişiklik yapmak için hem HTML dosyandaki <code><body></code> etiketi arasına hemde CSS stil sayfana öğeler ve kurallar ekle.</p> + +<p>Aşağıdaki etkileşimle düzenleyiciyi de kullanabilirsin..</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p> + +<p>Oku ve eğlen!</p> + +<h2 id="Seçiciler">Seçiciler</h2> + +<p>Bir seçici, stil uygulayacağı içerik için HTML'yi hedefler. <a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a> 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.</p> + +<p>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.</p> + +<pre class="brush: css notranslate">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*/</pre> + +<p>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.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: bir sonraki kısımda seçiciler hakkında daha fazla bilgi edineceksini <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a>.</p> +</div> + +<h3 id="Özgüllük"><u>Özgüllük</u></h3> + +<p>İki seçicinin aynı HTML öğesini hedeflediği senaryolarla karşılaşabilirsin. Paragraf <code><p></code> 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</p> + +<pre class="brush: css notranslate">.special { + color: red; +} + +p { + color: blue; +}</pre> + +<p>HTML belgemizde de bir <code>special</code> 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> + +<pre class="brush: html notranslate"><p class="special">Benim rengim nedir?</p></pre> + +<p>CSS dili, bir çakışma durumunda hangi seçicinin daha güçlü olduğunu kontrol etmek için bazı kurallara sahiptir. Bu kurallara <strong>art arda denetim</strong> ve <strong>özgüllük</strong> denir. Aşağıdaki kod bloğunda, seçici için iki kural tamınlarız. Ancak <code><p></code> 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 <strong>art arda denetim</strong> kuralıdır.</p> + +<pre class="brush: css notranslate">p { + color: red; +} + +p { + color: blue; +}</pre> + +<p>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.</p> + +<p>Kendin için bunu dene! Bir HTML ekle ve ardından bu iki kuralı stil sayfana ekle. Ardından <code>p.special</code> kuralının <code>p{....</code>} kuralına baskın geldiğini izle.</p> + +<p>Ö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 <a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Ard arda denetim ve miras</a> bölümü özgüllüğün nasıl hesaplanacağı da dahil olmak üzere bunu ayrıntılı olarak açıklamaktadır.</p> + +<p>Ş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.</p> + +<h2 id="Nitelikler_ve_değerler">Nitelikler ve değerler</h2> + +<p>En basit düzeyinde, CSS iki bileşenden oluşur:</p> + +<ul> + <li><strong>Nitelik</strong>: Bunlar, değiştirmek istediğin stilin niteliklerini gösteren, okunabilir tanımlayacılardır. Örn; <code><a href="/tr/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/tr/docs/Web/CSS/width">width</a></code>, <code><a href="/tr/docs/Web/CSS/background-color">background-color</a></code>.</li> + <li><strong>Değer</strong>: Her niteliğe bir değer atanır. Bu değer, niteliğin nasıl biçimlendirileceğini gösterir.</li> +</ul> + +<p>Aşağıdaki örnek, tek bir niteliği ve değeri vurgulamaktadır. Nitelik adı <code><strong>color</strong></code> ve değeri <code><strong>blue</strong></code>.</p> + +<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>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.</p> + +<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>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 <code><p></code> etiketi için, diğeri <code><h1></code> etiketi için. Renkli vurgulanan CSS kuralı <code><h1></code> etiketinin stilini tanımlar.</p> + +<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>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.</p> + +<div class="blockIndicator warning"> +<p><strong>Önemli: </strong>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. (<code>:</code>)</p> +</div> + +<p><strong>Aşağıda listenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kurallar yazın: </strong></p> + +<ul> + <li><strong>{{cssxref("font-size")}}</strong></li> + <li><strong>{{cssxref("width")}}</strong></li> + <li><strong>{{cssxref("background-color")}}</strong></li> + <li><strong>{{cssxref("color")}}</strong></li> + <li><strong>{{cssxref("border")}}</strong></li> +</ul> + +<div class="warning"> +<p><strong>Önemli</strong>: 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.</p> +</div> + +<div class="warning"> +<p><strong>Önemli</strong>: 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. </p> +</div> + +<h3 id="Fonksiyonlar">Fonksiyonlar</h3> + +<p>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. <code>calc()</code> fonksiyonu ele alalım, CSS içinde matematiksel işlev yapabilen bir fonksiyondur.</p> + +<div id="calc_example"> +<pre class="brush: html notranslate"><div class="outer"><div class="box">İç kutu genişliği 90% - 30px.</div></div></pre> + +<pre class="brush: css notranslate">.outer { + border: 5px solid black; +} + +.box { + padding: 10px; + width: calc(90% - 30px); + background-color: rebeccapurple; + color: white; +}</pre> +</div> + +<p>Bu şu şekilde çalışır:</p> + +<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> + +<p>Bu işlev, işlev adı ve işlevin değerlerini kapsayan parantezlerden oluşur. <code>calc()</code> 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.</p> + +<p>Başka bir örnek {{cssxref("transform")}} niteliği, <code>rotate()</code>fonksiyonundan dönen değerleri alabilir.</p> + +<div id="transform_example"> +<pre class="brush: html notranslate"><div class="box"></div></pre> + +<pre class="brush: css notranslate">.box { + margin: 30px; + width: 100px; + height: 100px; + background-color: rebeccapurple; + transform: rotate(0.8turn) +}</pre> +</div> + +<p>Yukarıdaki kodun çıktısı şuna benzer:</p> + +<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> + +<p><strong>Aşağıdaki listelenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kuralları yazın: </strong></p> + +<ul> + <li><strong>{{cssxref("transform")}}</strong></li> + <li><strong>{{cssxref("background-image")}}, in particular gradient values</strong></li> + <li><strong>{{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values</strong></li> +</ul> + +<h2 id="ruleskurallar">@rules(kurallar)</h2> + +<p>CSS <code><a href="/tr/docs/Web/CSS/At-rule">@rules</a></code> ("et-rules" olarak teleffuz edilier), CSS'in ne yapması gerektiği ve nasıl davranması gerektiği konusunda talimatlar sağlar. Bazıları <code>@rules</code> sadece bir anahtar ve bir değerden ibarettir. Örn; <code>@import</code> bir stil sayfasını başka bir CSS stil sayfasına aktarır:</p> + +<pre class="brush: css notranslate">@import 'styles2.css';</pre> + +<p>Karşılaşabileceğin en yaygın <code>@rule</code> kurallarından birtanesi <code>@media</code>, <a href="/tr/docs/Web/CSS/Media_Queries">medya sorguları</a> oluşturmak için kullanılr. Medya sorguları, CSS stilini uygualamak için koşullu mantık kullanır.</p> + +<p>Aşağıdaki örnekte, stil sayfası <code><body></code> öğesi için pembe renkli bir arka plan tanımlayan bir medya sorgusu izler.</p> + +<pre class="brush: css notranslate">body { + background-color: pink; +} + +@media (min-width: 30em) { + body { + background-color: blue; + } +}</pre> + +<p>Eğitimler boyunda diğer <code>@rules</code> kurallarıyla karılaşacaksın.</p> + +<p><strong>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.</strong></p> + +<h2 id="Kısaltmalar">Kısaltmalar</h2> + +<p>{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, ve {{cssxref("margin")}} gibi bazı niteliklere <strong>kısaltmalar</strong> denir<strong>.</strong> Bunun nedeni tekbir satırda birden fazla değer alabilmeleridir.</p> + +<p>Örneğin, bu tek satırlık kod:</p> + +<pre class="brush: css notranslate">/* 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;</pre> + +<p>şu dört kod satırına eşdeğerdir:</p> + +<pre class="brush: css notranslate">padding-top: 10px; +padding-right: 15px; +padding-bottom: 15px; +padding-left: 5px;</pre> + +<p>Bu tek satır:</p> + +<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> + +<p>Şu beş satıra eşdeğerdir:</p> + +<pre class="brush: css notranslate">background-color: red; +background-image: url(bg-graphic.png); +background-position: 10px 10px; +background-repeat: repeat-x; +background-attachment: fixed;</pre> + +<p>Kursun ilerleyen bölümlerinde, birçok kısaltma örneğiyle karşılaşacaksın. MDN'nin <a href="/tr/docs/Web/CSS/Reference">CSS referensı</a> sayfaları herhangi bir kısaltma niteliği hakkında daha fazla bilgi için iyi bir kaynaktır.</p> + +<p><strong>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.</strong></p> + +<div class="blockIndicator warning"> +<p><strong>Uyarı</strong>: 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, <strong>önceden ayarlanmış değeri geçersiz kılabileceği</strong> anlamına gelir.</p> +</div> + +<h2 id="Açıklamalar">Açıklamalar</h2> + +<p>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.</p> + +<p>CSS açıklamaları <code>/*</code> ile başlar ve <code>*/</code> 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.</p> + +<pre class="brush: css notranslate">/* 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; +}</pre> + +<p>"Kod açıklamaları" CSS kodunu deneme için devre dışı bırakmak için de yararlıdır. Aşağıdaki örnekte, <code>.special</code> sınıfı açıklama içerisine alınıp devre dışı bırakılmıştır.</p> + +<pre class="brush: css notranslate">/*.special { + color: red; +}*/ + +p { + color: blue; +}</pre> + +<p><strong>CSS'ne açıklamalar ekle!</strong></p> + +<h2 id="Beyaz_boşluk">Beyaz boşluk</h2> + +<p>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.</p> + +<p>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.</p> + +<pre class="brush: css notranslate">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; +} +</pre> + +<p id="Very_compact">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.</p> + +<pre class="brush: css notranslate">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;} +</pre> + +<p>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.</p> + +<div class="blockIndicator warning"> +<p><strong>Önemli:</strong> CSS bildirimlerindeki beyaz boşuk değerleri ayırsa da, <strong>nitelik adlarında hiçbir zaman boşluk olmaz</strong>.</p> +</div> + +<p>Örneğin, bu geçerli bir CSS beyanıdır:</p> + +<pre class="brush: css notranslate">margin: 0 auto; +padding-left: 10px;</pre> + +<p>Fakat bu beyanlar geçersizdir:</p> + +<pre class="brush: css notranslate">margin: 0auto; +padding- left: 10px;</pre> + +<p>Aralık hatalarını görüyor musun? ilk olarak <code>margin</code> niteliği <code>0auto</code> değerini geçerli bir değer olarak tanımaz. Tanımın <code>0auto</code> yu iki ayrı değer olarak alması amaçlanmıştır. <code>0</code> ve <code>auot</code> olarak. İkinci <code>padding-</code> geçerli bir nitelik olarak tanınmıyor. Doğru nitelik adı (<code>padding-left</code>) hatalı bir boşlukla ayrılmıştır.<br> + <br> + 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.</p> + +<pre class="brush: css notranslate">/* 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; +</pre> + +<p><strong>Boşluğun CSS'i nasıl bozabileceğini öğrenmek için test CSS'izin içinde boşluk bırakarak oynamayı dene.</strong></p> + +<h2 id="Sıradaki_ne">Sıradaki ne?</h2> + +<p>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 <a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a>, bunu açıklar.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir?</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygulama</a></li> +</ol> 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 new file mode 100644 index 0000000000..c2cb95aa43 --- /dev/null +++ b/files/tr/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,157 @@ +--- +title: CSS nasıl çalışır +slug: Öğren/CSS/Ilk_adimlar/CSS_nasil_calisir +tags: + - Başlangıç + - Beginner + - CSS + - DOM + - Eğitim + - Learn +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{LearnSidebar}}<br> + {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_gerçekten_nasıl_çalışır">CSS gerçekten nasıl çalışır?</h2> + +<p>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.</p> + +<ol> + <li>Tarayici HTML'yi yükler(Örn. onu ağdan alır).</li> + <li>{{Glossary("HTML")}}'yi bir {{Glossary("DOM")}}'a (<em>Belge Nesnesi Modeli</em>) 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.</li> + <li>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.</li> + <li>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).</li> + <li>Ağacı oluşturma, kurallar uygulandıktan sonra görünmesi gereken şekil yapıya yerleştirilir.</li> + <li>Sayfanın görsel görüntüsü ekrana getirilir(bu aşamaya boyama denir).</li> +</ol> + +<p>Aşağıdaki şema, işlemin basit bir görünümünü sunar.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> + +<h2 id="DOM_hakkında">DOM hakkında</h2> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Gerçek_bir_DOM_örneği">Gerçek bir DOM örneği</h2> + +<p>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.</p> + +<p>Aşağıdaki HTML kodunu ele alalım:</p> + +<pre class="brush: html notranslate"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p></pre> + +<p>DOM'da, <code><p></code> nesnemize karşılık gelen düğüm(<code>P</code>) bir ebeveyndir. Düğümümüzün çocukları bir adet metin düğümü ve üç adet <code><span></code> öğemize karşılık gelen (<code>SPAN</code>) düğümüdür. <code>SPAN</code> Düğümlerimizde kendi metin düğümlerinin ebeveynleridir.</p> + +<pre class="notranslate">P +├─ "Let's use:" +├─ SPAN +| └─ "Cascading" +├─ SPAN +| └─ "Style" +└─ SPAN + └─ "Sheets"</pre> + +<p>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 :</p> + +<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> + +<div class="hidden"> +<pre class="brush: css notranslate">p {margin:0;}</pre> +</div> + +<h2 id="DOMa_CSS_uygulama">DOM'a CSS uygulama</h2> + +<p>Diyelim ki belgemize stil vermek için biraz CSS ekledik. HTML kesitimiz aşağıdaki gibidir:</p> + +<pre class="brush: html notranslate"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p></pre> + +<p>Diyelimki ona aşağıdaki CSS'i uyguladık:</p> + +<pre class="brush: css notranslate">span { + border: 1px solid black; + background-color: lime; +}</pre> + +<p>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 <code>span</code> seçicisi olması nedeniyle, tarayıcı CSS'i çok hızlı bir şekilde sıralayabilecektir. Bu kuralı <code><span></code> öğelerinin üçünede uygulayacak ve son görseli renklendirecektir.</p> + +<p>Güncellenen çıktı aşağıdaki gibidir:</p> + +<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p> + +<p>Bir sonraki kısımdaki <a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS Hata Ayıklama</a> 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.</p> + +<h2 id="Tarayıcı_anlamadığı_bir_CSS_ile_karşılaşırsa_ne_olur">Tarayıcı anlamadığı bir CSS ile karşılaşırsa ne olur?</h2> + +<p><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">Daha önceki bir derste</a> 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.</p> + +<p>Cevap; hiç bir şey yapmaması ve sadece bir sonraki CSS parçasına geçmesidir!</p> + +<p>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> + +<div id="Skipping_example"> +<pre class="brush: html notranslate"><p> I want this text to be large, bold and blue.</p></pre> + +<pre class="brush: css notranslate">p { + font-weight: bold; + colour: blue; /* incorrect spelling of the color property */ + font-size: 200%; +}</pre> +</div> + +<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> + +<p>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.</p> + +<p>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 <code>calc()</code> fonksiyonunu bir değer olarak desteklemez. Peki bunun için ne yapabilirim? Bir kutu için piksel cinsinden genişlik verebilirim (<code>width: 500px)</code>, sonrada <code>calc(100% - 50px)</code> fonksiyonuyla bir değer vermeye devam edebilirim. Eski tarayıcılar, <code>calc()</code> 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 <code>calc()</code> fonksiyonunu görüp bu kuraldaki değeri uygulayacaklardır. Önceki satırdaki değer geçersiz sayacaklardır.</p> + +<pre class="brush: css notranslate">.box { + width: 500px; + width: calc(100% - 50px); +}</pre> + +<p>Sonraki derste çeşitli tarayıcıları desteklemenin daha birçok yolunu inceleyeceğiz.</p> + +<h2 id="Ve_sonunda">Ve sonunda</h2> + +<p>Bu kısmı neredeyse bitirdin; yapacak sadece bir işimiz kaldı. Bir sonraki makalede <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">öğrendiklerini uygulacak</a> ve bu süreçte bazı CSS'leri test edeceksin.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS Nedir?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygula </a></li> +</ol> diff --git a/files/tr/learn/css/first_steps/index.html b/files/tr/learn/css/first_steps/index.html new file mode 100644 index 0000000000..eca80e4e76 --- /dev/null +++ b/files/tr/learn/css/first_steps/index.html @@ -0,0 +1,64 @@ +--- +title: CSS'e ilk adım +slug: Öğren/CSS/Ilk_adimlar +tags: + - Acemi + - Beginner + - CSS + - Landing + - Learn + - Modul + - Module + - first steps + - İlk Adım +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<div class="in-page-callout webdev"> +<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun"><span class="highlight-span">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</span></h3> + +<p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p> + +<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p> +</div> + +<h2 id="Önkoşullar">Önkoşullar</h2> + +<p>Bu bölüme başlamadan önce sağlama gereken koşullar şunlardır:</p> + +<ol> + <li>Bilgisayarları ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın.</li> + <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" rel="nofollow">Gerekli yazılımların kurulumu</a> dersinde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem, <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" rel="nofollow">Dosyalarla çalışma</a> dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olmalısın.</li> + <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> konusunda anlatıldığı gibi temel HTML bilgisi sahibi olmalısın.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: Kendi dosyalarını oluşturma yeteneğin olmayan bir bilgisayar, tablet veya başka bir cihaz üzerinde çalışıyorsan, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi kodlama yapabileceğin bir sitede kod örneklerini(çoğunu) deneyebilirsin.</p> +</div> + +<h2 id="Bölümler">Bölümler</h2> + +<p>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.</p> + +<dl> + <dt><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir?</a></dt> + <dd><strong><a href="/tr/docs/Glossary/CSS">CSS</a></strong> (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.</dd> + <dt><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></dt> + <dd>Bu Yazıda basit bir HTML belgesini alıp ona CSS uygulayacağız, bu sırada dil hakkında bazı pratik bilgiler öğreteceğiz.</dd> + <dt><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır?</a></dt> + <dd>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</dd> + <dt><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini kullanın</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Göz_at">Göz at</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Orta Düzey Web Okuryazarlığı 1:CSS'e Giriş</a></dt> + <dd>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.</dd> +</dl> 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 new file mode 100644 index 0000000000..3282953c36 --- /dev/null +++ b/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html @@ -0,0 +1,105 @@ +--- +title: Öğrendiklerini uygula +slug: Öğren/CSS/Ilk_adimlar/Ogrendiklerinizi_Uygulayın +tags: + - Acemi + - Başlangıç + - Beginner + - CSS + - Eğitim + - Learn + - Playground + - oyun alanı +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön Koşul:</th> + <td>Bu makaleye geçmeden önce CSS temelleri kısmının geri kalanını çalışmış ve HTML temellerini anlamış olman gerekir (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a>).</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Biraz CSS ile oyun oynamak ve yeni öğrendiğin bilgilerini test etmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Başlangıç_noktası">Başlangıç noktası</h2> + +<p>Aşağıdaki canlı düzenleyicide çalışabilir veya kendi düzenleyicinle çalışmak için <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">örnek dosyayı </a>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: <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, ve <a href="https://glitch.com/" rel="noopener">Glitch</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Takıldığın noktalarda bizden yardım isteyebilirsin — <a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge#Assessment_or_further_help">Değerlendirme ve daha fazlası</a> bölümüne bakabilirsin.</p> +</div> + +<h2 id="CSS_ile_çalışmak">CSS ile çalışmak</h2> + +<p>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.</p> + +<ul> + <li>{{cssxref("font-family")}}</li> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("text-decoration")}}</li> +</ul> + +<p>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.</p> + +<p>Kullandığım niteliklere farklı değerler girerek, bu biyografinin görünümünü değiştirin.</p> + +<ol> + <li>CSS <code>color</code> niteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(<code>hotpink)</code> yap.</li> + <li>Birinci seviye başlığın altına {{cssxref("border-bottom")}} niteliği ile 10px boyutunda noktalı(<code>dotted</code>) çizgi atın ve rengini mor(<code>purple</code>) yap.</li> + <li>2. düzey başlığı italik yap.</li> + <li><code>ul</code> etikemizin arka plan renk {{cssxref("background-color")}} değerini #eeeeee yap ve ayrıca mor(<code>purple</code>) renginde ve 5px kalınlığında çerçeve({{cssxref("border")}}) ekle. İçeriği çerçeveden uzaklaştırmak için <code>paddin</code> niteliğine kullan.</li> + <li>Linklerin üzerine gelindiğinde renginin yeşil(<code>green</code>) olmasını sağla.</li> +</ol> + +<p>Çıktının resimdeki gibi gözükmesi gerekmektedir.</p> + +<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p> + +<p><a href="/tr/docs/Web/CSS/Reference">MDN CSS reference</a> safasında, burada bahsedilmeyen bazı özelliklere göz atıp maceraya atıl!</p> + +<p>Burada yanlış bir cevap olmadığını unutma — öğreniminin bu aşamasında biraz eğlenebilirsin.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> + +<h2 id="Değerlendirme_ve_daha_fazlası">Değerlendirme ve daha fazlası</h2> + +<p>Çalışmanın değerlendirilmesini veya takıldığın bir noktada yardım almak istediğinde yapman gerekenler:</p> + +<ol> + <li>Çalışmanı <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, veya <a href="https://glitch.com/" rel="noopener">Glitch</a> gibi çevrimiçi bir düzenleyiciye kaydet.</li> + <li><a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> sayfasına değerlendirme veya yardım için bir gönderi yaz. Gönderinde olması gerekenler: + <ul> + <li>"CSS ilk adımları için değerlendirme gerekmektedir" gibi açılayıcı bir metin.</li> + <li>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.</li> + <li>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.</li> + <li>Yardım istediğin konunun <em><u>sorusunu</u> </em>içeren sayfanın bağlantısı.</li> + </ul> + </li> +</ol> + +<h2 id="Sıradaki_ne">Sıradaki ne?</h2> + +<p>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 <a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yapı taşlarında</a>, birkaç önemli konuya derinlemesine bakmaya devam edeceğiz.</p> + +<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li> + <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygulama</a></li> +</ol> 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 new file mode 100644 index 0000000000..8433d2e196 --- /dev/null +++ b/files/tr/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Nedir? +slug: Öğren/CSS/Ilk_adimlar/CSS_Nedir +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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> + +<p class="summary"><strong>{{Glossary("CSS")}}</strong>(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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön Koşullar:</th> + <td><a class="external new external-icon" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" rel="nofollow noopener">Gerekli yazılımların kurulumu</a> dersinde ayrıntılı olarak açıklandığı gibi, gerekli yazılımların kurulu olduğu bir sistem; <a class="external new external-icon" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" rel="nofollow noopener">Dosyalarla çalışma</a> dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceği hakkında bilgi, <a href="https://wiki.developer.mozilla.org/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> konusunda anlatıldığı gibi temel HTML hakkında bilgi sahibi olmalısın.</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>CSS'in ne olduğunu öğrenmek</td> + </tr> + </tbody> +</table> + +<p><a href="https://wiki.developer.mozilla.org/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> 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.</p> + +<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p> + +<p>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.</p> + +<p>Tarayıcının varsayılan stilleri hakkında daha fazla bilgi için aşağıdaki videoyu izle.</p> + +<p>{{EmbedYouTube("spK_S0HfzFw")}}</p> + +<h2 id="CSS_ne_içindir">CSS ne içindir?</h2> + +<p>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.</p> + +<p>Bir <strong>belge</strong> genellikle bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. — <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/HTML">HTML</a> en yaygın biçimlendirme dilidir, ancak <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/SVG">SVG</a> veya <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/XML">XML</a> gibi başka biçimlendirme dilleriyle de karşılaşabilirsin.</p> + +<p>Bir dökümanı bir kullanıcıya <strong>sunmak</strong>, onu ziyaretçinin anlayabileceği bir forma dönüştürmek anlamana gelir. <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Web_Taray%C4%B1c%C4%B1s%C4%B1">Tarayıcılar</a>, sevdiğim <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Mozilla_Firefox">Firefox</a>, <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Google_Chrome">Chrome</a> veya <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Microsoft_Edge">Edge</a>, belgeleri bir bilgisayar ekranında, projektörde veya yazıcıda görsel olarak sunmak için tasarlanmıştır.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>CSS, en basit şekilde belge metninin şekillendirimesi için kullanılabilir — örn; başlıkların ve bağlantıların <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/color_value" rel="nofollow">rengi</a> ve <a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/font-size">boyutunu</a> değiştirmek ve düzen oluşturmak için de kullanılabilinir — örn; <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/Layout_cookbook/Column_layouts" rel="nofollow">tek bir metin sütununu bir düzene dönüştürmek</a>. <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/CSS_Animations" rel="nofollow">Animasyon</a> gibi efektler için bile kullanılabilir. Belirli örnekler için bu paragraftaki bağlantılara bir göz atın.</p> + +<h2 id="CSS_sözdizimi">CSS sözdizimi</h2> + +<p>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".</p> + +<p>Aşağıdaki kod, yukarıda açıklanan stili elde edecek çok basit bir CSS kuralını gösterir:</p> + +<pre class="brush: css notranslate">h1 { + color: red; + font-size: 5em; +}</pre> + +<p>Kural, bir öğe {{Glossary("CSS Selector", "seçici")}} ile başlar. Bu, biçimlendireceğimiz HTML öğesini <em>seçer</em>. Bu başlangıç ile birinci seviye başlıkların stilini belirleyeceğimizi {{htmlelement("h1")}} belirtiyoruz.</p> + +<p>Daha sonra bir dizi süslü parantezimiz <code>{ }</code>var. Bunların içinde, <strong>nitelik</strong> ve <strong>değer</strong> çifti biçimini alan bir veya daha fazla <strong>beyan</strong> olacaktır. Her bir çift, seçtiğimiz öğelerin bir niteliğini ve ardından niteliğe vermek istediğimiz bir değeri belirtir.</p> + +<p>İ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 <code>color</code> niteliğine sahibiz. Ayrıca <code>font-size</code> niteliğinede sahibiz. Bu nitelik, çeşitli <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages" rel="nofollow">boyut birimlerini</a> değer olarak alabilir. Fakat <code>color</code> niteliğine biri uzunluk birimi atamana izin verilmez.</p> + +<p>Bir CSS stil sayfası, birbiri ardına yazılmış birçok kuralı içerecektir.</p> + +<pre class="brush: css notranslate">h1 { + color: red; + font-size: 5em; +} + +p { + color: black; +}</pre> + +<p>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.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: MDN <a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/Reference">CSS referans</a>'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 <em>css-feature-name</em>" diye aramaya alışmalısın. Örn; "mdn color" ve "mdn font-size"!</p> +</div> + +<h2 id="CSS_modülleri">CSS modülleri</h2> + +<p>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 <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/CSS_Backgrounds_and_Borders" rel="nofollow">Arka Palanlar ve Kenarlıklar</a> modüllerine MDN refaransından bakabilirsin. Ayrıca, teknolojiyi tanımlayan CSS Spesifikasyonuna bağlantılar da bulacaksın (aşağıya bak).</p> + +<p>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.</p> + +<p>Kesin bir örnek vermek gerekirse, Arka Planlar ve Kenarlıklar modülüne geri dönelim — bu modülde tanımlacak <code><a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/background-color">background-color</a></code> ve <code><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/border-color" rel="nofollow">border-color</a></code> nitelik değerlerinin aynı değerleri alabileceğini düşünebilirsin. Haklısında!</p> + +<h3 id="CSS_özellikleri">CSS özellikleri</h3> + +<p>Tüm web teknolojileri (HTML, CSS, JavaScript, vb.), <span class="ILfuVd"><span class="hgKElc">Standardizasyon</span></span> konsorsiyumları ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} veya {{glossary("Khronos")}} gibi) tarafından yayınlanan standartlar adı verilen dev dokümanlarda tanımlanır.</p> + +<p>CSS'de farklı değildir — W3C içindeki <a class="external external-icon" href="https://www.w3.org/Style/CSS/" rel="noopener">CSS Working Group</a> 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, <em>davetli uzmanlar</em> olarak bilinen ve üye bir kuruluşa bağlı olmayan kişilerden oluşmaktadır.</p> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + +<p>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. <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_works" rel="nofollow">CSS Nasıl Çalışır</a> 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.</p> + +<p>Aşağıda, CSS <code><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/font-family" rel="nofollow">font-family</a></code> niteliği için destek tablosu yer almaktadır.</p> + +<p>{{Compat("css.properties.font-family")}}</p> + +<h2 id="Sırada_ne_var">Sırada ne var?</h2> + +<p>Artık CSS'in ne olduğunu biraz anladığına göre, CSS'i kendin yazmaya başlabileceğin <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Getting_started" rel="nofollow">CSS ile Başlarken</a> bölümüne geçebiliriz.</p> + +<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/What_is_CSS" rel="nofollow">CSS nedir?</a></li> + <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Getting_started" rel="nofollow">CSS'ye başlarken</a></li> + <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured" rel="nofollow">CSS nasıl yapılandırılır</a></li> + <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_works" rel="nofollow">CSS nasıl çalışır</a></li> + <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge" rel="nofollow">Öğrendiklerimizi uygulamak</a></li> +</ol> diff --git a/files/tr/learn/css/index.html b/files/tr/learn/css/index.html new file mode 100644 index 0000000000..0b6e8df673 --- /dev/null +++ b/files/tr/learn/css/index.html @@ -0,0 +1,86 @@ +--- +title: CSS kullanarak HTML şekillendirmeyi öğrenin +slug: Öğren/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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<div class="in-page-callout webdev"> +<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</h3> + +<p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Başla</a></p> +</div> + +<h2 id="Önkoşullar">Önkoşullar</h2> + +<p>CSS'i öğrenmeye başlamadan önce HTML'nin temellerini öğrenmelisin. Bunun için <a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> eğitiminden başlayabilirsin. Bu kısımda şunları öğreneceksin:</p> + +<ul> + <li><a href="/tr/docs/Learn/CSS/Introduction_to_CSS">CSS'ye Giriş</a> kısmı ile CSS başlangıç</li> + <li>Daha gelişmiş <a href="/tr/docs/Learn/HTML#Modules">HTML modülleri</a></li> + <li><a href="/tr/docs/Learn/JavaScript">JavaScript</a>, ve web sayfalarına dinamik işlevsellik eklemek için nasıl kullanılacağını</li> +</ul> + +<p>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.</p> + +<p>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. <a href="/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Gerekli yazılımların kurulumu</a> bölümünde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem ve <a href="/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışma</a> 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 <a href="/tr/docs/Learn/Getting_started_with_the_web">Web'e başlarken</a> eğitiminin bir parçasıdır.</p> + +<p>Web geliştirme konusunda tamamen yeniysen, bu konulara devam etmeden önce <a href="/tr/docs/Learn/Getting_started_with_the_web">Web'e başlarken</a> eğitimini adım adım çalışmanı öneririz. Bununla birlikte <a href="/tr/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS'in temelleri</a> dersinde anlatılanların çoğu, <a href="/tr/docs/Learn/CSS/First_steps">CSS'e ilk adım</a> bölümünde daha ayrıntılı bir şekilde ele alınmaktadır.</p> + +<h2 id="Bölümler">Bölümler</h2> + +<p>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.</p> + +<dl> + <dt><a href="/tr/docs/Learn/CSS/First_steps">CSS'e ilk adım</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yap taşları</a></dt> + <dd> + <p class="summary">Bu bölüm <a href="https://developer.mozilla.org/tr/docs/Learn/CSS/First_steps">CSS'e ilk adım</a>'ı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, <a class="external external-icon" title="Cascade">art arda denetim</a> 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</p> + + <p class="summary">Buradaki amaç, size yetkin CSS yazmak için bir araç seti sağlamak ve <a href="https://developer.mozilla.org/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="https://developer.mozilla.org/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha spesifik kurallara geçmenden önce tüm temel kavramları anlamana yardımcı olmaktır.</p> + </dd> + <dt><a href="/tr/docs/Learn/CSS/Styling_text">Metin stilini belirleme</a></dt> + <dd>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.</dd> + <dt><a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Yaygın_sorunları_CSS_ile_çözme">Yaygın sorunları CSS ile çözme</h2> + +<p><a href="/tr/docs/Learn/CSS/Howto">Yaygın sorunları çözmek</a> 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.</p> + +<p>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.</p> + +<h2 id="CSS_tuhaf">"CSS tuhaf"</h2> + +<p>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.</p> + +<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p> + +<h2 id="Göz_at">Göz at</h2> + +<dl> + <dt><a href="/tr/docs/Web/CSS">MDN'de CSS</a></dt> + <dd>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.</dd> +</dl> diff --git a/files/tr/learn/css/styling_text/fundamentals/index.html b/files/tr/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..0bf22d6921 --- /dev/null +++ b/files/tr/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,737 @@ +--- +title: Temel metin ve yazı tipi biçimi +slug: Öğren/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p><span class="seoSummary">Bu derste, {{glossary("CSS")}} ile metin stilinde ustalaşma yolculuğuna başlayacağız.</span> 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Öğren/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Öğren/CSS/Ilk_adimlar" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Web sayfalarında metin biçimlendirmek için gereken temel özellikleri ve teknikleri öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="CSSde_metnin_stilini_belirlemeye_neler_dahildir">CSS'de metnin stilini belirlemeye neler dahildir?</h2> + +<p>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.</p> + +<div class="note"> +<p><strong>Not</strong>: Yukarıdaki paragraf kafanızın karışmasına neden oluyorsa, devam etmeden önce <a href="/tr/docs/Öğren/CSS/CSS_yapi_taslari/The_box_model">Kutu Modeli</a> dersimizi bir daha inceleyin.</p> +</div> + +<p>Metni bimlendirmek için kullanılan CSS özellikleri genellikle iki kategoriye ayrılır ve bunları bu derste ayrı ayrı inceleyeceğiz:</p> + +<ul> + <li><strong>Font stilleri</strong>: Metne uygulanan fontu etkileyen, hangi fontun uygulanacağını, ne kadar büyük olduğunu, kalınlığını, italik olup olmadığını gibi özellikler.</li> + <li><strong>Metnin mizanpaj stilleri</strong>: Metinin aralığını, satır/harf arasındaki boşluğunu ve metinin kutu içerisinde hizalanmasının ddeğiştirilmesi gibi özellikler.</li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: 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 <a href="/tr/docs/Web/CSS/::first-letter">::first-letter</a>(bir öğenin içindeki metnin ilk harfi), <a href="/tr/docs/Web/CSS/::first-line">::first-line</a>(bir öğenin içindeki metnin ilk satırı) veya <a href="/tr/docs/Web/CSS/::selection">::selection</a>(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.</p> +</div> + +<h2 id="FontlarYazı_Tipleri">Fontlar(Yazı Tipleri)</h2> + +<p>Fontları şekillendirme özelliklerine bakalım. Bu örnekte, aşağıdaki gibi görünen HTML öreneğine bazı farklı CSS özellikleri uygulayacağız:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p><a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">Bitmiş örneği GitHub</a>'da bulabilirsiniz (ayrıca <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">kaynak kodunu</a> da görebilirsiniz).</p> + +<h3 id="Renk">Renk</h3> + +<p>{{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).</p> + +<p><code>color</code> niteliği herhangi bir <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Colors">CSS renk birimini</a> kabul edebilir. Örneğin:</p> + +<pre class="brush: css notranslate">p { + color: red; +}</pre> + +<p>Bu kural paragraf renginin, taryıcının varsayılan rengi olan siyah yerine kırmızı olmasına neden olur:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi +temizlemek için geri çekildi. Pek çok şişko sokak faresi, +bu harika makinanın güçlü dişleri arasında kendi ölümüyle +karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin +anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> +</div> + +<p>{{ EmbedLiveSample('Renk', '100%', '230') }}</p> + +<h3 id="Font_ailesi">Font ailesi</h3> + +<p>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> + +<pre class="brush: css notranslate">p { + font-family: arial; +}</pre> + +<p>Bu, bir sayfadaki tüm paragrafların herhangi bir bilgisayarda bulunan arial fontunu kullanmasını sağlar.</p> + +<h4 id="Web_uyumlu_fontlar">Web uyumlu fontlar</h4> + +<p>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 <strong>web uyumlu font(yazı tipleri)</strong> denir.</p> + +<p>Ç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.</p> + +<p>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 <em><a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Çekirde Web Fontları</a></em> sayesinde popüler hale gelmiştir):</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Adı</th> + <th scope="col" style="white-space: nowrap;">Genel Tipi</th> + <th scope="col">Notlar</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td> + <p>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.</p> + </td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td> + <p>Bazı işletim sistemlerinde <em>Courier New</em> yazı tipinin muhtemelen daha eski bir sürümü olan <em>Courier</em> 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 <em>Courier New</em>'in kullanılması tavsiye edilir.</p> + </td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td> + <p>Bazı işletim sistemlerinde <em>Times New Roman</em>'ın muhtemelen daha eski bir sürümü olan <em>Times</em> 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 <em>Times New Roman</em>'in kullanılması tavsiye edilir.</p> + </td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td> + <p>Bu yazı tipini kullanırken dikkatli olmalısınız — mobil işletim sistemlerinde yaygın olarak bulunmaz.</p> + </td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Not</strong>: Güvenle kullanabileceğiniz yazı tipleri listesini bulabileceğiniz kaynaklar arasında, <a href="http://www.cssfontstack.com/">cssfontstack.com</a> 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.</p> +</div> + +<div class="note"> +<p><strong>Not</strong>: 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: <strong>Web yazı tipleri</strong>. Bu konu biraz daha karmaşıktır ve bu ünitenin ilerleyen bölümlerinde <a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">ayrı bir derste</a> inceleyeceğiz.</p> +</div> + +<h4 id="Varsayılan_yazı_tipleri">Varsayılan yazı tipleri</h4> + +<p>CSS genel kullanım için yazı tiplerini beş farklı ad altında gruplar: <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> ve <code>fantasy</code>. 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.</p> + +<p>Bu beş adlandırma şu şekilde guruplandırılmıştır:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col" style="width: 100px;">Ad</th> + <th scope="col">Tanım</th> + <th scope="col">Örnek</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td> + <p>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.</p> + </td> + <td><span style="font-family: serif;">Ben büyük kırmızı bir filim</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>Serif içermeyen yazı tipleridir. Yazı tipi düzdür ve daha modern göründüğü düşünülür.</td> + <td><span style="font-family: sans-serif;">Ben büyük kırmızı bir filim</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>Yazı tipinin her karakterinin genişliği aynı olduğu ve genellikle kodun okunurluluğunu kolaylaştırdığı için kodlamalarda kullanılır.</td> + <td><span style="font-family: monospace;">Ben büyük kırmızı bir filim</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>Akıcı bir el yazısını taklit etmesi amaçlanmış yazı tipleridir.</td> + <td><span style="font-family: cursive;">Ben büyük kırmızı bir filim</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>Daha çok dekoratif amaçla kullanılan süslemeli yazı tipleridir.</td> + <td><span style="font-family: fantasy;">Ben büyük kırmızı bir filim</span></td> + </tr> + </tbody> +</table> + +<h4 id="Yazı_tipi_listesi">Yazı tipi listesi</h4> + +<p>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, <code>font-family</code> niteliğine bir birinden virgül ile ayrılmış birden çok yazı tipi adından oluşan bir <strong>yazı tipi listesi</strong> tanımlarız. örn.</p> + +<pre class="brush: css notranslate">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>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.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Not</strong>: <code>Trebuchet MS</code> gibi birden fazla kelimeden oluşan font isimlerini tırnak içine almak gerekir, örneğin <code>"Trebuchet MS"</code>.</p> +</div> + +<h4 id="Bir_font-family_örneği">Bir font-family örneği</h4> + +<p>Paragraflara bir sans-serif yazı tipi vererek önceki örneğimize ekleyelim:</p> + +<pre class="brush: css notranslate">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>Sayfamız artık böyle görünür:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> + +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> + +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Bir_font-family_örneği', '100%', 220) }}</p> + +<h3 id="Yazı_Tipi_Boyutu">Yazı Tipi Boyutu</h3> + +<p>Önceki ünitede <a href="/tr/docs/Öğren/CSS/Building_blocks/Values_and_units">CSS değerleri ve birimleri</a> 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(<a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Percentages">yüzdelikler</a> ve diğerleri), ancak metni boyutlandırmak için kullanacağınız en yaygın birimlerse şunlardır:</p> + +<ul> + <li><code>px</code> (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.</li> + <li><code>em</code>s: 1 <code>em</code>, 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 <code>em</code> 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 <code>em</code> çok yardımcı olacaktır.</li> + <li><code>rem</code>s: <code>rem</code> hedeflediği öğenin bir üst öğesindeki değeri değilde belgenin kök öğesindeki — {{htmlelement("html")}} — değeri baz almanın dışında aynı <code>em</code> 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 — <code>rem</code> Internet Explorer 8 ve alt sürümlerinde desteklenmez.</li> +</ul> + +<p><code>font-size</code> nitelik değeri, ilgili öğenin ebeveyninden miras olarak alınır ve tarayıcılar arasında varsayılan {{htmlelement("html")}} kök öğesinin <code>font-size</code> 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 öğelerin<code>font-size</code> 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 <code>font-size</code> nitelik değeri 2em boyutundadır, bu nedenle piksel boyutu 32px olacaktır.</p> + +<p>İç 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 <code>1.5em</code> olarak ayarladınız buda normal şartlarda <code>24px</code> olarak hesaplanacaktır ve <code><article></code> öğesinin içerisindeki paragrafların yazı tipi boyutunuda <code>20px</code> olmasını istiyorsunuz. Bu durumda hangi <code>em</code> değerini kullanırdınız?</p> + +<pre class="brush: html notranslate"><!-- 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></pre> + +<p>Yukarıdaki hesaplama adımlarının ilkinde 16*1,5 işlemiyle <code><article></code> öğemizin yazı tipi boyutu <code>24px</code> olarak hesaplanır, paragraflarımızda <code>font-size</code> nitelik değerini hesaplamak için baz alacağı değeri, ebeveyni olan <code><article></code> 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. <code>rem</code> işleri bira daha basit tutmak için kullanışlı olabilir.</p> + +<h4 id="Basit_bir_boyutlandırma_örneği">Basit bir boyutlandırma örneği</h4> + +<p>Metinlerimizi boyutlandırıken, sayfamızdaki her öğenin atası olan {{htmlelement("html")}} kök öğemizin <code>font-size</code> nitelik değerini <code>10px</code> olarak ayarlamak daha sonraki boyutlandırma hesaplamalarımız için iyi bir yaklaşım olacaktır — bu şekilde <code>rem</code> niteliklerimiz varsayılan <code>16px</code> değeri yerine <code>10px</code> değerini baz alacaklardır. Sayfamızdaki öğeler için <code>font-size</code> nitelik tanımlamalarımızı belli bir alanda listelemek de iyi bir fikirdir, böylece bulunmaları kolay olacaktır.</p> + +<p>Yeni yakşımımızla sayfamızın sonucu şu şekilde olacaktır:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> + +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> + +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi + temizlemek için geri çekildi. Pek çok şişko sokak faresi, + bu harika makinanın güçlü dişleri arasında kendi ölümüyle + karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin + anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Basit_bir_boyutlandırma_örneği', '100%', 260) }}</p> + +<h3 id="Yazı_tipi_stili_yazı_tipi_kalınlığı_metnin_BÜYÜKküçük_dönüşümü_ve_metnin_dekorasyonusüslemesi">Yazı tipi stili, yazı tipi kalınlığı, metnin BÜYÜK/küçük dönüşümü ve metnin dekorasyonu/süslemesi</h3> + +<p>CSS, metnin görsel kalınlığı/vurgusunu değiştirmek için dört ortak özellik sağlar:</p> + +<ul> + <li>{{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 <strong>web yazı tipinizin</strong> sadece italik sürümü vardır): + + <ul> + <li><code>normal</code>: Metni normal yazı tipine ayarlar (mevcut italikleri kapatır.)</li> + <li><code>italic</code>: Metni, varsa yazı tipinin <em>italik</em> sürümünü kullanacak şekilde ayarlar; yoksa, bunun yerine <em>italik</em> görünüm simüle/benzetim edilecektir.</li> + <li><code>oblique</code>: Metni, normal yazı tipi sürümünün <em>italik</em> olarak görünmesi için simüle/benzetim edilerek görüntülenmesini sağlar.</li> + </ul> + </li> + <li>{{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: + <ul> + <li><code>normal</code>, <code>bold</code>: Yazı tipi genişliğini normal and <strong>kalın</strong> olarak ayarlar.</li> + <li><code>lighter</code>, <code>bolder</code>: Geçerli öğenin kalınlığını, ebeveynin kalınlığından bir adım daha ince ve daha kalın olacak şekilde ayarlar.</li> + <li><code>100</code>–<code>900</code>: yukarıdakilerden daha hassas kontol sağlayan sayısal kalınlık değerleri.</li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: Metninizin harf dönüşümlerini kontrol etmek için kullanılır. Alabileceği değerler: + <ul> + <li><code>none</code>: Herhangi bir dönüşümü engeller.</li> + <li><code>uppercase</code>: Tüm metni <em>BÜYÜK HARFLERE</em> dönüştürür.</li> + <li><code>lowercase</code>: tüm metni <em>küçük harflere</em> dönüştürür.</li> + <li><code>capitalize</code>: Tüm metninizdeki kelimelerin <em>İlk Harflerini Büyük Olacak Şekilde</em> dönüştürür.</li> + <li><code>full-width</code>: Metninizdeki tüm glifleri, tek aralıklı karakterler şeklinde <span style="text-transform: full-width;">sabit genişlikteki bir kutu içine yazılacak</span> şekilde dönüştürür. Örn. latin karakterlerinin Asya dil glifleriyle (Çince, Japonca, Korece gibi) hizalanmasına izin verir.</li> + <li><code>full-size-kana</code>: Ruby karakterlerinde (Çince, Japonca, Korece gibi) kullanılan küçük yazı tipi boyutlarındaki okunabilirlilik sorunlarını telefai etmek için küçük <em>kana</em> karakterlerini tam boyutlu <em>KANA'ya</em> dönüştürmek için kullanılır.<br> + ぁぃぅぇぉゕゖっゃゅょゎ -> <span style="text-transform: full-size-kana;">ぁぃぅぇぉゕゖっゃゅょゎ</span></li> + </ul> + </li> + <li>{{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: + <ul> + <li><code>none</code>: Mevcut olan tüm metin süslemelerini kaldırır.</li> + <li><code>underline</code>: <u>Metnin altını çizer</u>.</li> + <li><code>overline</code>: <span style="text-decoration: overline;">Metnin üzerine bir çizgi çizer.</span></li> + <li><code>line-through</code>: <s>Metnin üstüne üst çizgi</s> çizer.</li> + </ul> + {{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. <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. 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 <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li> +</ul> + +<p>Örneğimize bu niteliklerden birkaçını ekleyelim:</p> + +<p>Görüntünün yeni çıktısı şu şekildedir:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> +</div> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>{{ EmbedLiveSample('Yazı_tipi_stili_yazı_tipi_kalınlığı_metnin_BÜYÜKküçük_dönüşümü_ve_metnin_dekorasyonusüslemesi', '100%', 260) }}</p> + +<h3 id="Metnin_alt_gölgeleri">Metnin alt gölgeleri</h3> + +<p>{{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.</p> + +<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> + +<p>Dört özellik aşağıdaki gibidir:</p> + +<ol> + <li> + <p>Gölgenin metninize olan yatay uzaklığını belirtir — CSS <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve ölçü birimlerinin</a> çoğunu alabilir, ancak en yaygın olarak kullanacağımız <code>px</code> 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.</p> + </li> + <li> + <p>Gölgenin meninize olan dikey uzaklığını belirtir — CSS <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve ölçü birimlerinin</a> çoğunu alabilir, ancak en yaygın olarak kullanacağımız <code>px</code> 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.</p> + </li> + <li> + <p>Bulanıklık yarıçapını tanımlar, gölgenin arka plana geçişini yumuşatmak için kullanırlır — CSS <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve ölçü birimlerinin</a> ç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.</p> + </li> + <li> + <p>Gölgenin temel rengi tanımlanır. Herhangi bir <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Colors">CSS renk değerini</a> alabilir, gölgenin rengi belirtilmez ise geçerli olan renk kullanılır — yani gölgenin rengi öğenin <code>color</code> niteliğinden alınır.</p> + </li> +</ol> + +<h4 id="Birden_çok_gölge">Birden çok gölge</h4> + +<p>Virgülle ayrılmış birden çok gölge değeri ekleyerek aynı metne birden çok gölge uygulayabilirisiniz, örn.</p> + +<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red, + 2px 2px 1px green;</pre> + +<p>Bunu {{htmlelement("h1")}} öğemizin içeriği olan 'Tommy the cat' örneğimize uygularsak, şu sonucu görürdük:</p> + +<div class="hidden"> +<h5 id="Hidden_example1">Hidden example1</h5> + +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; + text-transform: capitalize; + text-shadow: 1px 1px 1px red, + 2px 2px 1px green; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}</p> + +<div class="note"> +<p><strong>Not</strong>: <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">CSS ile metinlere ay ışığı gölgelendirmesi</a> dersinde, <code>text-shadow</code> ile ilgili daha ilginç kullanım örnekleri görebilirsiniz.</p> +</div> + +<h2 id="Metin_düzeni">Metin düzeni</h2> + +<p>Temel yazı tipi özellikleriyle birlikte metin düzenini etilemek için kullanacağımız özelliklere bir göz atalım.</p> + +<h3 id="Metin_hizalama">Metin hizalama</h3> + +<p>{{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:</p> + +<ul> + <li><code>left</code>: Metni içinde bulunduğu kutunun soluna yaslar</li> + <li><code>right</code>: Metni içinde bulunduğu kutunun sağına yaslar</li> + <li><code>center</code>: Metni içinde bulunduğu kutuya ortalar</li> + <li><code>justify</code>: 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.</li> +</ul> + +<p>{{htmlelement("h1")}} öğemize <code>text-align: center;</code> bildirimini uyguladığımak istediğimde görüntü şu şekilde değişir:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; + text-transform: capitalize; + text-shadow: 1px 1px 1px red, + 2px 2px 1px green; + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Metin_düzeni', '100%', 260) }}</p> + +<h3 id="Satır_yüksekliği">Satır yüksekliği</h3> + +<p>{{cssxref("line-height")}} niteliği metnin her satırının yüksekliğini ayarlar — bu çoğu <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve boyut birimini</a> 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ı:</p> + +<pre class="brush: css notranslate">line-height: 1.6;</pre> + +<p>Bunu örneğimizdeki {{htmlelement("p")}} öğemize uyguladığımızda şu sonucu verir:</p> + +<div class="hidden"> +<h5 id="Hidden_example2">Hidden example2</h5> + +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; + text-transform: capitalize; + text-shadow: 1px 1px 1px red, + 2px 2px 1px green; + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.6; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}</p> + +<h3 id="Harf_ve_kelime_aralığı">Harf ve kelime aralığı</h3> + +<p>{{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 <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve boyut birimlerini</a> alabilir.</p> + +<p>Örnek olarak, örneğimizdeki her bir {{htmlelement("p")}} öğesinin ilk satırına biraz kelime ve harf aralığı uygulayabiliriz:</p> + +<pre class="brush: css notranslate">p::first-line { + letter-spacing: 4px; + word-spacing: 4px; +}</pre> + +<p>Örneğimize ekleyip soncunun nasıl göründüğüne bir bakalım:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; + text-transform: capitalize; + text-shadow: 1px 1px 1px red, + 2px 2px 1px green; + text-align: center; + letter-spacing: 2px; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 4px; + word-spacing: 4px; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.6; + letter-spacing: 1px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}</p> + +<h3 id="Bakmaya_değer_diğer_nitelikler">Bakmaya değer diğer nitelikler</h3> + +<p>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.</p> + +<p>Yazı tipi stilleri:</p> + +<ul> + <li>{{cssxref("font-variant")}}: Küçük harfleri, küçük harf yüksekliğinde büyük harflere dönüştürür.</li> + <li>{{cssxref("font-kerning")}}: Yazı tipinin karakter aralığını açık/kapatır.</li> + <li>{{cssxref("font-feature-settings")}}: Çeşitli <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> yazı tipi özelliklerini açık/kapatır.</li> + <li>{{cssxref("font-variant-alternates")}}: Yazı tipinin alternatif gliflerinin kullanımını kontrol eder.</li> + <li>{{cssxref("font-variant-caps")}}: Alternatif büyük harf gliflerinin kullanımını kontrol eder.</li> + <li>{{cssxref("font-variant-east-asian")}}: Japonca ve Çince gibi Doğu Asya alfabeleri için alternatif gliflerin kullanımını kontrol eder.</li> + <li>{{cssxref("font-variant-ligatures")}}: Metindeki bitişik harflerin görünümünü kontrol eder.</li> + <li>{{cssxref("font-variant-numeric")}}: Sayılar, kesirler ve sıra işaretçileri için alternatif gliflerin kullanımını kontrol eder.</li> + <li>{{cssxref("font-variant-position")}}: üst simge veya alt simge olarak konumlandırılmış daha küçük boyutlardaki alternatif gliflerin kullanımını kontrol eder.</li> + <li>{{cssxref("font-size-adjust")}}: Fontun görsel boyutunu gerçek font boyutundan bağımsız olarak ayarlar.</li> + <li>{{cssxref("font-stretch")}}: Belirli bir yazı tiğinin olası alternatif uzatılmış versiyonları arasında geçiş yapmamızı sağlar.</li> + <li>{{cssxref("text-underline-position")}}: <code>text-decoration-line</code> niteliğinin <code>underline</code> değeriyle ayarlanan alt çizginin konumunu belirler.</li> + <li>{{cssxref("text-rendering")}}: Metin görüntülenmek için işlenme aşamısının iyileştirilmesi için kullanılır.</li> +</ul> + +<p>Metin düzeni stilleri:</p> + +<ul> + <li>{{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.</li> + <li>{{cssxref("text-overflow")}}: Taşan içeriğin ne şekilde ele alınacağını belirler.</li> + <li>{{cssxref("white-space")}}: Öğenin içerisindeki boşlukların ve satır sonlarının nasıl işleneceğini tanımlar.</li> + <li>{{cssxref("word-break")}}: Sözcüklerin satıra bölünüp bölünmeyeceğini tanımlar.</li> + <li>{{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.)</li> + <li>{{cssxref("hyphens")}}: Desteklenen diller için tirelemeye(kesme işareti) izin verir.</li> + <li>{{cssxref("line-break")}}: Asya dilleri için satır kırmayı gevşetin ve güçlendirin.</li> + <li>{{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.</li> + <li>{{cssxref("text-orientation")}}: Bir satırdaki metnin yönünü tanımlayın.</li> + <li>{{cssxref("overflow-wrap")}}:Taşmayı önlemek için tarayıcının kelimeler içindeki satırları kesip kesmeyeceğini belirler..</li> + <li>{{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.</li> +</ul> + +<h2 id="Yazı_tipi_kısa_tanımları">Yazı tipi kısa tanımları</h2> + +<p>{{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")}}.</p> + +<p>Tüm bu nitelikler arasında sadece <code>font-size</code> ve <code>font-family</code> kullanılırken <code>font</code> kısa tanımında belirtilmesi gereken bir kullanım vardır.</p> + +<p>{{cssxref("font-size")}} ve {{cssxref("line-height")}} niteliklerinin arasına eğik çizgi konulmalıdır.</p> + +<p>Kullanım örneği:</p> + +<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="Aktif_öğrenim_metin_stilini_değiştirin">Aktif öğrenim: metin stilini değiştirin</h2> + +<p>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.</p> + +<p>Bir hata yaparsanız, her zaman <em>Sıfırla</em> düşmesini kullanarak baştan başlayabilirsiniz.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Kod Girişi</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> +<p>Denemeniz için bazı örnek metinler</p> + </textarea> + + <h2>CSS Kodu Girişi</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> +p { + +} +</textarea> + + <h2>Çıktı</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Sıfırla" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">const htmlInput = document.querySelector(".html-input"); +const cssInput = document.querySelector(".css-input"); +const reset = document.getElementById("reset"); +let htmlCode = htmlInput.value; +let cssCode = cssInput.value; +const output = document.querySelector(".output"); + +const styleElem = document.createElement('style'); +const headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Becerilerinizi_test_edin!">Becerilerinizi test edin!</h2> + +<p>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. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a>.</p> + +<p>Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.</p> + +<h2 id="Özet">Özet</h2> + +<p>Bu derste metinle oynamaktan keyif aldığınızı umuyoruz! Sonraki ders size HTML listlerinin stilini belirleme konusunda bilmeniz gereken her şeyi açıklayacaktır.</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Styling lists</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Styling links</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web fonts</a></li> + <li><a href="/tr/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li> +</ul> diff --git a/files/tr/learn/css/styling_text/index.html b/files/tr/learn/css/styling_text/index.html new file mode 100644 index 0000000000..6e7c8c3500 --- /dev/null +++ b/files/tr/learn/css/styling_text/index.html @@ -0,0 +1,83 @@ +--- +title: Metni stilini belirleme +slug: Öğren/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 +--- +<div>{{LearnSidebar}}</div> + +<p>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.</p> + +<div class="in-page-callout webdev"> +<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun"><span class="highlight-span">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</span></h3> + +<p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p> + +<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p> +</div> + +<h2 id="Ön_Koşullar">Ön Koşullar</h2> + +<p>Bu üniteye başlamadan önce, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e giriş</a> ünitesinde ele aldığımız temel HTML bilgisine ve <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS'e giriş</a> ünitesinde ele aldığımız CSS'in temel ilkelerini biliyor olmanız gerekmektedir.</p> + +<div class="note"> +<p><strong>Not</strong>: 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, <a href="https://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> veya <a href="https://glitch.com/">Glitch</a> ortamlarını çevrimiçi kullanabilirsiniz.</p> +</div> + +<h2 id="Rehber">Rehber</h2> + +<p>Bu modül, HTML metin içeriğini şekillendirmenin altındaki tüm temelleri öğretecek dersleri içerir.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi stili</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Listeleri biçimlendirme</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Bağlantıları biçimlendirme</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Değerlendirmeler">Değerlendirmeler</h2> + +<p>Aşağıdaki değerlendirme, yukarıdaki rehberlerde anlatılan metin şekillendirme tekniklerini ne düzeyde anladığınızı test edecektir.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Bir okulun ana sayfasındaki metinleri şekillendirmek</a></dt> + <dd>Bu değerlendirme, bir okulun ana sayfasındaki metinlerin stilini belirleme kabileyitini ve metnin şekillendirme konusundaki yaklaşımını test edecektir.</dd> +</dl> + +<div class="jfk-bubble gtx-bubble"> +<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> + +<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 302px;"> +<div class="jfk-bubble-arrowimplbefore"></div> + +<div class="jfk-bubble-arrowimplafter"></div> +</div> +</div> diff --git a/files/tr/learn/css/styling_text/styling_links/index.html b/files/tr/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..3cf6997aa5 --- /dev/null +++ b/files/tr/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,453 @@ +--- +title: Bağlantıları şekillendirmek +slug: Öğren/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Bağlantıları</a> 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanma, HTML temelleri(<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> bölümünü inceleyin), CSS temelleri (<a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a>), <a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">CSS temel metin ve yazı tipi biçimi</a>.</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<h2 id="Bağlantılara_bir_göz_atalım">Bağlantılara bir göz atalım</h2> + +<p>HTML'mizde <a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">bağlantı oluşturma</a> 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.</p> + +<h3 id="Bağlantı_durumları">Bağlantı durumları</h3> + +<p>Anlaşılması gereken ilk konu, bağlantı durumları kavramıdır — bağlantıların farklı durumlarının, farklı <a href="/tr/Öğren/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">sözde sınıflar</a> ile kontrol edilebilmesidir:</p> + +<ul> + <li><strong>Bağlantı</strong>: {{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).</li> + <li><strong>Ziyaret edilmiş</strong>: {{cssxref(":visited")}} sözde sınıfı kullanılarak hedeflenilebilen, tarayıcıda daha önceden ziyaret edilmiş bağlantılardır.</li> + <li><strong>Üzerinde</strong>: {{cssxref(":hover")}} sözde sınıfıyla hedeflenebilen, farenin imlecinin üzerinde durduğu bağlantıdır.</li> + <li><strong>Odak</strong>: {{cssxref(":focus")}} sözde sınıfıyla hedeflenebilen, odaklanılmış bağlantılardır (örn, klavye kullanıcısı tarafından <kbd>Tab</kbd> tuşu veya benzeri tuşlarla odaklanılmış bağlantıdır.</li> + <li><strong>Aktif</strong>: {{cssxref(":active")}} sözde sınıfıyla hedeflenebilen, etkinleştirilmiş (örn üzerine tıklanılmış) bir bağlantıdır.</li> +</ul> + +<h3 id="Varsayılan_stiller">Varsayılan stiller</h3> + +<p>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> + +<pre class="brush: html notranslate"><p><a href="#">Basit bir bağlantı</a></p> +</pre> + +<pre class="brush: css notranslate">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('Varsayılan_stiller', '100%', 120) }}</p> + +<div class="note"> +<p><strong>Not</strong>: 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ı.</p> +</div> + +<p>Varsayılan stilleri keşfederken birkaç şeyi fark edeceksiniz:</p> + +<ul> + <li>Bağlantıların altı çizilmiştir.</li> + <li>Ziyaret edilmeyen bağlantılar mavidir.</li> + <li>Ziyaret edilen bağlantılar mordur.</li> + <li>Bir bağlantının üzerine gelindiğinde fare imlecinin simgesi küçük bir el simgesine dönüşür.</li> + <li>Odaklanmış bağlantıların etrafında bir ana hat vardır.</li> + <li>Aktif bağlantılar kırmızıdır(Tıklama esnasında farenin düşmesini basılı tutmayı deneyin).</li> +</ul> + +<p>İ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:</p> + +<ul> + <li>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.</li> + <li>Üzerine gelindiklerinde/odaklanıldıklarında bir şekilde etkinleştirildiklerinde biraz farklı bir şekile girmelerini sağlayın. Sayfanıza hem hareket katmış olursunuz.</li> +</ul> + +<p>Varsayılan stiller, aşağıdaki CSS özellikleri kullanılarak kapatılabilir/değiştirilebilir:</p> + +<ul> + <li>{{cssxref("color")}} metin rengi için.</li> + <li>{{cssxref("cursor")}} fare işaretçisi stili — çok iyi bir nedeniniz yoksa bunu kapatmamalısınız.</li> + <li>{{cssxref("outline")}} Ana hat, kullanışlı bir erişilebilirlik yardımcısıdır, bu yüzden kapatmadan önce dikkatlice düşünün.</li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: 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!</p> +</div> + +<h3 id="Bağlantıların_stilini_belirleme">Bağlantıların stilini belirleme</h3> + +<p>Şimdi varsayılan durumlara biraz ayrıntılı olarak baktık, tipik bir bağlantı stilleri kümesine bakalım.</p> + +<p>Başlangıç olarak boş kural kümelerimizi yazacağız:</p> + +<pre class="brush: css notranslate">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>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. "<strong>L</strong>a<strong>V</strong> <strong>F</strong>ena <strong>HA</strong>lde sıcak" kelimesini anımsatıcı olarak kullanabilirsiniz.</p> + +<p>Şimdi bunu doğru bir şekilde şekillendirmek için biraz daha bilgi ekleyelim:</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>Ayrıca, yazdığımız CSS'i uygulamak için örnek HTML kodunu aşağıda sağlayacağım:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>İkisini bir araya getirmek bize şu sonucu verir:</p> + +<p>{{ EmbedLiveSample('Bağlantıların_stilini_belirleme', '100%', 150) }}</p> + +<p>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:</p> + +<ul> + <li>İlk iki kural burada tartışmak için önemli değil.</li> + <li>Üçüncü kural <code>a</code>, 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.</li> + <li>Daha sonra, ziyaret edilmeyen ve ziyaret edilen bağlantılarda birkaç renk varyasyonu ayarlamak için <code>a:link</code> ve <code>a:visited</code> sözde sınıf seçicilerini kullanarak her ikisi durum için de farklı ayarlamalar yapabiliriz.</li> + <li>Sonraki iki kural ile <code>a:focus</code> ve <code>a:hover</code> 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: + <ul> + <li>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.</li> + <li>{{cssxref("border-bottom")}} niteliğine <code>1px solid</code> 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.</li> + </ul> + </li> + <li>Son olarak <code>a:active</code> 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!</li> +</ul> + +<h3 id="Aktif_öğrenme_Kendi_bağlantılarınızın_stilini_belirleyin">Aktif öğrenme: Kendi bağlantılarınızın stilini belirleyin</h3> + +<p>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.</p> + +<p>Bir hata yaparsanız, her zaman <em>Sıfırla</em> düşmesini kullanarak <em>sıfırlayabilirsiniz.</em> Zorlandığınızda yukarıda gösterdiğimiz örneği eklemek için <em>Çözümü göster</em> düşmesini kullanın.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p><a href="#">Mozilla + Firefox</a>, <a href="#">Google Chrome</a>, ve +<a href="#">Microsoft Edge</a> gibi tarayıcılar mevcuttur.</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Sıfırla" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Çözümü göster" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Bağlantılara_simgeler_eklemek">Bağlantılara simgeler eklemek</h2> + +<p>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 — <a href="https://icons8.com/web-app/741/external-link">Örnek olabilecek simgeler için icons8.com</a>.</p> + +<p>Bize istediğimiz etkiyi verecek bazı HTML ve CSS'ese bakalım. İlk olarak, stil vermek için bazı basit HTML'ler:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Ardından CSS:</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>{{ EmbedLiveSample('Bağlantılara_simgeler_eklemek', '100%', 150) }}</p> + +<p>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 <a href="/tr/Öğren/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">liste öğelerinde özel madde işaretlerini</a> 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, <code>no-repeat</code> 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.</p> + +<p>{{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?</p> + +<p>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.</p> + +<p>Son bir söz, sadece harici(başka sitelere olan) bağlantıları nasıl seçtik? <a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML bağlantıları</a> 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 <a href="/tr/Öğren/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">nitelik şeciciyle</a>(<code>a[href*="http"])</code> {{htmlattrxref("href","a")}} öğemizdeki "http" ile başlayan bağlantıları seçebiliriz.</p> + +<p>İşte bu kadar — yukarıdaki aktif öğrenme bölümünü tekrar gözden geçirmeyi ve bu yeni tekniği denemeyi deneyin!</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: <code>href</code> 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 <code><iframe></code> içeriğindeki canlı örnekte farklı bir siteye gideceğiniz ve örneği kaybetmiş olacağınızdandır.</p> +</div> + +<div class="note"> +<p><strong>Not</strong>: Henüz <a href="/tr/docs/Öğren/CSS/Styling_boxes">arka planlar</a> ve <a href="/tr/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">duyarlı web tasarımına</a> aşina değilseniz endişelenmeyin; bu konular farklı yerlerde açıklanmıştır.</p> +</div> + +<h2 id="Bağlantıları_buton_olarak_biçimlendirmek">Bağlantıları buton olarak biçimlendirmek</h2> + +<p>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.</p> + +<p>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.</p> + +<p>İlk olarak, biraz HTML:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>ve birazda CSS:</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>Bu bize şu sonucu verir:</p> + +<p>{{ EmbedLiveSample('Bağlantıları_buton_olarak_biçimlendirmek', '100%', 100) }}</p> + +<p>En ilginç kısımlara odaklanarak burada neler olduğunu açıklayalım:</p> + +<ul> + <li>İ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.</li> + <li>{{htmlelement("li")}} öğeleri normal davranışlarında blok öğeler olarak davranırlar(göz atmak için <a href="/tr/Öğren/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS kutu tipleri</a>'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.</li> + <li>Dördüncü kuralımız, {htmlelement("a")}} öğemizi biçimlendiren en karmaşık kuralımızdır. Hadi adım adım inceleyelim + <ul> + <li>Önceki örneğimizdeki gibi varsayılan {{cssxref("text-decoration")}} ve {{cssxref("outline")}} niteliklerimizi kapatıyoruz ki görünüşü bozmasınlar</li> + <li>Daha sonra {{cssxref("display")}} niteliğimize <code>inline-block</code> 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.</li> + <li>Ş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 <code><a></code> öğemizin sağdaki boşluğunu sıfırladığımız için butonlarımız <code><ul></code> öğemizin içerisine tam olarak oturacaktır.</li> + <li>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.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: 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 <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">satır içi blok öğeleri arasındaki boşluklarla savaşma </a>bölümünde bulabilirsiniz.</p> +</div> + +<h2 id="Becerilerinizi_tes_edin!">Becerilerinizi tes edin!</h2> + +<p>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. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfası tasarımı</a>.</p> + +<p>Bu değerlendirme, bu dersin tartışılan tüm bilgilerini test eder, bu nedenle bir sonraki makaleye geçmeden önce okumak isteyebilirsiniz.</p> + +<h2 id="Özet">Özet</h2> + +<p>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")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> + <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> +</ul> diff --git a/files/tr/learn/css/styling_text/styling_lists/index.html b/files/tr/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..b9690f6d23 --- /dev/null +++ b/files/tr/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,436 @@ +--- +title: Listeleri Şekillendirmek +slug: Öğren/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p><a href="/tr/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Listeler</a> ç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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Öğren/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Öğren/CSS/Ilk_adimlar" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Listeleri şekillendirmeyle ilgili en iyi uygulamalara ve özelliklere aşîna olmak.</td> + </tr> + </tbody> +</table> + +<h2 id="Basit_bir_liste_örneği">Basit bir liste örneği</h2> + +<p>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. <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">Github üzerinde</a> biçimlendirilmemiş bir örneğimiz mevcuttur(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">kaynak koduna</a> bakabilirsiniz).</p> + +<p>Liste örneğimizin HTML'si şu şekildedir.</p> + +<pre class="brush: html notranslate"><h2>Sırasız alışveriş listesi</h2> + +<p><span class="tlid-translation translation" lang="tr"><span title="">Referans için paragraf, referans için paragraf, referans için paragraf,</span> +<span title="">referans için paragraf, referans için paragraf, referans için paragraf.</span></span></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><span class="tlid-translation translation" lang="tr"><span title="">Referans için paragraf, referans için paragraf, referans için paragraf,</span> +<span title="">referans için paragraf, referans için paragraf, referans için paragraf.</span></span></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><span class="tlid-translation translation" lang="tr"><span title="">Referans için paragraf, referans için paragraf, referans için paragraf,</span> +<span title="">referans için paragraf, referans için paragraf, referans için paragraf.</span></span></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></pre> + +<p>Şimdi canlı örneğe giderseniz ve <a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">tarayıcı geliştirme araçlarını</a> kullanarak liste öğelerini araştırırsanız, birkaç stil varsayılanını fark edeceksiniz:</p> + +<ul> + <li>{{htmlelement("ul")}} ve {{htmlelement("ol")}} öğeleri için üst ve alttan <code>16px</code>(<code>1em</code>) {{cssxref("margin")}} için ve soldan <code>40px</code>(<code>2,5em</code>) {{cssxref("padding-left")}} için varsayılan bir değere sahip olduklarını;</li> + <li>Liste {{htmlelement("li")}} öğesinin varsayılan dolgu ve kenar boşluğu değerlerinin olmadığını;</li> + <li>{{htmlelement("dl")}} öğesinin alt ve üstten <code>16px</code> {{cssxref("margin")}} değerine sahip olduğunu fakat herhangi bir dolgu değerinin bulunmadığını;</li> + <li>Liste {{htmlelement("dt")}} öğesinin varsayılan dolgu ve kenar boşluğu değerinin olmadığını;</li> + <li>liste {{htmlelement("dd")}} öğesinin {{cssxref("margin-left")}} niteliğinin <code>40px</code> (<code>2.5em</code>.) değerine sahip olduğunu görürsünüz.</li> + <li>{{htmlelement("p")}} öğesini size referans olması için dahil ettik. Bu öğemiz de, farklı liste türleriyle aynı üst ve alt {{cssxref("margin")}}(<code>16px (1em)</code>) değerine sahiptir.</li> +</ul> + +<h2 id="Liste_aralıklarını_kontrol_etme">Liste aralıklarını kontrol etme</h2> + +<p>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 <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">finished styled example</a> on Github, and <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">find the source code</a> too.).</p> + +<p>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 ( <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">bitmiş örneğimizi</a> Github'da bulabilir ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">kaynak kodlarınıda</a> görebilirsiniz).</p> + +<p>Metin stili ve aralığı için kullanılan CSS aşağıdaki gibidir:</p> + +<pre class="brush: css notranslate">/* 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; +} +</pre> + +<ul> + <li>İlk kural, site genelinde bir yazı tipi ve 10 piksellik yazı tipi boyutu belirler. Bunlar sayfadaki her öğe tarafından miras alınır.</li> + <li>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.</li> + <li>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.</li> + <li>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.<span id="cke_bm_126E" style="display: none;"> </span></li> +</ul> + +<h2 id="Listeye_özgü_şekiller">Listeye özgü şekiller</h2> + +<p>Şimdiye kadar listeler için genel boşluk tekniklerine baktık, bundan sonra da listeye özgü bazı özellikleri inceleyelim.</p> + +<p>İlk başta bilmeniz gereken, {{htmlelement("ul")}} ve {{htmlelement("ol")}} öğelerinde ayarlanabilen üç nitelik vardır.</p> + +<ul> + <li>{{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ı.</li> + <li>{{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.</li> + <li>{{cssxref("list-style-image")}}: Madde işareti için basit bir kare veya daire yerine özel bir görüntü kullanmamızı sağlar</li> +</ul> + +<h3 id="Madde_işareti_şekilleri">Madde işareti şekilleri</h3> + +<p>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:</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; +}</pre> + +<p>Kuralını oluşturduğumuzda bize aşağıdaki gibi bir sonuç verir.:</p> + +<p><img alt="Madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı liste." src="https://mdn.mozillademos.org/files/17434/list-style-type.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 437px;"></p> + +<p>{{cssxref("list-style-type")}} referans sayfasına bakarak daha fazla seçenek buluabilirsiniz.</p> + +<h3 id="Madde_işareti_konumu">Madde işareti konumu</h3> + +<p>{{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 <code>outside</code> ile yukarıda görüldüğü gibi madde işaretlerinin liste öğelerinin dışında kalmasına neden olur.</p> + +<p>Değeri <code>inside</code> olarak ayarlarsak, madde işaretleri öğe içerik alanı içerisine oturur.</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı bir liste." src="https://mdn.mozillademos.org/files/17435/list-style-position-tr.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 431px;"></p> + +<h3 id="Özel_bir_madde_işareti_görüntüsü_kullanma">Özel bir madde işareti görüntüsü kullanma</h3> + +<p>{{cssxref("list-style-image")}} niteliği madde işaretlerinde özel bir resim kullanılmasını sağlar. Sözdizimi oldukça basittir:</p> + +<pre class="brush: css notranslate">ul { + list-style-image: url(star.svg); +}</pre> + +<p>Ancak bu nitelik, madde işareti konumunu, boyutunu vb. gibi özellikleri kontrol etme açısından biraz sınırlıdır. <a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve sınırlar</a> dersinde {{cssxref("background")}} nitelik ailesinde öğrendiklerinizi kullanmanız daha iyi olacaktır. Şimdilik tanıyoruz!</p> + +<p>Bitmiş örneğimizde, sıralanmamış listeyi bu şekilde biçimlendirdik(yukarıda daha anlattıklarımızın üstüne):</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>Burada aşağıdakileri yaptık:</p> + +<ul> + <li>{{cssxref("padding-left")}} niteliğimizle, {{htmlelement("ul")}} öğemizin <code>40px</code> olan varsayılan kenar boşluğunu <code>20px</code> 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(<code>li</code>) kenar boşluğu vermeseydik, liste öğelerinin arka planı içerisinde görüntülediğimiz resmimizle üst üste gelmesine neden olurdu.</li> + <li>{{cssxref("list-style-type")}} niteliğimize <code>none</code> 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.</li> + <li>Sıralanmamış listenin herbir liste öğesine, resmi madde işareti olarak ekledik. İlgili nitelikler aşağıdaki gibidir: + <ul> + <li>{{cssxref("background-image")}}: Bu, madde işareti olarak kullanmak istediğimiz resmin dosyasının yolunu belirtiriz.</li> + <li>{{cssxref("background-position")}}: Bu, seçilen öğenin arka planında görüntünün nerede görüneceğini tanımlar — <code>0 0;</code> durumunda, her madde işareti tanımlandığı öğenin sol üst köşesinde görüneceği anlamına gelir.</li> + <li>{{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 <code>1.6rem(16px)</code> değeri kullanıyoruz. Madde işareti ile liste öğesinin arasında ki (<code>20px-16px</code>) 4px boşluk çok iyi duruyor.</li> + <li>{{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 <code>no-repeat</code> değerini tanımlıyoruz.</li> + </ul> + </li> +</ul> + +<p>Bu bize şu sonucu verir:</p> + +<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/17436/list-style-image-tr.png" style="border-style: solid; border-width: 1px; display: block; height: 110px; margin: 0px auto; width: 170px;"></p> + +<h3 id="Liste_şekillendirebilen_kısa_tanım">Liste şekillendirebilen kısa tanım</h3> + +<p>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:</p> + +<pre class="brush: css notranslate">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>Bununla değiştirilebilir:</p> + +<pre class="brush: css notranslate">ul { + list-style: square url(example.png) inside; +}</pre> + +<p>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 <code>disc</code>, <code>none</code> ve <code>outside</code> vbg.) Birinci ve ikincideki <code>type</code> ve <code>image</code> 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.</p> + +<h2 id="Liste_sayımını_kontrol_etme">Liste sayımını kontrol etme</h2> + +<p>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.</p> + +<h3 id="başlangıç">başlangıç</h3> + +<p>{{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:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Bize bu çıktıyı verir:</p> + +<p>{{ EmbedLiveSample('başlangıç', '100%', 150) }}</p> + +<h3 id="tersten_numaralandırmak">tersten numaralandırmak</h3> + +<p>{{htmlattrxref("reversed","ol")}} niteliği liste numaralandırma sayılarını ileri doğru değilde, geriye doğru yazılmasını sağlar:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Gives you this output:</p> + +<p>{{ EmbedLiveSample('tersten_numaralandırmak', '100%', 150) }}</p> + +<div class="note"> +<p><strong>Not</strong>: 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, ...</p> +</div> + +<h3 id="değer">değer</h3> + +<div class="hidden"> +<h4 id="degerleme">degerleme</h4> + +<pre class="brush: html notranslate"><ol style="list-style-type: decimal;"> + <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></pre> +</div> + +<p>{{htmlattrxref("value","ol")}} niteliğiyle liste öğelerine belirli bir sayısal değeri tanımlamamıza izin verir:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Gives you this output:</p> + +<p>{{ EmbedLiveSample('degerleme', '100%', 100) }}</p> + +<div class="note"> +<p><strong>Not</strong>: Sayı olmayan, farklı bir maddeleme işareti kullansanız bile, yine de <code>value</code> niteliğindeki değere eş değer bir değer getirilir.</p> +</div> + +<div class="hidden"> +<h5 id="izli1">izli1</h5> + +<pre class="brush: html notranslate"><ol style="list-style-type:lower-alpha;"> + <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></pre> +</div> + +<p>{{ EmbedLiveSample('izli1', '100%', 100) }}</p> + +<h2 id="Aktif_öğrenme_İç_içe_listeyi_şekillendirme">Aktif öğrenme: İç içe listeyi şekillendirme</h2> + +<p>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:</p> + +<ol> + <li>Sırasız listeye kare madde işaretleri verin.</li> + <li>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.</li> + <li>Sıralı listeye daha düşük alfabetik madde işaretleri verin.</li> + <li>Liste örenğiyle istediğiniz kadar oynayabilirsiniz, madde işareti türleri, boşluklar veya bulabileceğiniz başka özellikleri deneyebilirsiniz.</li> +</ol> + +<p>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.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<p>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:</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="Becerilerinizi_test_edin!">Becerilerinizi test edin!</h2> + +<p>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. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a>.</p> + +<p>Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.</p> + +<h2 id="Özet">Özet</h2> + +<p>İ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.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> + <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> +</ul> 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 new file mode 100644 index 0000000000..0d5c95314b --- /dev/null +++ b/files/tr/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,143 @@ +--- +title: Bir okulun ana sayfasını düzenlemek +slug: Öğren/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşul:</th> + <td>Bu değerlendirmeyi denemeden önce, bu ünitedeki tüm derslerin üzerinde çalışmış olmanız gerekir</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>CSS metin stil tekniklerinin anlaşılmasını test etmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Başlangıç_noktası">Başlangıç noktası</h2> + +<p>Bu değerlendirmeyi başlatmak için şunları yapmalısınız:</p> + +<ul> + <li>Alıştırma için gerekli <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> dosyalarını ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">harici bağlantı simgelerini</a> alın.</li> + <li>Yerel bilgisayarınızda bunların bir kopyasını oluşturun.</li> +</ul> + +<p>Alternatif olarak, değerlendirmenizi yapmak için <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ve <a href="https://glitch.com/">Glitch</a> 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 <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">bu URL</a>'yi kullanabilirsiniz. Kullandığınız çevrimiçi düzenleyicinin ayrı bir CSS paneli yoksa, bunu <code><style></code> etiketi ile HTML sayfanıza yerleştirebilirsiniz.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<h2 id="Proje_tanıtımı">Proje tanıtımı</h2> + +<p>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.</p> + +<p>Yazı tipleri:</p> + +<ul> + <li>Ö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.</li> + <li><code>@font-face</code> ile bu iki yazı tipi için uygun bir hizmet kullanın.</li> + <li>Gövde yazı tipinizi tüm sayfaya ve başlıklar için seçtiğiniz yazı tipinide başlıklara uygulayın.</li> +</ul> + +<p>Genel metin stili:</p> + +<ul> + <li>Sayfaya site genelinde <code>font-size: 10px</code> olarak tanımlayın.</li> + <li>Başlıklarınıza ve diğer öğe türlerinize, uygun bir göreli birim kullanarak tanımlanmış uygun yazı tipi boyutları verin.</li> + <li>Gövde metninize <code>line-height</code> niteliği ile uygun bir metin yüksekliği verin.</li> + <li>Üst düzey başlığınızı sayfada ortalayın.</li> + <li>Başlıklarınızı <code>letter-spacing</code> niteliği ile fazla ezilmemeleri için harflerin arasına biraz boşluk verin.</li> + <li>Gövde metninize <code>letter-spacing</code> ve <code>word-spacing</code> nitelikleri ile biraz boşluk verin.</li> + <li>Her başlıktan sonra ilk paragrafa <code><section></code> ile biraz metin girintisi verin, örn. 20px.</li> +</ul> + +<p>Başlantılar:</p> + +<ul> + <li>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.</li> + <li>Varsayılan olarak bağlantıların altı çizili olacak şekilde yapın, ancak üzerine geldiğinizde veya odaklandığınızda alt çizgiler kaybolmalı.</li> + <li>Varsayılan odak çerçevesini sayfadaki TÜM bağlantılardan kaldırın.</li> + <li>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.</li> + <li>Dış bağlantıların yanlarına harici bağlantı simgesinin eklenmesini sağlayın.</li> +</ul> + +<p>Listeler:</p> + +<ul> + <li>Listelerinizin ve liste öğelerinizin aralığının genel sayfasının stiliyle uyumlu olduğundan emin olun. Her liste öğesi <code>line-height</code> 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.</li> + <li>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ış.</li> +</ul> + +<p>Gezinti menüsü:</p> + +<ul> + <li>Sayfa için uygun bir görünüme sahip olacak şekilde gezinme menünüzün stilini belirleyin.</li> +</ul> + +<h2 id="İpuçları_ve_püf_noktaları">İpuçları ve püf noktaları</h2> + +<ul> + <li>Bu alıştırma için HTML'yi herhangi bir şekilde düzenlemenize gerek yoktur.</li> + <li>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.</li> +</ul> + +<h2 id="Örnek">Örnek</h2> + +<p>Aşağıdaki ekran görüntüsüi bitmiş tasarımın nasıl görünebileceğine dair bir örnek göstermektedir:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> + +<h2 id="Değerlendirme_ve_daha_fazlası">Değerlendirme ve daha fazlası</h2> + +<p>Çalışmanızın değerlendirilmesini istiyorsanız veya takılıp kaldıysanız yardım isteyebilirsiniz.</p> + +<ol> + <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyeiciye koyun.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN söyleşi/öğrenme forumu kategorisinde</a> değerlendirme ve/veya yardım isteyen bir yazı gönderin. Gönderi şunları içermelidir: + <ul> + <li>"Okulun ana sayfasını düzenlemek için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> + <li>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.</li> + <li>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.</li> + <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> + </ul> + </li> +</ol> + +<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> + <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> +</ul> diff --git a/files/tr/learn/css/styling_text/web_fonts/index.html b/files/tr/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..cf13b6533a --- /dev/null +++ b/files/tr/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,221 @@ +--- +title: Web Yazı Tipleri +slug: Öğren/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">Ü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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanma, HTML temelleri(<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> bölümünü inceleyin), CSS temelleri (<a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a>), <a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">CSS temel metin ve yazı tipi biçimi</a>.</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Üçüncü taraf bir hizmeti kullanarak veya kendi kodunuzu yazarak bir web sayfasına web yazı tiplerini nasıl uygulayacağınızı öğrenmek</td> + </tr> + </tbody> +</table> + +<h2 id="Yazı_tipi_aileleri_özeti">Yazı tipi aileleri özeti</h2> + +<p><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi stilinde</a> 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> + +<pre class="brush: css notranslate">p { + font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>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 — <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Web uyumlu yazı tipleri</a>. 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.</p> + +<h2 id="Web_yazı_tipleri">Web yazı tipleri</h2> + +<p>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:</p> + +<p>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:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: "myFont"; + src: url("myFont.woff"); +}</pre> + +<p>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:</p> + +<pre class="brush: css notranslate">html { + font-family: "myFont", "Bitstream Vera Serif", serif; +}</pre> + +<p>Sözdizimi bundan biraz daha karmaşık hale geliyor, aşağıda dahafazla ayrıntıya gireceğiz.</p> + +<p>Web yazı tiplerin hakkında akılda tutulması gereken iki önemli nokta vardır:</p> + +<ol> + <li>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.</li> + <li>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.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: Bir teknoloji olarak Web yazı tipleri, sürüm 4'ten beri Internet Explorer'da desteklenmektedir.</p> +</div> + +<p>Web yazı tipi olsun yada olmasın, sayfanızda kullanılan yazı tiplerini araştırmak ve değiştirmek için <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">Firefox yazı tipi düzenleyicisini</a> kullanabilirsiniz. Bu video güzel bir yol sunar:</p> + +<p>{{EmbedYouTube("UazfLa1O94M")}}</p> + +<h2 id="Aktif_öğrenme_Bir_web_yazı_tipi_örneği">Aktif öğrenme: Bir web yazı tipi örneği</h2> + +<p>İ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.</p> + +<p>Kullanmanız için size iki örnek dosya; <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">canlı örneği</a> görebilirsiniz). Bu dosyaları bilgisayarınızda bir dizine kopyalayın. <code>web-font-start.css</code> dosya örneğinin içerisinde temel düzen için bazı CSS'ler bulabilirsiniz.</p> + +<h3 id="Yazı_tipi_bulmak">Yazı tipi bulmak</h3> + +<p>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:</p> + +<ul> + <li>Ü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 <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a>, ve <a href="https://everythingfonts.com/">Everything Fonts</a> sayılabilir.</li> + <li>Ücretli bir yazı tipi dağıtıcısı: Bu, yazı tiplerini <a href="http://www.fonts.com/">fonts.com</a> veya <a href="http://www.myfonts.com/">myfonts.com</a> gibi ücret karşılığında kullanıma sunan siteler sayılabilir. Yazı tiplerini, <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a>, veya <a href="http://www.exljbris.com/">Exljbris</a> gibi doğrudan yazı tipi dökümhanelerinden de satın alabilirsiniz.</li> + <li>Ç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.</li> +</ul> + +<p>Biraz yazı tipi bulalım! <a href="https://www.fontsquirrel.com/">Font Squirrel</a> 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.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<h3 id="Gerekli_kodun_oluşturulması">Gerekli kodun oluşturulması</h3> + +<p>Şimdi gerekli kodu (ve yazı tipi formatlarını) oluşturmanız gerekecek. Her yazı tipi için şu adımları izleyin:</p> + +<ol> + <li>Bunu ticari bir projede ve/veya Web projesinde kullanacaksanız, herhangi bir lisans gereksinimini karşıladığınızdan emin olun.</li> + <li>Fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Web yazı tipi oluşturucuya</a> gidin.</li> + <li>Yazı Tiplerini Yükle düşmesini kullanarak iki yazı tipi dosyanızı web sitesine yükleyin.</li> + <li>"Evet, yüklediğim yazı tipleri yasal olarak web yerleştirmeye uygun" etiketli onay kutusunu işaretleyin.</li> + <li>Kitinizi indirin.</li> +</ol> + +<p>Oluşturucu işlemeyi bitirdikten sonra, indirilecek bir ZIP dosyası almalısınız — HTML ve CSS'nizle aynı dizine kaydedin.</p> + +<h3 id="Kodu_demonuza_uygulamak">Kodu demonuza uygulamak</h3> + +<p>Bu noktada, oluşturduğunuz web yazı tipi kitini açın. Sıkıştırılmamış dizinin içinde üç yararlı öğe göreceksiniz.</p> + +<ul> + <li>Har yazı tipinin çoklu sürümleri:(örn, <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>, 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.</li> + <li>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.</li> + <li><code>stylesheet.css</code> ihtiyaç duyacağınız @font-face kodunu içeren bir dosya.</li> +</ul> + +<p>Bu yazı tiplerini sayfanıza uygulamak için şu adımları izleyin:</p> + +<ol> + <li>Sıkıştırılmış dosyayı klasöre açın, örn <code>fonts</code>.</li> + <li><code>stylesheet.css</code> dosyasını açın ve her iki <code>@font-face</code> kod bloğunu <code>web-font-start.css</code> dosyanıza kopyalayın. Yazı tiplerinin sitenizde kullanmadan önce içe aktarılması gerektiğinden, bunları CSS'nizden önce en üste koymanız gerekir.</li> + <li><code>url()</code> 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 <code>fonts/</code> eklmeyi unutmayın.</li> + <li>Artık bu yazı tiplerini, herhangi bir web uyumlu veya varsayılan sistem yazı tipi gibi yazı tipi yığınlarınızda kullanabilirsiniz. Örn: + <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> + </li> +</ol> + +<p>Ü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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Not</strong>: Bunu çalıştırmakta sorun yaşarsanız, sürümünüzü bitmiş dosyalarımızla karşılaştırmaktan çekinmeyin — <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">bitmiş örneği canlı çalıştırın</a>).</p> +</div> + +<h2 id="Çevrimiçi_bir_yazı_tipi_hizmeti_kullanma">Çevrimiçi bir yazı tipi hizmeti kullanma</h2> + +<p>Çevrimiçi yazı tipi hizmetleri genellikle yazı tiplerini sizin için depolar ve sunar, bu nedenle <code>@font-face</code> 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 <a href="https://fonts.adobe.com/">Adobe Fonts</a> ve <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a> bulunur. Bu hizmetlerin çoğu, test ve demolar için kullanışlı ve ücresiz bir hizmet olan <a href="https://www.google.com/fonts">Google Fonts</a> dışında, abonelik tabanlıdır.</p> + +<p>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 <code>web-font-start.html</code> ve <code>web-font-start.css</code> dosyalarının birer kopyalarını kullanalım.</p> + +<ol> + <li><a href="https://fonts.google.com/">Google Fonts</a>'a gidin.</li> + <li>Sevdiğiniz birkaç yazı tipini seçmek için filtreleri kullanın.</li> + <li>Seçmek istediğiniz yazı tipi ailesine tıklayın.</li> + <li>Yazı tipi ailesindeki yazı tiplerinin listelenecek.</li> + <li>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 <img alt="" style="height: 24px; width: 24px;"> 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.</li> + <li>Daha sonra özel yazı tiplerini HTML'nize uygulamak için CSS'nizde listelenen CSS bildirimlerini uygun şekilde kopyalamanız/yazmanız gerekir.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>:Tamamlanmış bir sürümü <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a> adreslerinde bulabilirsiniz, eğer çalışmanızı bizimkilerle karşılaştırmak isterseniz <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">canlı örneğe bir göz atın</a>.</p> +</div> + +<h2 id="font-face_daha_ayrıntılı_olarak_bakalım">@font-face daha ayrıntılı olarak bakalım</h2> + +<p>Fontsquirrel tarafından olşturulan <code>@font-face</code> kural bildirimini inceleyelim.</p> + +<p>Bloklardan biri şuna benzemektedir:</p> + +<pre class="brush: css notranslate">@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; +}</pre> + +<p>Bu "bulletproof @font-face sözdizimi", <code>@font-face</code> popüler olmaya başladığında Paul Irish tarafından yapılan bir gönderiden sonra (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>) olarak anılır. Ne yaptığını görmek için üzerinden geçelim:</p> + +<ul> + <li><code>font-family</code>: 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.</li> + <li><code>src</code>: Bu satırlar, CSS'inize (<code>url</code> bölümü) aktarılacak yazı tipi dosyalarının yollarını ve her bir yazı tipi dosaysının (<code>format</code> 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.</li> + <li>{{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. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: CSS'nizi basit tutmak için yazı tipi ağırlığını ve yazı tipi stilini tanımlayın</a> ile Roger Johansson ne yapmanız gerektiğini daha ayrıntılı olarak gösteriyor.</li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: 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 <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> makalesinde bundan nasıl yararlanılacağına dair yararlı fikirler bulacaksınız.</p> +</div> + +<h2 id="Değişken_yazı_tipleri">Değişken yazı tipleri</h2> + +<p>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 <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Değişken yazı tipleri klavuzumuzu</a> okuyabilirsiniz.</p> + +<h2 id="Becerilerinizi_test_edin!">Becerilerinizi test edin!</h2> + +<p>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. <a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a>.</p> + +<h2 id="Özet">Özet</h2> + +<p>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ı.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> + <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> +</ul> diff --git a/files/tr/learn/front-end_web_developer/index.html b/files/tr/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..2adf1624e7 --- /dev/null +++ b/files/tr/learn/front-end_web_developer/index.html @@ -0,0 +1,198 @@ +--- +title: Front-end web developer +slug: Öğren/Front-end_web_developer +tags: + - Araçlar + - Başlangıç + - CSS + - HTML + - JavaScript + - Web Standartları + - Ön Uç + - Öğrenme +translation_of: Learn/Front-end_web_developer +--- +<p>{{öğrenme kenarı}}</p> + +<p>Ön uç geliştirici öğreticimize hoş geldiniz!</p> + +<p>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.</p> + +<h2 id="Kapsanan_Konular">Kapsanan Konular</h2> + +<p>Kapsanan konular şöyledir:</p> + +<ul> + <li>Basit kurulum ve çalışma metodu</li> + <li>Web standartları ve en iyi uygulamalar (erişilebilirlik ve web tarayıcıları ile uyumluluk gibi)</li> + <li>HTML, web içeriğinin yapısını ve anlamını veren bir işaretleme dili</li> + <li>CSS, web sayfalarının biçimlendirmesini sağlayan dil</li> + <li>JavaScript, webde dinamik fonksiyonlar oluşturmak için kullanılan script dilidir</li> + <li>Modern web istemci tarafı kullanılan araçlar.</li> +</ul> + +<p>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.</p> + +<h2 id="Önkoşullar">Önkoşullar</h2> + +<p>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.</p> + +<p>Ön uç geliştirici olmanın size uygun olmayacağını düşünüyorsanız ya da daha basit bir şekilde temelden öğrenmek istiyorsanız, <a href="/en-US/docs/Learn/Getting_started_with_the_web">Web ile başlama</a> modülümüzü kullanabilirsiniz.</p> + +<h2 id="Yardım_istemek">Yardım istemek</h2> + +<p>Ö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.</p> + +<p>Panik yapmayın. İster yeni başlayan biri olun ya da daha profesyonel biri olun, hepimiz takılıp kalırız.<a href="/en-US/docs/Learn/Learning_and_getting_help"> Öğrenme ve yardım alma</a> 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 <a href="https://discourse.mozilla.org/c/mdn/learn/">Söylem forumumuza</a> yazmaktan çekinmeyin.</p> + +<p>Hadi başlayalım. İyi şanslar!</p> + +<h2 id="Öğrenme_Yolu">Öğrenme Yolu</h2> + +<h3 id="Başlangıç">Başlangıç</h3> + +<p>Tamamlama süresi: 1.5–2 saat</p> + +<h4 id="Önkoşullar_2">Önkoşullar</h4> + +<p>Temel bilgisayar bilgisi, okuryazarlığı dışında hiçbir şey.</p> + +<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> + +<p>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.</p> + +<h4 id="Kılavuzlar">Kılavuzlar</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Temel yazılımı yükleme</a>— temel araç kurulumu (15 dakika okuma)</li> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Webin arka plan ve webin standartları hakkında</a> (45 dakika okuma)</li> + <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Öğrenme ve yardım alma</a> (45 dakika okuma)</li> +</ul> + +<h3 id="HTML_ile_semantik_ve_yapı">HTML ile semantik ve yapı</h3> + +<p>Tamamlama süresi: 35–50 saat</p> + +<h4 id="Önkoşullar_3">Önkoşullar</h4> + +<p>Temel bilgisayar okuryazarlığı ve temel bir web geliştirme ortamı dışında hiçbir şey.</p> + +<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_2">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> + +<p>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.</p> + +<h4 id="Modüller">Modüller</h4> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'ye giriş</a> (15–20 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedya ve yerleştirme</a> (15–20 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/HTML/Tables">HTML tabloları </a>(5–10 saat okuma/alıştırmalar)</li> +</ul> + +<h3 id="CSS_ile_stil_ve_düzen">CSS ile stil ve düzen</h3> + +<p>Tamamlama süresi: 90–120 saat</p> + +<h4 id="Önkoşullar_4">Önkoşullar</h4> + +<p>CSS'e başlamadan önce temel HTML bilgisine sahip olmanız önerilir. En azından <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> kısmını okuyabilirsin.</p> + +<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_3">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> + +<p>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.</p> + +<h4 id="Modüller_2">Modüller</h4> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS'in ilk adımları</a> (10–15 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS'in yapı taşları</a> (35–45 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text">Metin şekillendirme</a> (15–20 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS düzeni </a>(30–40 saat okuma/alıştırmalar)</li> +</ul> + +<h4 id="Ek_kaynaklar">Ek kaynaklar</h4> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS düzeni yemek kitabı</a></li> +</ul> + +<h3 id="JavaScript_ile_etkileşim">JavaScript ile etkileşim</h3> + +<p>Tamamlama süresi: 135–185 saat</p> + +<h4 id="Önkoşullar_5">Önkoşullar</h4> + +<p>Javascript'e başlamadan önce temel HTML bilgisine sahip olmanız önerilir. En azından <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> kısmını okuyabilirsin.</p> + +<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_4">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> + +<p>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.</p> + +<h4 id="Modüller_3">Modüller</h4> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript'in ilk adımları </a>(30–40 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript'in yapı taşları </a>(25–35 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects">Javascript nesnelerine giriş</a> (25–35 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">İstemci tarafı web API'ler</a> (30–40 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Eşzamansız JavaScript</a> (25–35 saat okuma/alıştırmalar)</li> +</ul> + +<h3 id="Web_formları_-_Kullancıcı_verileriyle_çalışma">Web formları - Kullancıcı verileriyle çalışma</h3> + +<p>Tamamlama süresi: 40–50 saat</p> + +<h4 id="Önkoşullar_6">Önkoşullar</h4> + +<p>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.</p> + +<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_5">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> + +<p>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.</p> + +<h4 id="Modüller_4">Modüller</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Forms">Web formları</a> (40–50 saat)</li> +</ul> + +<h3 id="Webin_herkes_için_çalışmasını_sağlama">Web'in herkes için çalışmasını sağlama</h3> + +<p>Tamamlama süresi: 60–75 saat</p> + +<h4 id="Önkoşullar_7">Önkoşullar</h4> + +<p>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.</p> + +<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_6">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> + +<p>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.</p> + +<h4 id="Modüller_5">Modüller</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Çarpraz tarayıcı testi</a>(25–30 saat okuma/alıştırmalar)</li> + <li><a href="/en-US/docs/Learn/Accessibility">Erişilebilirlik</a> (20–25 saat okuma/alıştırmalar)</li> +</ul> + +<h3 id="Modern_Araçlar">Modern Araçlar</h3> + +<p>Tamamlama süresi: 55–90 saat</p> + +<h4 id="Önkoşullar_8">Önkoşullar</h4> + +<p>Üzerinde yoğunlaşılacak bu araçlar, birden çok teknolojiler ile çalıştığından dolayı HTML, CSS ve Javascript bilmek iyi bir fikirdir.</p> + +<h4 id="Devam_etmeye_hazır_olduğumu_nasıl_bileceğim_7">Devam etmeye hazır olduğumu nasıl bileceğim?</h4> + +<p>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.</p> + +<h4 id="Modüller_6">Modüller</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git ve GitHub</a> (5 saat okuma)</li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">İstemci tarafı web geliştirme araçlarını tanıma</a> (20–25 saat okuma)</li> + <li> + <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">İstemci tarafı Javascript araçlarını anlama </a>(30-60 saat okuma/alıştırmalar)</p> + </li> +</ul> 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 new file mode 100644 index 0000000000..d7f26f50bf --- /dev/null +++ b/files/tr/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,103 @@ +--- +title: How the Web works +slug: Öğren/Getting_started_with_the_web/How_the_Web_works +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>Nasıl web işleri</em> 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.</p> +</div> + +<p>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.</p> + +<h2 id="İstemciler_ve_sunucular">İstemciler ve sunucular</h2> + +<p>Web'e bağlı bilgisayarlara <strong>istemciler </strong>ve <strong>sunucular denir</strong>. Nasıl etkileşime girdiklerine dair basitleştirilmiş bir diyagram şöyle görünebilir:</p> + +<p><img alt="İstemci ve sunucuyu temsil eden iki daire. Bir ok etiketli istek istemciden sunucuya gidiyor ve bir ok etiketli yanıtlar sunucudan istemciye gidiyor" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p> + +<p><img alt="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" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p> + +<ul> + <li>İ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ı).</li> + <li>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.</li> +</ul> + +<h2 id="Araç_kutusunun_diğer_bölümleri">Araç kutusunun diğer bölümleri</h2> + +<p>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.</p> + +<p>Ş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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> + +<p>İstemci ve sunucuya ek olarak, biz de merhaba demek gerekir:</p> + +<ul> + <li><strong>İnternet bağlantınız</strong>: çevrimiçi veri göndermenizi ve almanızı sağlar. Temelde eviniz ve dükkan arasındaki sokak gibi.</li> + <li><strong>TCP / IP</strong>: 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).</li> + <li><strong>DNS</strong>: 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.</li> + <li><strong>HTTP</strong>: 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.</li> + <li><strong>Bileşen dosyaları</strong>: 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: + <ul> + <li><strong>Kod dosyaları</strong>: web siteleri öncelikle HTML, CSS ve Javascript'ten oluşturulmuştur, ancak daha sonra diğer teknolojilerle tanışacaksınız.</li> + <li><strong>Varlıklar</strong>: 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.</li> + </ul> + </li> +</ul> + +<h2 id="Peki_tam_olarak_ne_olacak">Peki tam olarak ne olacak?</h2> + +<p>Tarayıcınıza bir web adresi girdiğinizde (analojimiz için mağazaya gitmek gibi):</p> + +<ol> + <li>Tarayıcı DNS sunucusuna gider ve web sitesinin yaşadığı sunucunun gerçek adresini bulur (mağazanın adresini bulursunuz).</li> + <li>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.</li> + <li>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).</li> + <li>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!).</li> +</ol> + +<h2 id="DNS_açıkladı">DNS açıkladı</h2> + +<p>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: <code>63.245.215.20</code>.</p> + +<p>Buna bir <a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/docs/Glossary/IP_Address">IP adresi</a>denir 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.</p> + +<p>Web sitelerine doğrudan IP adresleri üzerinden ulaşılabilir. Bir web sitesinin IP adresini, etki alanını IP Denetleyicisi gibi bir araca yazarak bulabilirsiniz .</p> + +<h2 id="Paketler_açıklandı">Paketler açıklandı</h2> + +<p>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.</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/How_the_Internet_works">İnternet nasıl çalışır?</a></li> + <li><a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/dev.opera.com/articles/http-basic-introduction/" rel="noopener">HTTP-uygulama düzeyinde bir protokol</a></li> + <li><a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/dev.opera.com/articles/http-lets-get-it-on/" rel="noopener">HTTP: Hadi başlayalım!</a></li> + <li><a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/dev.opera.com/articles/http-response-codes/" rel="noopener">HTTP: yanıt kodları</a><a href="https://dev.opera.com/articles/http-response-codes/"> </a></li> +</ul> + +<h2 id="Kredi">Kredi</h2> + +<p>Sokak fotoğraf: <a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ" rel="noopener">Sokak beste</a>, <a class="external" href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/www.flickr.com/photos/kdigga/" rel="noopener">Kevin D</a>.</p> + +<div class="prevnext"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website"><span class="label">Önceki </span></a><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Genel Bakış: web ile Başlarken</a></div> + +<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="Bu_modülde">Bu modülde</h2> + +<ul> + <li id="Installing_basic_software"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Temel yazılım yükleme</a></li> + <li id="What_will_your_website_look_like"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web siteniz nasıl görünecek?</a></li> + <li id="Dealing_with_files"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışmak</a></li> + <li id="HTML_basics"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML temelleri</a></li> + <li id="CSS_basics"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS temelleri</a></li> + <li id="JavaScript_basics"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript temelleri</a></li> + <li id="Publishing_your_website"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Web sitenizi yayınlama</a></li> + <li id="How_the_web_works"><a href="https://z5h64q92x9.net/proxy_u/en-tr.en/https/developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Web nasıl çalışır?</a><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works"> </a></li> +</ul> diff --git a/files/tr/learn/getting_started_with_the_web/index.html b/files/tr/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..de4a8c94f4 --- /dev/null +++ b/files/tr/learn/getting_started_with_the_web/index.html @@ -0,0 +1,49 @@ +--- +title: Web ile başlarken +slug: Öğren/Getting_started_with_the_web +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p><br> + 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.</p> +</div> + +<h2 id="İlk_web_sitenizin_hikayesi">İlk web sitenizin hikayesi</h2> + +<p>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.</p> + +<p>Aşağıda sıralanan makalelerde sırayla çalışarak, ilk web sayfanızı çevrimiçi hale getireceksiniz. Hadi başlayalım!</p> + +<h3 id="Temel_yazılım_kurma"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Installing_basic_software">Temel yazılım kurma</a></h3> + +<p>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. <a href="/tr/docs/Öğren/Getting_started_with_the_web/Installing_basic_software">Temel yazılımı yükleme</a> 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.</p> + +<h3 id="Websiteniz_nasıl_görünecek"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek">Websiteniz nasıl görünecek?</a></h3> + +<p>Web siteniz için kod yazmaya başlamadan önce, önce onu planlamanız gerekir. Hangi bilgileri sergiliyorsunuz? Hangi yazı tiplerini ve renkleri kullanıyorsunuz? <a href="/tr/docs/Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek">Web siteniz neye benzeyecek?</a> Sitenizin içeriğini ve tasarımını planlamak için izleyebileceğiniz basit bir yöntem sunuyoruz.</p> + +<h3 id="Dosyaların_Yönetimi"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Dealing_with_files">Dosyaların Yönetimi</a></h3> + +<p>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. <a href="/tr/docs/Öğren/Getting_started_with_the_web/Dealing_with_files">Dosyaların yönetimi</a>, 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.</p> + +<h3 id="HTML_temelleri"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML temelleri</a></h3> + +<p>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, <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML temelleri</a> size HTML ile tanışmanız için yeterli bilgiyi sağlayacaktır.</p> + +<h3 id="CSS_temelleri"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS temelleri</a></h3> + +<p>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? <a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS temelleri</a> sizi başlamanız gereken yere götürür.</p> + +<h3 id="JavaScript_temelleri"><a href="/tr/docs/Öğren/Getting_started_with_the_web/JavaScript_basics">JavaScript temelleri</a></h3> + +<p>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ı. <a href="/tr/docs/Öğren/Getting_started_with_the_web/JavaScript_basics">JavaScript temelleri</a> size bu ilginç dil ile neler yapabileceğiniz ve nasıl başlayacağınız konusunda bir fikir verir.</p> + +<h3 id="Websiteni_yayınla"><a href="/tr/docs/Öğren/Getting_started_with_the_web/Publishing_your_website">Websiteni yayınla</a></h3> + +<p>Kodu yazmayı ve web sitenizi yaratan dosyaları düzenlemeyi bitirdikten sonra, hepsini insanların bulabilmesi için internete yüklemeniz gerekmektedir. <a href="/tr/docs/Öğren/Getting_started_with_the_web/Publishing_your_website">Örnek kodu yayınla</a>, size minimum çaba ile basit örnek kodunuzun nasıl internette yayınlanacağını açıklar.</p> + +<h3 id="Web_nasıl_çalışır"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Web nasıl çalışır</a></h3> + +<p>Favori web sitenize bağlandığınızda, arka planda bilmediğiniz birçok karmaşık şey olur. <a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Web nasıl çalışır</a>, bilgisayarınızda bir web sayfasını görüntülediğinizde neler olacağını gösterir.</p> 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 new file mode 100644 index 0000000000..df366e2761 --- /dev/null +++ b/files/tr/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,59 @@ +--- +title: Installing basic software +slug: Öğren/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 +--- +<div><font><font>{{LearnSidebar}}</font></font></div> + +<div><font><font>{{NextMenu ("Öğrenmek / Almak_started_with_the_web / What_will_your_website_look_like", "Öğrenmek / Getting_started_with_the_web")}}</font></font></div> + +<div class="summary"> +<p><em>Temel yazılımı yükleme</em> 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.</p> +</div> + +<h2 id="Bir_profesyonelin_sahip_olması_gereken_araçlar_nelerdir">Bir profesyonelin sahip olması gereken araçlar nelerdir ?</h2> + +<ul> + <li><strong>Bir Bilgisayar</strong>. 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).</li> + <li>Kodu yazmak için<strong>, text editörünüz olmalı </strong>(ör. <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> veya <a href="https://code.visualstudio.com/">Visual Studio Code</a>), veya karma bir editör (ör.<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). <u>Ofis belgeleri bu iş için uygun değildir.</u></li> + <li><strong>Kodunuzu test etmek için iyi bir Web tarayıcısı,</strong> En çok kullanılan tarayıcılar : <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> ve <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. 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.</li> + <li><strong>Grafik Editörü</strong>, web sitenize görüntüler yapmak için, mesala <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, veya <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>.</li> + <li><strong>Sürüm kontrol sistemi</strong>, 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 <a href="http://git-scm.com/">Git</a> popüler bir sürüm kontrol sistemidir, ve Git'e merkezli <a href="https://github.com/">GitHub</a> kod barındırma hizmeti de çok popüler.</li> + <li><strong>FTP programı</strong>, web üzerinde barındılan dosyaların serverlardan yönetilmesinde kullanıldı. (<a href="http://git-scm.com/">Git</a> bu amaçla giderek FTP yerini değiştiriyor). <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, ve <a href="https://filezilla-project.org/">FileZilla</a> dahil olmak üzere bir çok (S) FTP programı bulunmaktadır.</li> + <li><strong>Otomasyon Sistemi</strong> <a href="http://gruntjs.com/">Grunt</a> veya <a href="http://gulpjs.com/">Gulp</a> tekrarlanan görevleri otomatikleştirir, mesela kodu küçültme ve testleri çalıştırıyor.</li> + <li>Ortak işlevselliği hızlandırmak için şablonlar, kütüphaneler, çerçeveler, vb.</li> + <li>Üstelik daha fazla araç!</li> +</ul> + +<h2 id="Şu_anda_hangi_araçlara_ihtiyacım_var"><font><font>Şu anda hangi araçlara ihtiyacım var?</font></font></h2> + +<p><font><font>Bu korkutucu bir listeye benziyor, ama neyse ki bunların çoğuyla ilgili hiçbir şey bilmeden web geliştirmeye başlayabilirsiniz. </font><font>Bu yazıda, size yalnızca minimum düzeyde bir kurulum yapacağız - bir metin editörü ve bazı modern web tarayıcıları.</font></font></p> + +<h3 id="Metin_editörü_yükleme"><font><font>Metin editörü yükleme</font></font></h3> + +<p><font><font>Muhtemelen bilgisayarınızda zaten temel bir metin editörünüz vardır. </font><font>Varsayılan olarak, Windows </font></font><a href="https://en.wikipedia.org/wiki/Microsoft_Notepad"><font><font>Not Defteri'ni</font></font></a><font><font> içerir </font><font>ve macOS </font></font><a href="https://en.wikipedia.org/wiki/TextEdit"><font><font>TextEdit</font></font></a><font><font> ile birlikte gelir </font><font>. </font><font>Linux dağıtımları değişir; </font><font>Ubuntu </font><font>varsayılan </font><font>olarak </font></font><a href="https://en.wikipedia.org/wiki/Gedit"><font><font>gedit</font></font></a><font><font> ile birlikte gelir </font><font>.</font></font></p> + +<p><font><font>Web geliştirme için, muhtemelen Not Defteri'nden veya TextEdit'ten daha iyisini yapabilirsiniz. </font><font>Canlı önizlemeler ve kod ipuçları sunan ücretsiz bir editör olan </font></font><a href="http://brackets.io"><font><font>Brackets</font></font></a><font><font> ile başlamanızı öneririz </font><font>.</font></font></p> + +<h3 id="Modern_web_tarayıcılarını_yükleme"><font><font>Modern web tarayıcılarını yükleme</font></font></h3> + +<p><font><font>Ş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:</font></font></p> + +<ul> + <li><font><font>Linux: </font></font><a href="https://www.mozilla.org/en-US/firefox/new/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/browser/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="http://www.opera.com/"><font><font>Opera</font></font></a><font><font> .</font></font></li> + <li><font><font>Windows: </font></font><a href="https://www.mozilla.org/en-US/firefox/new/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/browser/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="http://www.opera.com/"><font><font>Opera</font></font></a><font><font> , </font></font><a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie"><font><font>Internet Explorer</font></font></a><font><font> , </font></font><a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font color="#0066cc"><font><font>Microsoft Edge</font></font></font></a><font><font> (Windows 10, varsayılan olarak Edge ile birlikte gelir; Windows 7 veya daha üst sürümlere sahipseniz, Internet Explorer 11'i yükleyebilirsiniz; aksi halde alternatif bir tarayıcı yüklemelisiniz)</font></font></li> + <li><font><font>Mac: </font></font><a href="https://www.mozilla.org/en-US/firefox/new/"><font><font>Firefox</font></font></a><font><font> , </font></font><a href="https://www.google.com/chrome/browser/"><font><font>Chrome</font></font></a><font><font> , </font></font><a href="http://www.opera.com/"><font><font>Opera</font></font></a><font><font> , </font></font><a href="https://www.apple.com/safari/"><font><font>Safari</font></font></a><font><font> (Safari, varsayılan olarak iOS ve macOS ile birlikte gelir)</font></font></li> +</ul> + +<p><font><font>Devam etmeden önce, bu tarayıcılardan en az ikisini kurmalı ve test için hazır bulundurmalısınız.</font></font></p> + +<h3 id="Yerel_bir_web_sunucusu_kurmak"><font><font>Yerel bir web sunucusu kurmak</font></font></h3> + +<p><font><font>Bazı örneklerin başarılı bir şekilde çalışması için bir web sunucusu üzerinden çalıştırılması gerekir. </font><font>Bunun </font></font><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server"><font><font>nasıl yapılacağını öğrenerek yerel bir test sunucusu nasıl kurulur?</font></font></a></p> + +<p><font><font>{{NextMenu ("Öğrenmek / Almak_started_with_the_web / What_will_your_website_look_like", "Öğrenmek / Getting_started_with_the_web")}}</font></font></p> 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 new file mode 100644 index 0000000000..3d52dfbb5b --- /dev/null +++ b/files/tr/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,386 @@ +--- +title: JavaScript'in Temelleri +slug: Öğren/Getting_started_with_the_web/JavaScript_basics +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> + +<div class="summary"> +<p>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.</p> +</div> + +<h2 id="JavaScript_nedir">JavaScript nedir?</h2> + +<p>{{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.</p> + +<p>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.</p> + +<p>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:</p> + +<ul> + <li>({{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.</li> + <li>Geliştiricilerin, siteleri ile Twitter ve Facebook arası ortak fonksiyonlar kullanmasını kullanmak üzere 3. parti API'ler.</li> + <li>HTML'ye uygulayabileceğiniz, çok hızlı bir şekilde web siteleri inşa etmenize yarayacak 3. parti kütüphaneler.</li> +</ul> + +<h2 id="Bir_Merhaba_dünya!_örneği">Bir <em>Merhaba dünya!</em> örneği</h2> + +<p>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.</p> + +<p>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.(<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">Programlamada standart, basit bir önek</a>)</p> + +<div class="warning"> +<p><strong>Önemli</strong>: Eğer bu dersi bizimle takip etmeyecekseniz, örnek kodu bir başlangıç olarak <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">bilgisayarınıza indirin</a>.</p> +</div> + +<ol> + <li>Önce test sitenizin olduğu klasöre gidip,<code> scripts</code> isimli bir klasör açın ve içine <code>main.js</code> adında bir dosya yaratın.</li> + <li>Sonra, index.html dosyasının içine gidin ve </body> etiket bitiminden bir önceki satıra bu kodu ekleyin: + <pre class="brush: html notranslate"><script src="scripts/main.js"></script></pre> + </li> + <li>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.</li> + <li>Şimdi bu kodu <code>main.js</code> dosyanıza ekleyin. + <pre class="brush: js notranslate">var myHeading = document.querySelector('h1'); +myHeading.textContent = 'Hello world!';</pre> + </li> + <li>Ş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.<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: {{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.</p> +</div> + +<h3 id="Ne_oldu">Ne oldu?</h3> + +<p>Evet, başlık metniniz "<em>Hello world!</em>" 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 <code>myHeading</code> 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.</p> + +<p>Sonra, myHeading değişkeninin {{domxref("Node.textContent", "textContent")}} özelliğini, (başlığın içeriğini taşıyan özellik) "<em>Hello world!</em>" olarak değiştirdik.</p> + +<h2 id="Hızlandırılmış_Dil_Temelleri_Kursu">Hızlandırılmış Dil Temelleri Kursu</h2> + +<p>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.</p> + +<div class="warning"> +<p><strong>Önemli</strong>: Bu makaledeki örnek kodları Javascript komut sistemine yazıp ne olacağını görmelisiniz. Javascript Console hakkında <a href="/en-US/Learn/Discover_browser_developer_tools">daha fazla bilgi alın</a>.</p> +</div> + +<h3 id="Değişkenler">Değişkenler</h3> + +<p>{{Glossary("Variable", "Variables")}} Değişkenler, değeleri saklayabileceğiniz kaplardır. Bir değişkeni tanımlamaya <code>var</code> anahtar kelimesi kullanarak başlarsınız, ardından da değişkene vermek istediğiniz ismi yazarsınız.</p> + +<pre class="brush: js notranslate">var myVariable;</pre> + +<div class="note"> +<p><strong>Not</strong>: Javascript'teki bütün ifadeler noktalı virgül ile bitmelidir. Eğer noktalı virgül koymaysanız, beklenmeyen sonuçlarla karşılaşabilirsiniz.</p> +</div> + +<div class="note"> +<p><strong>Not</strong>: Seçilmiş anahtar kelimeler dışında değişkenlerinize istediğiniz ismi verebilirsiniz. (lütfen d<a href="http://www.codelifter.com/main/tips/tip_020.shtml">eğişken isimlendirme kuralları makalesini okuyun</a>)</p> +</div> + +<div class="note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<p>Bir değişkeni tanımladıktan sonra ona bir değer verebilirsiniz.</p> + +<pre class="brush: js notranslate">myVariable = 'Bob';</pre> + +<p>Bunları dilerseniz aynı satırda yapabilirsiniz.</p> + +<pre class="brush: js notranslate">var myVariable = 'Bob';</pre> + +<p>Bu değişkenin değlerini sadece ismini yazarak çağırabilirsiniz.</p> + +<pre class="brush: js notranslate">myVariable;</pre> + +<p>Bir değişkene bir değer verdikten sonra bu değeri değiştirebilirsiniz.</p> + +<pre class="notranslate">var myVariable = 'Bob'; +myVariable = 'Steve';</pre> + +<p>Bütün verilerin farklı <a href="/en-US/docs/Web/JavaScript/Data_structures">veri tipleri</a> olduğunu unutmayın.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Değişken</th> + <th scope="col">Açıklama</th> + <th scope="col">Örnek</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td>Metin, bir değişkeni metin olarak tanımlamak için değeri tırnak içerisine alın.</td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Number")}}</th> + <td>Sayılar tırnak içerisinde olmaya ihtiyaç duymazlar.</td> + <td><code>var myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td>Doğru/Yanlış değeri. True ve false Javascript'in anahtar kelimeleridir ve tırnağa ihtiyaç duymazlar.</td> + <td><code>var myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td>Pek çok veriyi tek bir referans altında saklamanıza yarayan bir yapı.</td> + <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> + Dizinin her üyesine şu şekilde bakın:<br> + <code>myVariable[0]</code>, <code>myVariable[1]</code>, vs.</td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td>Temel olarak, Javascriptteki her şey birer nesnedir ve bir değişkende saklanabilir. Javascript öğrendiğiniz sürece bunu aklınızdan çıkarmayın.</td> + <td><code>var myVariable = document.querySelector('h1');</code><br> + Yukarıdaki örneklerin hepside.</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<h3 id="Yorumlar">Yorumlar</h3> + +<p>CSS'de olduğu gibi Javascript kodunuza da yorumlar koyabilirsiniz.</p> + +<pre class="brush: js notranslate">/* +Aralarındaki her şey birer yorumdur. +*/</pre> + +<p>Eğer çok satırlı yorum yazmaya ihtiyaç yoksa, iki bölü işareti ile yorum koyabilirsiniz.</p> + +<pre class="brush: js notranslate">// Bu bir yorumdur. +</pre> + +<h3 id="Operatörler.">Operatörler.</h3> + +<p>{{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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Operatör</th> + <th scope="col">Açıklama</th> + <th scope="col">Sembol</th> + <th scope="col">Örnek</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Toplama / Birleştir</th> + <td>İki sayıyı toplamak ve iki String'i birleştirmek için kullanılır.</td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + "Hello " + "world!";</code></td> + </tr> + <tr> + <th scope="row">Çıkarma, Çarpma, Bölme</th> + <td>Bunlar, Temel Matematikteki işlemlerin aynısını yapar.</td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // multiply in JS is an asterisk<br> + 9 / 3;</code></td> + </tr> + <tr> + <th scope="row">Atama Operatörü</th> + <td>Bunu daha önce gördünüz, bir değeri diğerine atar</td> + <td><code>=</code></td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">Eşitlik Operatörü</th> + <td>İki değerin birbirne eşit olup olmadığını test eder ve <code>true</code>/<code>false</code> döndürür</td> + <td><code>===</code></td> + <td><code>var myVariable = 3;<br> + myVariable === 4;</code></td> + </tr> + <tr> + <th scope="row">Olumsuzluk / Eşitizlik</th> + <td>Değ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.</td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>Temel ifade <code>true</code>'dur, ama karşılaştırma <code>false</code> döndürür. çünkü onu reddettik:</p> + + <p><code>var myVariable = 3;<br> + !(myVariable === 3);</code></p> + + <p>Burada test ediyoruz "<code>myVariable</code> 3'e eşit değil". Bu<code> false</code> döndürür çünkü<code>myVariable</code> 3'e eşittir.</p> + + <p><code><code>var myVariable = 3;</code><br> + myVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p>Bunların dışında da operatörler vardır. <a href="/en-US/docs/Web/JavaScript/Reference/Operators">İfadeler ve operatörler makalesinden</a>, bütün operatörler listesini inceleyebilirsiniz.</p> + +<div class="note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<h3 id="Koşul_İfadeleri">Koşul İfadeleri</h3> + +<p>Koşul ifadeleri, bir ifadenin değerinin <code>true </code>veya <code>false</code> olup olmadığını kontrol eder. Buna bağlı olarak farklı kodlar çalıştırılabilir. En temel ve en çok kullanılan tip <code>if... else </code>yapısıdır. Örneğin:</p> + +<pre class="brush: js notranslate">var iceCream = 'chocolate'; +if (iceCream === 'chocolate') { + alert('Yay, I love chocolate ice cream!'); +} else { + alert('Awwww, but chocolate is my favorite...'); +}</pre> + +<p>i<code>f(...) </code>ifadesinin içindeki ifade, (eşitlik operatörü ile test edilir) <code>iceCream</code> değişkenini '<code>chocolate' </code>değeri ile karşılaştırır ve <code>true</code> 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 <code>else</code> bloğu içerisindeki kod çalıştırılır.</p> + +<h3 id="Fonksiyonlar">Fonksiyonlar</h3> + +<p>{{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:</p> + +<ol> + <li> + <pre class="brush: js notranslate">var myVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js notranslate">alert('hello!');</pre> + </li> +</ol> + +<p>Bu fonksiyonlar, tarayıcıların içerisinde tanımlanmıştır ve istediğiniz zaman kullanabilirsiniz.</p> + +<p>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.</p> + +<p>Örneğin, <code>alert()</code> fonksiyonu, tarayıcı penceresi içerisinde bir pop-up kutusu gösterir. Ancak biz bu fonksiyona göstermesi için bir String vermeliyiz.</p> + +<p>İ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.</p> + +<pre class="brush: js notranslate">function multiply(num1,num2) { + var result = num1 * num2; + return result; +}</pre> + +<p>Üstteki fonksiyonu konsolda tanımlayıp kullanmayı deneyin:</p> + +<pre class="brush: js notranslate">multiply(4,7); +multiply(20,20); +multiply(0.5,3);</pre> + +<div class="note"> +<p><strong>Not</strong>: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a> 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 <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">daha fazla bilgi edinin</a>.</p> +</div> + +<h3 id="Olaylar">Olaylar</h3> + +<p>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 <a href="/tr/docs/Web/Events/click">tıklama olayı</a>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.</p> + +<pre class="brush: js notranslate">document.querySelector('html').onclick = function() { + alert('Ouch! Stop poking me!'); +}</pre> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a> olayını anonim (i.e. nameless) bir fonksiyona atadık. Bu anonim fonksiyon tıklandığında ne olacağını gösteriyor.</p> + +<p>Bu örnek</p> + +<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre> + +<p>Bunun aynısı.</p> + +<pre class="brush: js notranslate">var myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p>Sadece daha kısası.</p> + +<h2 id="Web_sitemizi_harikalaştırmak">Web sitemizi harikalaştırmak</h2> + +<p>Şimdiye kadar Javascript temellerini anlattık. Şimdi örnek websitemize bazı havalı özellkler ekleyelim.</p> + +<h3 id="Fotoğraf_değiştirici_eklemek">Fotoğraf değiştirici eklemek</h3> + +<p>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.</p> + +<ol> + <li>Öncelikle web siteniz için aynı boyutlu ya da yakın boyutlarda bir fotoğraf bulun.</li> + <li>Bu fotoğrafı <code>images</code> klasörüne ekleyin.</li> + <li>Bu resmi 'firefox2.png' (tırnak işaretleri olmadan) olarak yeniden adlandırın.</li> + <li> <code>main.js</code> dosyasını açın ve aşağıdaki kodları ekleyin. (Eğer "Hello world!" kodları hala bu dosyadaysa, silin.) + <pre class="brush: js notranslate">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'); + } +}</pre> + </li> + <li>Bütün dosyaları kaydedin ve tarayıcınızda <code>index.html</code> dosyasını açın.Şimdi resime tıkladığınızda diğer resime değişmeli.</li> +</ol> + +<p>Buraya kadar, img elementimizin src özelliğini <code>myImage</code> değişkeninde saklıyoruz. Sonra değişkenin <code>onclick</code> olayını bir anonim fonksiyona bağlıyoruz. Artık elemente her tıklandığında:</p> + +<ol> + <li>Fotoğrafın <code>src</code> özelliğini getiriyoruz.</li> + <li>İ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ı. + <ol> + <li>Öyleyse, ikinci görsele değiştiriyoruz. Bu sayede {{htmlelement("image")}} elementinin gösterdiği görsel değişiyor.</li> + <li>Değilse (yani değiştirdiysek), <code>src</code> değerine orjinal değeri atıyoruz ve bu sayede görsel ilk haline geliyor.</li> + </ol> + </li> +</ol> + +<h3 id="Kişiselleştirilmiş_Merhaba_Mesajı_Eklemek">Kişiselleştirilmiş Merhaba Mesajı Eklemek</h3> + +<p>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.</p> + +<ol> + <li>index.html dosyasında, {{htmlelement("script")}} elementini aşağıdaki satırdan önce ekleyin. + <pre class="brush: html notranslate"><button>Change user</button></pre> + </li> + <li>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. + <pre class="brush: js notranslate">var myButton = document.querySelector('button'); +var myHeading = document.querySelector('h1');</pre> + </li> + <li>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. + <pre class="brush: js notranslate">function setUserName() { + var myName = prompt('Please enter your name.'); + localStorage.setItem('name', myName); + myHeading.textContent = 'Mozilla is cool, ' + myName; +}</pre> + + <p>Bu fonksiyon <code>alert()</code> gibi ekrana bir diyalog kutusu getiren bir <code>prompt() </code>fonksiyonunu içerir. Bu prompt() fonksiyonu kullanıcının bilgi girişi yapmasını ister ve kullanıcı<strong> Tamam</strong> 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 <code>'name' </code>verisini oluşturmak ve saklamak için localStorage'in <code>setItem() </code>fonksiyonunu kullanıyoruz ve kullanıcının girmiş olduğu bu veriyi myName değişkenine atıyoruz. Sonunda, başlığın <code>textContent</code> değişkenini ve kullanıcının saklanmış verisini başlık olarak ayarladık.</p> + </li> + <li>Next, add this <code>if ... else</code> block — we could call this the initialization code, as it sets up the app when it first loads: + <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { + setUserName(); +} else { + var storedName = localStorage.getItem('name'); + myHeading.textContent = 'Mozilla is cool, ' + storedName; +}</pre> + This block first uses the negation operator (logical NOT) to check whether the <code>name</code> data item exists. If not, the <code>setUserName()</code> function is run to create it. If so (that is, the user set it during a previous visit), we retrieve the stored name using <code>getItem()</code> and set the <code>textContent</code> of the heading to a string, plus the user's name, the same as we did inside <code>setUserName()</code>.</li> + <li>Finally, put the below <code>onclick</code> event handler on the button, so that when clicked the <code>setUserName()</code> function is run. This allows the user to set a new name whenever they want by pressing the button: + <pre class="brush: js notranslate">myButton.onclick = function() { + setUserName(); +} +</pre> + </li> +</ol> + +<p>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!</p> + +<h2 id="Sonuç">Sonuç</h2> + +<p>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 <a href="https://mdn.github.io/beginner-html-site-scripted/">buradan</a> inceleyebilirsiniz)</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> + +<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">finished example code on Github</a>.</p> + +<p>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 <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p> + +<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> 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 new file mode 100644 index 0000000000..15e286ef50 --- /dev/null +++ b/files/tr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,93 @@ +--- +title: Web siteniz nasıl görünecek +slug: Öğren/Getting_started_with_the_web/Web_siteniz_nasil_gorunecek +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{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")}}</div> + +<div class="summary"> +<p><em>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.</em></p> +</div> + +<h2 id="Herşeyden_önce_Planlama">Herşeyden önce: Planlama</h2> + +<p>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.</p> + +<p>Başlangıç olarak bu sorulara cevap bulmalısınız: </p> + +<ol> + <li><strong>Web siten ne hakkında? </strong>Köpekleri, Newyork'u ya da Pacman'i severmisiniz?</li> + <li><strong>Temada ne tür bilgiler sunuyorsun? </strong>Bir başlık ve birkaç paragraf yaz. Sayfanda göstermek istediğin resimi düşün.</li> + <li>Basit ve ileri seviyede terimlerle <strong>Web siten nasıl görünecek?</strong> Arkaplan rengi ne olacak? Hangi yazı tipi uygun: resmi, çizgi film, kalın ya da ince? </li> +</ol> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Not:</strong></span> 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 <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p> +</div> + +<h2 id="Tasarımınızın_taslağını_çıkarmak">Tasarımınızın taslağını çıkarmak</h2> + +<p>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!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> + +<p>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.</p> +</div> + +<h2 id="İçeriği_seçmek">İçeriği seçmek</h2> + +<p>Bu noktada, sitenizde görünecek içeriği bir araya getirmeye başlamak iyidir.</p> + +<h3 id="Metin">Metin</h3> + +<p>You should still have your paragraphs and title from earlier. Keep these close by.</p> + +<h3 id="Theme_color">Theme color</h3> + +<p>To choose a color, go to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">the Color Picker</a> and find a color you like. When you click on a color, you'll see a strange six-character code like <code>#660066</code>. That's called a <em>hex(adecimal) code</em>, and represents your color. Copy the code down somewhere safe for now.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> + +<h3 id="Images">Images</h3> + +<p>To choose an image, go to <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> and search for something suitable.</p> + +<ol> + <li>When you find the image you want, click on the image.</li> + <li>Press the <em>View image</em> button.</li> + <li>On the next page, right-click the image (Ctrl + click on a Mac), choose <em>Save Image As...</em>, 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.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> + +<div class="note"> +<p><strong>Note</strong>: 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 <strong>Search tools</strong>, then on 2) <strong>Usage rights</strong>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> +</div> + +<h3 id="Font">Font</h3> + +<p>To choose a font:</p> + +<ol> + <li>Go to <a href="http://www.google.com/fonts">Google Fonts</a> 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.</li> + <li>Click the "plus" (Add to) icon next to the font you want.</li> + <li>Click the "* Family Selected"<em> </em>button in the panel at the bottom of the page ("*" depends on how many fonts you selected).</li> + <li>In the popup box, you can see and copy the lines of code Google gives you into your text editor to save for later.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> + +<p>{{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")}}</p> diff --git a/files/tr/learn/html/index.html b/files/tr/learn/html/index.html new file mode 100644 index 0000000000..3d9a352661 --- /dev/null +++ b/files/tr/learn/html/index.html @@ -0,0 +1,61 @@ +--- +title: Web'i HTML ile oluşturma +slug: Öğren/HTML +tags: + - Başlangıç + - HTML + - Konu + - Kılavuz + - Tanıtım + - Yeni başlayan + - Öğrenmek +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">WEB Siteleri kurabilmek için, bir web sayfasının yapısını kuran ve en temel teknoloji olan {{Glossary('HTML')}} bilmelisiniz. <span id="result_box" lang="tr"><span>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.</span></span></p> + +<h3 id="Front-end_Ön-yüz_web_tasarımcısı_olmak_ister_misiniz">(Front-end) Ön-yüz web tasarımcısı olmak ister misiniz?</h3> + +<p>Amacınız için çalışmanız gereken tüm gerekli bilgileri içeren bir kurs derledik;</p> + +<p><a href="https://wiki.developer.mozilla.org/docs/Learn/Front-end_web_developer">Başlayabilirsiniz..</a></p> + +<h2 id="Başlarken_gerekenler.">Başlarken gerekenler.</h2> + +<p><span id="result_box" lang="tr"><span>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 </span></span><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> (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, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> (Dosyalarla çalışma) — bunların ikisi de <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> (web ile çalışmaya başlama) tamamen yeni başlayanlar bölümünde anlatılmıştır.</p> + +<p>Tavsiyemiz <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>(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. <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> (HTML Temelleri) makalesinde sunulan bilgilerin tamamı <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> (HTML'e giriş) bölümünde çok daha detaylı olarak anlatılmaktadır.</p> + +<p>HTML öğrendikten sonra, aşağıdaki daha ileri seviye konuları öğrenmeye başlayarak devam edebilirsiniz:</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, ve bunu HTML'i şekillendirmek için nasıl kullanmalıyız. (<span id="result_box" lang="tr"><span>Ö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.</span></span>)</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, ve bunu <span id="result_box" lang="tr"><span>web sayfalarına dinamik kullanıcı etkileşimli işlevler eklemek için nasıl kullanmalıyız.</span></span> (Ö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ı.)</li> +</ul> + +<h2 id="Bölümler">Bölümler</h2> + +<p>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.</p> + +<dl> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e Giriş </a></dt> + <dd>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.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia ekleme ve yerleştirme (embedding) işlemleri</a></dt> + <dd>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.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables">HTML tabloları</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Genel_HTML_problemlerinin_çözümleri">Genel HTML problemlerinin çözümleri</h2> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto">HTML kullanarak temel problemlerinin çözmek </a>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.</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<dl> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms">Web formları</a></dt> + <dd>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. </dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a></dt> + <dd>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.</dd> +</dl> 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 new file mode 100644 index 0000000000..f88ec96f22 --- /dev/null +++ b/files/tr/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,746 @@ +--- +title: HTML ile Başlarken +slug: Öğren/HTML/Introduction_to_HTML/Başlangıç +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön Koşullar:</th> + <td> + <p>Temel bilgisayar bilgisi, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">t</a>emel yazılım kurulumu ve dosyalarla çalışma için temel bilgi</p> + </td> + </tr> + <tr> + <th scope="row">Hedef:</th> + <td>HTML dilini temel olarak tanımak ve birkaç HTML öğesi yazmak için biraz pratik yapmak.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_nedir">HTML nedir?</h2> + +<p>{{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:</p> + +<pre>My cat is very grumpy</pre> + +<p>Satırın tek başına durmasını istiyorsak, paragrafın içine paragraf ekleyerek paragraf ({{htmlelement("p")}}) olduğunu belirleyebiliriz </p> + +<pre class="brush: html"><p>My cat is very grumpy</p></pre> + +<div class="note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<h2 id="Bir_HTML_ögesinin_anatomisi">Bir HTML ögesinin anatomisi</h2> + +<p>Paragraf elemanımızı biraz daha inceleyelim:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Öğemizin ana bölümleri:</p> + +<ol> + <li>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.</li> + <li>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.</li> + <li>İçerik: Sadece metin içeren ögemizin içerik unsurudur.</li> + <li>Öğe: Açılış etiketi artı kapanış etiketi ve içerik öğeye eşittir.</li> +</ol> + +<h3 id="Aktif_öğrenme_ilk_HTML_ögenizi_oluşturun">Aktif öğrenme: ilk HTML ögenizi oluşturun</h3> + +<p>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 <em>Çıktı</em> alanında canlı olarak görebilirsiniz.</p> + +<p>Bir hata yaparsanız, <em>Sıfırla</em> düğmesini kullanarak her zaman sıfırlayabilirsiniz. Gerçekten sıkışırsanız, cevabı görmek için <em>Çözümü göste</em>r düğmesine basın.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + This is my text. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<em>This is my text.</em>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="İç_içe_geçmiş_ögeler">İç içe geçmiş ögeler</h3> + +<p>Öğeleri başka öğelerin içine de yerleştirebilirsiniz - buna iç içe geçmiş öge denir. Kedimizin <strong>çok</strong> 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> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<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> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>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!</p> + +<h3 id="Satır_içi_ögelere_karşı_blok">Satır içi ögelere karşı blok</h3> + +<p>HTML'de bilmeniz gereken iki önemli öğe kategorisi vardır. Blok düzeyinde elemanlar ve satır içi elemanlar.</p> + +<ul> + <li>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.</li> + <li>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.</li> +</ul> + +<p>Aşağıdaki örneği ele alalım:</p> + +<pre class="brush: html"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<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 ).</p> + +<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> + +<div class="note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<div class="note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h3 id="Boş_Ögeler">Boş Ögeler</h3> + +<p>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:</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Bu, sayfanıza aşağıdakilerin çıktısını verir:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Not</strong>: Boş elemanlara bazen boş elemanlar da denir.</p> +</div> + +<h2 id="Öznitellikler">Öznitellikler</h2> + +<p>Öğelerin ayrıca şuna benzeyen nitelikleri de olabilir:</p> + +<p><img alt='&amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<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.</p> + +<p>Bir nitelik şunlara sahip olmalıdır:</p> + +<ol> + <li>Onunla eleman adı arasındaki boşluk (ya da eleman zaten bir ya da daha fazla özniteliğe sahipse, önceki öznitelik).</li> + <li>Öznitelik adı, ardından eşit bir işaret.</li> + <li>Açma ve kapama alıntı işaretlerinin etrafına sarılmış bir özellik değeri.</li> +</ol> + +<h3 id="Aktif_öğrenme_Bir_elemana_nitelikler_ekleme">Aktif öğrenme: Bir elemana nitelikler ekleme</h3> + +<p>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:</p> + +<ul> + <li><code>href</code>: 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, <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: The <code>title</code> attribute specifies extra information about the link, such as what the page is that you are linking to. For example, <code>title="The Mozilla homepage"</code>. This will appear as a tooltip when hovered over.</li> + <li><code>target</code>: The <code>target</code> attribute specifies the browsing context which will be used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the link in the current tab just omit this attribute.</li> +</ul> + +<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favorite website. First, add the <code><a></code> element. Second, add the <code>href</code> attribute and the <code>title</code> attribute. Lastly, specify the <code>target</code> attribute to open the link in the new tab. You'll be able to see your changes update live in the <em>Output</em> area. You should see a link that when hovered over displays the <code>title</code> attribute's content, and when clicked navigates to the web address in the <code>href</code> element. Remember that you need to include a space between the element name, and each attribute.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;A link to my favorite website.&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Boolean_attributes">Boolean attributes</h3> + +<p>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.</p> + +<pre><input type="text" disabled="disabled"></pre> + +<p>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):</p> + +<pre class="brush: html"><!-- 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"> +</pre> + +<p>The above HTML will give you a rendered output as follows:</p> + +<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Omitting_quotes_around_attribute_values">Omitting quotes around attribute values</h3> + +<p>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 <code>href</code> attribute, like this:</p> + +<pre class="brush: html"><a href=https://www.mozilla.org/>favorite website</a></pre> + +<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p> + +<pre class="example-bad brush: html"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> + +<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. 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!</p> + +<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p> + +<h3 id="Single_or_double_quotes">Single or double quotes?</h3> + +<p>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:</p> + +<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>You should however make sure you don't mix them together. The following will go wrong!</p> + +<pre class="example-bad brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>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:</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>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 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">use HTML entities</a> for the quotes. For example, this will break:</p> + +<pre class="example-bad brush: html"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> + +<p>So you need to do this:</p> + +<pre class="brush: html"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> + +<h2 id="Anatomy_of_an_HTML_document">Anatomy of an HTML document</h2> + +<p>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:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Here we have:</p> + +<ol> + <li><code><!DOCTYPE html></code>: 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: + + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + 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. <code><!DOCTYPE html></code> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.</li> + <li><code><html></html></code>: The {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.</li> + <li><code><head></head></code>: The {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn't</em> 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.</li> + <li><code><meta charset="utf-8"></code>: 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.</li> + <li><code><title></title></code>: 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.</li> + <li><code><body></body></code>: The {{htmlelement("body")}} element. This contains <em>all</em> 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.</li> +</ol> + +<h3 id="Active_learning_Adding_some_features_to_an_HTML_document">Active learning: Adding some features to an HTML document</h3> + +<p>If you want to experiment with writing some HTML on your local computer, you can:</p> + +<ol> + <li>Copy the HTML page example listed above.</li> + <li>Create a new file in your text editor.</li> + <li>Paste the code into the new text file.</li> + <li>Save the file as <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> +</div> + +<p>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:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">So 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:</p> + +<ul> + <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code><h1></code> opening tag and <code></h1></code> closing tag.</li> + <li>Edit the paragraph content to include some text about something you are interested in.</li> + <li>Make any important words stand out in bold by wrapping them inside a <code><strong></code> opening tag and <code></strong></code> closing tag.</li> + <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li> + <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. 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).</li> +</ul> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;This is my page&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h1 { + color: blue; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Whitespace_in_HTML">Whitespace in HTML</h3> + +<p>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> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<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.</p> + +<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2> + +<p>In HTML, the characters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> and <code>&</code> 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?</p> + +<p>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 (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Literal character</th> + <th scope="col">Character reference equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>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> + +<pre class="brush: html"><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></pre> + +<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 <code><p></code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p> + +<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>. 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 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">character encoding is set to UTF-8</a>.</p> +</div> + +<h2 id="HTML_comments">HTML comments</h2> + +<p>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.</p> + +<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code><!--</code> and <code>--></code>, for example:</p> + +<pre class="brush: html"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p> + +<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Summary">Summary</h2> + +<p>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!</p> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="/en-US/docs/Learn/CSS">CSS</a>. 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.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<div></div> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/tr/learn/html/introduction_to_html/index.html b/files/tr/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..ba1a6c4397 --- /dev/null +++ b/files/tr/learn/html/introduction_to_html/index.html @@ -0,0 +1,92 @@ +--- +title: Introduction to HTML +slug: Öğren/HTML/Introduction_to_HTML +tags: + - HTML + - NeedsContent + - NeedsUpdate +translation_of: Learn/HTML/Introduction_to_HTML +--- +<p>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.</p> + +<h2 id="Ön_koşullar">Ön koşullar</h2> + +<p>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.</p> + +<div class="note"> +<p><strong>Not </strong>: Kendi dosyalarınızı oluşturma imkanına sahip olmadığınız bir Bilgisayar/tablet/başka bir cihazda çalışıyorsanız, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi bir çevrimiçi kodlama programında kod örneklerinin çoğunu deneyebilirsiniz.</p> +</div> + +<h2 id="Rehberler">Rehberler</h2> + +<p>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.</p> + +<dl> + <dt> + <h2 id="HTML_ile_başlarken"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">HTML ile başlarken</a></h2> + + <h4 id="Başlamak_HTMLnin_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!"><br> + 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!</h4> + </dt> + <dt> + <h2 id="Kafamın_içinde_ne_var_HTMLde_meta_veriler"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Kafamın içinde ne var? HTML'de meta veriler</a></h2> + </dt> + <dt><br> + Bir HTML belgesinin başı, sayfa yüklendiğinde web tarayıcısında görüntülenmeyen kısımdır. Sayfa {{html element("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.)</dt> + <dd></dd> + <dt> + <h2 id="HTML_metin_temelleri"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML metin temelleri</a></h2> + + <h4 id="HTMLnin_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_HTMLnin_nasıl_kullanılacağı_ele_alınmaktadır."><br> + 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.</h4> + </dt> + <dd></dd> + <dt> + <h2 id="Köprüler_oluşturma"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Köprüler oluşturma</a></h2> + + <h4 id="Köprüler_gerçekten_önemlidir-Webi_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."><br> + 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.</h4> + </dt> + <dt> + <h2 id="Gelişmiş_metin_biçimlendirme"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Gelişmiş metin biçimlendirme</a></h2> + </dt> + <dt><br> + HTML'de, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 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.</dt> + <dd></dd> + <dt> + <h2 id="Belge_ve_web_sitesi_yapısı"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Belge ve web sitesi yapısı</a></h2> + </dt> + <dt><br> + 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.</dt> + <dd></dd> + <dt> + <h2 id="HTML_hata_ayıklama"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML hata ayıklama</a></h2> + </dt> + <dt><br> + 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.</dt> +</dl> + +<h2 id="Değerlendirmeler">Değerlendirmeler</h2> + +<p>Aşağıdaki değerlendirmeler, yukarıdaki kılavuzlarda yer alan HTML temellerini anlamanızı test edecektir.</p> + +<h4 id="Bir_mektubu_işaretleme"><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Bir mektubu işaretleme</a></h4> + +<p><br> + 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.</p> + +<h4 id="İçerik_sayfasını_yapılandırma"><br> + <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">İçerik sayfasını yapılandırma</a></h4> + +<p><br> + 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.</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<dl> + <dt> + <h4 id="Web_okuryazarlığı_temelleri_1"><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web okuryazarlığı temelleri 1</a></h4> + </dt> + <dt><br> + 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.</dt> +</dl> diff --git a/files/tr/learn/index.html b/files/tr/learn/index.html new file mode 100644 index 0000000000..2aece44072 --- /dev/null +++ b/files/tr/learn/index.html @@ -0,0 +1,111 @@ +--- +title: Web Programlama Öğren +slug: Öğren +tags: + - öğren +translation_of: Learn +--- +<div class="summary"> +<p>{{LearnSidebar}}</p> + +<p>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.</p> + +<p>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, <a href="https://developer.mozilla.org/en-US/">MDN kaynağı</a>nın geriye kalanından ya da ön bilgi gerektiren diğer orta veya ileri seviye kaynaklardan öğrenerek kendi yolunuzu çizebilirsiniz.</p> + +<p>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.</p> + +<hr> +<h2 id="Yenilikler_Neler">Yenilikler Neler?</h2> + +<p>Öğ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!</p> + +<p>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 <a href="https://discourse.mozilla.org/c/mdn">Discourse forumu</a>ndan soru sorabilirsiniz.</p> + +<h3 id="Front-end_web_geliştiricisi_mi_olmak_istiyorsunuz">Front-end web geliştiricisi mi olmak istiyorsunuz?</h3> + +<p>Hedefinize ulaşmanız için gereken önemli tüm bilgileri içeren kursu oluşturduk.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Hadi Başlayalım</a></p> +</div> + +<h2 id="Nereden_Başlamalı">Nereden Başlamalı?</h2> + +<ul class="card-grid"> + <li><span>Tamamen Yeniyim:</span> + + <p>Eğer web geliştirimine tamamen yeni iseniz <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Web geliştirmeye başlangıç </a>bölümünden pratik bir şekilde başlangıç yapabilirsiniz.</p> + </li> + <li><span>Bazı Sorularım Var!</span> + <p>Eğer, aklınızda bir takım sorular varsa ve bunlara cevap arıyorsanız <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions">Genel sorular</a> kısmına göz atabilirsiniz.</p> + </li> + <li><span>Temelerin Ötesinde:</span> + <p>Eğer temeller haknda yeterince bilgi sahibi iseniz skıonraki adım {{glossary("HTML")}} ve {{glossary("CSS")}} konularını öğrenmek olabilir. Bunun için <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e Giriş Bölümü</a> ile başlayıp <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">CSS İlk Adımlar</a> etkinliği ile devam edebilirsiniz.</p> + </li> + <li><span>Betik Kodlamaya Geçiş:</span> + <p>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.</p> + </li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: 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.</p> +</div> + +<p>{{LearnBox({"title":"Hızlı öğrenme: Kelime hazinesi"})}}</p> + +<h2 id="Diğer_insanlarla_birlikte_öğren">Diğer insanlarla birlikte öğren</h2> + +<p>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:</p> + +<ul> + <li><a href="http://discourse.webmaker.org/" rel="external">Discourse forum</a>'da akıl hocaları ve öğretmenlerle tanışın ve iletişim kurun.</li> + <li><a href="https://events.webmaker.org/">Etkinlikleri bulun</a> ve Web'i müthiş insanlarla beraber öğrenin.</li> +</ul> + +<h2 id="Bildiklerini_paylaş">Bildiklerini paylaş</h2> + +<p>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, <a href="/en-US/Learn/How_to_contribute">nasıl yardım edebilirim</a>'e bir göz atın, ve sizi bizimle bizimle sohbet etmeniz için <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mail listelerimize</a> ve <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC kanallarına</a> davet ediyoruz. :)</p> + +<dl> + <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt> + <dd>Rehberlik ve proje tabanlı öğrenim ile teknoloji becerilerini öğrenmek için ücretsiz ve açık kurslar</dd> +</dl> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the web</a></li> + <li><a href="/en-US/Learn/Skills">Learn the web</a> + <ol> + <li><a href="https://webmaker.org/en-US/literacy" rel="external">Web Literacy Map</a></li> + <li><a href="/en-US/Learn/Web_Mechanics">Web mechanics</a></li> + <li><a href="/en-US/Learn/Infrastructure">Infrastructure</a></li> + <li><a href="/en-US/Learn/Coding-Scripting">Coding & Scripting</a></li> + <li><a href="/en-US/Learn/Design_and_Accessibility">Design & Accessibility</a></li> + <li><a href="/en-US/Learn/Composing_for_the_web">Writing & planning</a></li> + </ol> + </li> + <li><a href="#">Learn technologies</a> + <ol> + <li><a href="/en-US/Learn/HTML">HTML</a></li> + <li><a href="/en-US/Learn/CSS">CSS</a></li> + <li><a href="/en-US/Learn/JavaScript">JavaScript</a></li> + <li><a href="/en-US/Learn/Python">Python</a></li> + </ol> + </li> + <li><a href="/en-US/Learn/tutorial">Learning tutorials</a> + <ol> + <li><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">How to build a web site?</a></li> + <li><a href="/en-US/Learn/tutorial/Information_Security_Basics">Information security basics</a></li> + </ol> + </li> + <li><a href="http://weblitmapper.webmakerprototypes.org/">Learning resources</a></li> + <li><a href="/en-US/Learn/help">Getting help</a> + <ol> + <li><a href="/en-US/Learn/FAQ">FAQ</a></li> + <li><a href="/en-US/docs/Glossary">Glossary</a></li> + <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Ask your questions</a></li> + <li><a href="https://events.webmaker.org/" rel="external">Meet teachers and mentors</a></li> + </ol> + </li> + <li><a href="/en-US/Learn/How_to_contribute">How to contribute</a></li> +</ol> 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 new file mode 100644 index 0000000000..8cab0bbcf2 --- /dev/null +++ b/files/tr/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,600 @@ +--- +title: Javascript'e ilk giriş +slug: Öğren/JavaScript/First_steps/Javascripte_giris +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<p>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!</p> + +<div class="note"> +<p>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.</p> +</div> + +<h2 id="Thinking_like_a_programmer">Thinking like a programmer</h2> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Example_—_Guess_the_number_game">Example — Guess the number game</h2> + +<p>In this article we'll show you how to build up the simple game you can see below:</p> + +<div class="hidden"> +<h6 id="Top_hidden_code">Top hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>Number guessing game</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>Number guessing game</h1> + <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p> + <div class="form"> <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +<script> + // Your JavaScript goes here + 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; + + 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!!!'; + lowOrHi.textContent = ''; + 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 = ''; + } + + guessSubmit.addEventListener('click', checkGuess); + + 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); + } + + 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; + } +</script> + +</body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Have a go at playing it — familiarize yourself with the game before you move on.</p> + +<p>Let's imagine your boss has given you the following brief for creating this game:</p> + +<blockquote> +<p>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.</p> +</blockquote> + +<p>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:</p> + +<ol> + <li>Generate a random number between 1 and 100.</li> + <li>Record the turn number the player is on. Start it on 1.</li> + <li>Provide the player with a way to guess what the number is.</li> + <li>Once a guess has been submitted first record it somewhere so the user can see their previous guesses.</li> + <li>Next, check whether it is the correct number.</li> + <li>If it is correct: + <ol> + <li>Display congratulations message.</li> + <li>Stop the player from being able to enter more guesses (this would mess the game up).</li> + <li>Display control allowing the player to restart the game.</li> + </ol> + </li> + <li>If it is wrong and the player has turns left: + <ol> + <li>Tell the player they are wrong.</li> + <li>Allow them to enter another guess.</li> + <li>Increment the turn number by 1.</li> + </ol> + </li> + <li>If it is wrong and the player has no turns left: + <ol> + <li>Tell the player it is game over.</li> + <li>Stop the player from being able to enter more guesses (this would mess the game up).</li> + <li>Display control allowing the player to restart the game.</li> + </ol> + </li> + <li>Once the game restarts, make sure the game logic and UI are completely reset, then go back to step 1.</li> +</ol> + +<p>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.</p> + +<h3 id="Initial_setup">Initial setup</h3> + +<p>To begin this tutorial, we'd like you to make a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> file (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>). 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.</p> + +<p>The place where we'll be adding all our code is inside the {{htmlelement("script")}} element at the bottom of the HTML:</p> + +<pre class="brush: html notranslate"><script> + + // Your JavaScript goes here + +</script> +</pre> + +<h3 id="Adding_variables_to_store_our_data">Adding variables to store our data</h3> + +<p>Let's get started. First of all, add the following lines inside your {{htmlelement("script")}} element:</p> + +<pre class="brush: js notranslate">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;</pre> + +<p>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 <code>let</code> (or <code>var</code>) followed by a name for your variable (you'll read more about the difference between the keywords in a <a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">future article</a>). Constants are used to store values that are immutable or can't be changed and are created with the keyword <code>const</code>. 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.</p> + +<p>You can assign a value to your variable or constant with an equals sign (<code>=</code>) followed by the value you want to give it.</p> + +<p>In our example:</p> + +<ul> + <li>The first variable — <code>randomNumber</code> — is assigned a random number between 1 and 100, calculated using a mathematical algorithm.</li> + <li>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 <code><div></code> element, which is itself used to select all three later on for resetting, when we restart the game): + <pre class="brush: html notranslate"><div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> +</div> +</pre> + </li> + <li>The next two constants store references to the form text input and submit button and are used to control submitting the guess later on. + <pre class="brush: html notranslate"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="Submit guess" class="guessSubmit"></pre> + </li> + <li>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).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You'll learn a lot more about variables/constants later on in the course, starting with the <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">next article</a>.</p> +</div> + +<h3 id="Functions">Functions</h3> + +<p>Next, add the following below your previous JavaScript:</p> + +<pre class="brush: js notranslate">function checkGuess() { + alert('I am a placeholder'); +}</pre> + +<p>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 <code>function</code>, followed by a name, with parentheses put after it. After that we put two curly braces (<code>{ }</code>). Inside the curly braces goes all the code that we want to run whenever we call the function.</p> + +<p>When we want to run the code, we type the name of the function followed by the parentheses.</p> + +<p>Let's try that now. Save your code and refresh the page in your browser. Then go into the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>, and enter the following line:</p> + +<pre class="brush: js notranslate">checkGuess();</pre> + +<p>After pressing <kbd>Return</kbd>/<kbd>Enter</kbd>, you should see an alert come up that says "<samp>I am a placeholder</samp>"; we have defined a function in our code that creates an alert whenever we call it.</p> + +<div class="note"> +<p><strong>Note</strong>: You'll learn a lot more about functions <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">later in the course</a>.</p> +</div> + +<h3 id="Operators">Operators</h3> + +<p>JavaScript operators allow us to perform tests, do math, join strings together, and other such things.</p> + +<p>If you haven't already done so, save your code, refresh the page in your browser, and open the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>. Then we can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing <kbd>Return</kbd>/<kbd>Enter</kbd> after each one, and see what results they return.</p> + +<p>First let's look at arithmetic operators, for example:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator</th> + <th scope="col">Name</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>Addition</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>Subtraction</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>Multiplication</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>Division</td> + <td><code>10 / 5</code></td> + </tr> + </tbody> +</table> + +<p>You can also use the <code>+</code> operator to join text strings together (in programming, this is called <em>concatenation</em>). Try entering the following lines, one at a time:</p> + +<pre class="brush: js notranslate">let name = 'Bingo'; +name; +let hello = ' says hello!'; +hello; +let greeting = name + hello; +greeting;</pre> + +<p>There are also some shortcut operators available, called augmented <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">assignment operators</a>. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:</p> + +<pre class="brush: js notranslate">name += ' says hello!';</pre> + +<p>This is equivalent to</p> + +<pre class="brush: js notranslate">name = name + ' says hello!';</pre> + +<p>When we are running true/false tests (for example inside conditionals — see {{anch("Conditionals", "below")}}) we use <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparison operators</a>. For example:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator</th> + <th scope="col">Name</th> + <th scope="col">Example</th> + </tr> + <tr> + <td><code>===</code></td> + <td>Strict equality (is it exactly the same?)</td> + <td> + <pre class="brush: js notranslate"> +5 === 2 + 4 // false +'Chris' === 'Bob' // false +5 === 2 + 3 // true +2 === '2' // false; number versus string +</pre> + </td> + </tr> + <tr> + <td><code>!==</code></td> + <td>Non-equality (is it not the same?)</td> + <td> + <pre class="brush: js notranslate"> +5 !== 2 + 4 // true +'Chris' !== 'Bob' // true +5 !== 2 + 3 // false +2 !== '2' // true; number versus string +</pre> + </td> + </tr> + <tr> + <td><code><</code></td> + <td>Less than</td> + <td> + <pre class="brush: js notranslate"> +6 < 10 // true +20 < 10 // false</pre> + </td> + </tr> + <tr> + <td><code>></code></td> + <td>Greater than</td> + <td> + <pre class="brush: js notranslate"> +6 > 10 // false +20 > 10 // true</pre> + </td> + </tr> + </thead> +</table> + +<h3 id="Conditionals">Conditionals</h3> + +<p>Returning to our <code>checkGuess()</code> 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.</p> + +<p>At this point, replace your current <code>checkGuess()</code> function with this version instead:</p> + +<pre class="brush: js notranslate">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(); +}</pre> + +<p>This is a lot of code — phew! Let's go through each section and explain what it does.</p> + +<ul> + <li>The first line (line 2 above) declares a variable called <code>userGuess</code> and sets its value to the current value entered inside the text field. We also run this value through the built-in <code>Number()</code> constructor, just to make sure the value is definitely a number.</li> + <li>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 <code>if</code>, then some parentheses, then some curly braces. Inside the parentheses we include a test. If the test returns <code>true</code>, 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 <code>guessCount</code> variable is equal to <code>1</code> (i.e. whether this is the player's first go or not): + <pre class="brush: js notranslate">guessCount === 1</pre> + If it is, we make the guesses paragraph's text content equal to "<samp>Previous guesses: </samp>". If not, we don't.</li> + <li>Line 6 appends the current <code>userGuess</code> value onto the end of the <code>guesses</code> paragraph, plus a blank space so there will be a space between each guess shown.</li> + <li>The next block (lines 8–24 above) does a few checks: + <ul> + <li>The first <code>if(){ }</code> checks whether the user's guess is equal to the <code>randomNumber</code> 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 <code>setGameOver()</code>, which we'll discuss later.</li> + <li>Now we've chained another test onto the end of the last one using an <code>else if(){ }</code> 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.</li> + <li>The final block chained onto the end of this code (the <code>else { }</code>) 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.</li> + </ul> + </li> + <li>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 <code>guessCount</code> variable so the player uses up their turn (<code>++</code> 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.</li> +</ul> + +<h3 id="Events">Events</h3> + +<p>At this point we have a nicely implemented <code>checkGuess()</code> 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 <strong>event</strong>. 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 <strong>event listeners</strong>, and the blocks of code that run in response to the event firing are called <strong>event handlers</strong>.</p> + +<p>Add the following line below your <code>checkGuess()</code> function:</p> + +<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> + +<p>Here we are adding an event listener to the <code>guessSubmit</code> button. This is a method that takes two input values (called <em>arguments</em>) — the type of event we are listening out for (in this case <code>click</code>) as a string, and the code we want to run when the event occurs (in this case the <code>checkGuess()</code> function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p> + +<p>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 <code>setGameOver()</code> function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.</p> + +<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3> + +<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p> + +<pre class="brush: js notranslate">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); +}</pre> + +<ul> + <li>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li> + <li>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.</li> + <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li> +</ul> + +<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p> + +<pre class="brush: js notranslate">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; +}</pre> + +<p>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:</p> + +<ul> + <li>Puts the <code>guessCount</code> back down to 1.</li> + <li>Empties all the text out of the information paragraphs. We select all paragraphs inside <code><div class="resultParas"></div></code>, then loop through each one, setting their <code>textContent</code> to <code>''</code> (an empty string).</li> + <li>Removes the reset button from our code.</li> + <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li> + <li>Removes the background color from the <code>lastResult</code> paragraph.</li> + <li>Generates a new random number so that you are not just guessing the same number again!</li> +</ul> + +<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p> + +<p>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.</p> + +<h3 id="Loops">Loops</h3> + +<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> 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.</p> + +<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p> + +<pre class="brush: js notranslate">for (let i = 1 ; i < 21 ; i++) { console.log(i) }</pre> + +<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p> + +<ol> + <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li> + <li><strong>A condition</strong>: Here we have specified <code>i < 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li> + <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li> +</ol> + +<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p> + +<pre class="brush: js notranslate">const resetParas = document.querySelectorAll('.resultParas p'); +for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>This code creates a variable containing a list of all the paragraphs inside <code><div class="resultParas"></code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p> + +<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3> + +<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>let resetButton;</code> line near the top of your JavaScript, then save your file:</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>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.</p> + +<p>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.</p> + +<p>In this particular case, we first created a <code>guessField</code> 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:</p> + +<pre class="brush: js notranslate">const guessField = document.querySelector('.guessField');</pre> + +<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p> + +<p>Because <code>guessField</code> 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 <code>focus()</code>, so we can now use this line to focus the text input:</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> constant contains a reference to a {{htmlelement("p")}} element, and the <code>guessCount</code> variable contains a number.</p> + +<h3 id="Playing_with_browser_objects">Playing with browser objects</h3> + +<p>Let's play with some browser objects a bit.</p> + +<ol> + <li>First of all, open up your program in a browser.</li> + <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li> + <li>Type <code>guessField</code> 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!</li> + <li>Now type in the following: + <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> + The <code>value</code> 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!</li> + <li>Now try typing <code>guesses</code> into the console and pressing return. The console shows you that the variable contains a {{htmlelement("p")}} element.</li> + <li>Now try entering the following line: + <pre class="brush: js notranslate">guesses.value</pre> + The browser returns <code>undefined</code>, because paragraphs don't have the <code>value</code> property.</li> + <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: + <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> + </li> + <li>Now for some fun stuff. Try entering the below lines, one by one: + <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</pre> + Every element on a page has a <code>style</code> 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.</li> +</ol> + +<h2 id="Finished_for_now...">Finished for now...</h2> + +<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/tr/learn/javascript/first_steps/index.html b/files/tr/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..cde2569c69 --- /dev/null +++ b/files/tr/learn/javascript/first_steps/index.html @@ -0,0 +1,61 @@ +--- +title: JavaScript First Steps +slug: Öğren/JavaScript/First_steps +tags: + - türkçe +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>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:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basic JavaScript introduction</a>).</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt> + <dd>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!</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>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.</dd> +</dl> diff --git a/files/tr/learn/javascript/index.html b/files/tr/learn/javascript/index.html new file mode 100644 index 0000000000..665e95cc85 --- /dev/null +++ b/files/tr/learn/javascript/index.html @@ -0,0 +1,56 @@ +--- +title: JavaScript +slug: Öğren/JavaScript +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{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.</p> + +<h2 id="Öğrenme_yolu">Öğrenme yolu</h2> + +<p>JavaScript'i öğrenmek ilgili teknolojiler olan <a href="/tr/docs/Learn/HTML">HTML</a> ve <a href="/tr/docs/Learn/CSS">CSS</a>'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:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Web'e Başlangıç</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">HTML'e Giriş</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS'e Giriş</a></li> +</ul> + +<p>Ayrıca diğer programlama dilleriyle önceden edindiğiniz tecrübelerin size yardımı dokunacaktır.</p> + +<p>JavaScript'in temellerine aşina olduktan sonra, daha ileri seviyedeki konuları öğrenmeye başlayabilirsiniz, örneğin:</p> + +<ul> + <li>Derinlemesine JavaScript, bizim <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript kılavuzu</a>muzde öğretildiği gibi.</li> + <li><a href="/en-US/docs/Web/API">HTML5 UPAs (Uygulama Programlama Ayayüzleri)</a></li> +</ul> + +<h2 id="Modüller">Modüller</h2> + +<p>Bu konu, önerilen çalışma sırasıyla, aşağıdaki modülleri içerir.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript ilk adımlar</a></dt> + <dd>İ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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript yapı taşları</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript nesnelerine giriş</a></dt> + <dd>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.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous">Asenkron JavaScript</a></dt> + <dd> + <p>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.</p> + </dd> + <dt></dt> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">İstemci tarafı web API'leri</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt> + <dd>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.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/tr/learn/javascript/objects/basics/index.html b/files/tr/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..bf6e7892e0 --- /dev/null +++ b/files/tr/learn/javascript/objects/basics/index.html @@ -0,0 +1,257 @@ +--- +title: JavaScript object basics +slug: Öğren/JavaScript/Objeler/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Gereksinimler:</th> + <td>Temel bilgisayar okuryazarlığı, temel HMTL ve CSS bilgisi ve JavaScript temelleri (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">İlk adımlar </a>ve <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">yapı taşları</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<h2 id="Nesne_temelleri">Nesne temelleri</h2> + +<p>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.</p> + +<p>Başlamak için <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> 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 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">geliştirici JavaScript konsolunu</a> açık ve komutları yazmaya hazır şekilde tutun.</p> + +<p>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.</p> + +<pre class="brush: js">const person = {};</pre> + +<p>Şimdi tarayıcınızın <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">JavaScript konsolunu</a> açın, <code>person</code> yazın, ve <kbd>Enter</kbd>/<kbd>Return </kbd>tuşlarına basın. Aşağıdaki satırlara benzer açıklamalar ile karşılaşacaksınız. </p> + +<pre class="brush: js">[object Object] +Object { } +{ } +</pre> + +<p>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:</p> + +<pre class="brush: js">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] + '.'); + } +}; +</pre> + +<p>After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:</p> + +<pre class="brush: js">person.name +person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting()</pre> + +<p>You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!</p> + +<div class="note"> +<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). 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.</p> +</div> + +<p>So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. <code>name</code> and <code>age</code> above), and a value (e.g. <code>['Bob', 'Smith']</code> and <code>32</code>). 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:</p> + +<pre class="brush: js">const objectName = { + member1Name: member1Value, + member2Name: member2Value, + member3Name: member3Value +};</pre> + +<p>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 <strong>properties</strong>. The last two items are functions that allow the object to do something with that data, and are referred to as the object's <strong>methods</strong>.</p> + +<p>An object like this is referred to as an <strong>object literal</strong> — 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.</p> + +<p>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.</p> + +<h2 id="Dot_notation">Dot notation</h2> + +<p>Above, you accessed the object's properties and methods using <strong>dot notation</strong>. The object name (person) acts as the <strong>namespace</strong> — it must be entered first to access anything <strong>encapsulated</strong> 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:</p> + +<pre class="brush: js">person.age +person.interests[1] +person.bio()</pre> + +<h3 id="Sub-namespaces">Sub-namespaces</h3> + +<p>It is even possible to make the value of an object member another object. For example, try changing the name member from</p> + +<pre class="brush: js">name: ['Bob', 'Smith'],</pre> + +<p>to</p> + +<pre class="brush: js">name : { + first: 'Bob', + last: 'Smith' +},</pre> + +<p>Here we are effectively creating a <strong>sub-namespace</strong>. 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:</p> + +<pre class="brush: js">person.name.first +person.name.last</pre> + +<p><strong>Important</strong>: At this point you'll also need to go through your method code and change any instances of</p> + +<pre class="brush: js">name[0] +name[1]</pre> + +<p>to</p> + +<pre class="brush: js">name.first +name.last</pre> + +<p>Otherwise your methods will no longer work.</p> + +<h2 id="Bracket_notation">Bracket notation</h2> + +<p>There is another way to access object properties — using bracket notation. Instead of using these:</p> + +<pre class="brush: js">person.age +person.name.first</pre> + +<p>You can use</p> + +<pre class="brush: js">person['age'] +person['name']['first']</pre> + +<p>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 <strong>associative arrays</strong> — they map strings to values in the same way that arrays map numbers to values.</p> + +<h2 id="Setting_object_members">Setting object members</h2> + +<p>So far we've only looked at retrieving (or <strong>getting</strong>) object members — you can also <strong>set</strong> (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:</p> + +<pre class="brush: js">person.age = 45; +person['name']['last'] = 'Cratchit';</pre> + +<p>Try entering the above lines, and then getting the members again to see how they've changed, like so:</p> + +<pre class="brush: js">person.age +person['name']['last']</pre> + +<p>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:</p> + +<pre class="brush: js">person['eyes'] = 'hazel'; +person.farewell = function() { alert("Bye everybody!"); }</pre> + +<p>You can now test out your new members:</p> + +<pre class="brush: js">person['eyes'] +person.farewell()</pre> + +<p>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:</p> + +<pre class="brush: js">let myDataName = nameInput.value; +let myDataValue = nameValue.value;</pre> + +<p>We could then add this new member name and value to the <code>person</code> object like this:</p> + +<pre class="brush: js">person[myDataName] = myDataValue;</pre> + +<p>To test this, try adding the following lines into your code, just below the closing curly brace of the <code>person</code> object:</p> + +<pre class="brush: js">let myDataName = 'height'; +let myDataValue = '1.75m'; +person[myDataName] = myDataValue;</pre> + +<p>Now try saving and refreshing, and entering the following into your text input:</p> + +<pre class="brush: js">person.height</pre> + +<p>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.</p> + +<h2 id="What_is_this">What is "this"?</h2> + +<p>You may have noticed something slightly strange in our methods. Look at this one for example:</p> + +<pre class="brush: js">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p>You are probably wondering what "this" is. The <code>this</code> keyword refers to the current object the code is being written inside — so in this case <code>this</code> is equivalent to <code>person</code>. So why not just write <code>person</code> instead? As you'll see in the <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> article, when we start creating constructors and so on, <code>this</code> is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different <code>person</code> object instances may have different names, but we want to use their own name when saying their greeting).</p> + +<p>Let's illustrate what we mean with a simplified pair of person objects:</p> + +<pre class="brush: js">const person1 = { + name: 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +const person2 = { + name: 'Deepti', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>In this case, <code>person1.greeting()</code> outputs "Hi! I'm Chris."; <code>person2.greeting()</code> 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, <code>this</code> 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.</p> + +<h2 id="Youve_been_using_objects_all_along">You've been using objects all along</h2> + +<p>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.</p> + +<p>So when you used string methods like:</p> + +<pre class="brush: js">myString.split(',');</pre> + +<p>You were using a method available on an instance of the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> class. Every time you create a string in your code, that string is automatically created as an instance of <code>String</code>, and therefore has several common methods and properties available on it.</p> + +<p>When you accessed the document object model using lines like this:</p> + +<pre class="brush: js">const myDiv = document.createElement('div'); +const myVideo = document.querySelector('video');</pre> + +<p>You were using methods available on an instance of the <code><a href="/en-US/docs/Web/API/Document">Document</a></code> class. For each webpage loaded, an instance of <code>Document</code> is created, called <code>document</code>, 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.</p> + +<p>The same is true of pretty much any other built-in object or API you've been using — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, and so on.</p> + +<p>Note that built in objects and APIs don't always create object instances automatically. As an example, the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — 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:</p> + +<pre class="brush: js">const myNotification = new Notification('Hello!');</pre> + +<p>Again, we'll look at constructors in a later article.</p> + +<div class="note"> +<p><strong>Note</strong>: It is useful to think about the way objects communicate as <strong>message passing</strong> — 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.</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>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 <code>person</code> 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.</p> + +<p>In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.</p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> diff --git a/files/tr/learn/javascript/objects/index.html b/files/tr/learn/javascript/objects/index.html new file mode 100644 index 0000000000..d90a7e81a4 --- /dev/null +++ b/files/tr/learn/javascript/objects/index.html @@ -0,0 +1,53 @@ +--- +title: Javascript Nesnelerine Giriş +slug: Öğren/JavaScript/Objeler +tags: + - Başlangıç + - Değerlendirme + - JavaScript + - Kılavuz + - Makale + - Nesneler + - Objeler + - Rehber + - Yeni başlayan + - öğren +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<h2 id="Ön_Koşullar">Ön Koşullar</h2> + +<p>Bu konuya başlamadan önce HTML ve CSS'ye aşina olmalısınız. Javascript'e başlamadan önce <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a> ve <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> konularına çalışmanız önerilir.</p> + +<p>Javascript nesnelerine ayrıntılı olarak bakmadan önce Javascript Temelleri hakkında da bilgi sahibi olmalısınız. Bu konudan önce <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> ve <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> konularına bakın.</p> + +<div class="note"> +<p><strong>Not</strong>: Eğer kendi dosyalarınızı oluşturma özelliği olmayan bir bilgisayar/tablet/diğer cihazda çalışıyorsanız <a href="http://jsbin.com/">JSBin</a> veya <a href="https://thimble.mozilla.org/">Thimble</a> gibi çoğu kod örneğini deneyebileceğiniz online kodlama programlarını deneyebilirsiniz.</p> +</div> + +<h2 id="Rehberler">Rehberler</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">Nesne Temelleri</a></dt> + <dd>İ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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Yeni başlayanlar için nesneye dayalı JavaScript</a></dt> + <dd>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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Nesne prototipleri</a></dt> + <dd>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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance">JavaScript'te kalıtım</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">JSON verileri ile çalışmak</a></dt> + <dd>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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Nesne inşa etme uygulaması</a></dt> + <dd>Ö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.</dd> +</dl> + +<h2 id="Değerlendirmeler">Değerlendirmeler</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Zıplayan toplar demosuna özellikler ekleme</a></dt> + <dd>Bu değerlendirmede sizden, önceki makaledeki zıplayan toplar demosunu başlangıç noktası olarak almak ve ona ilginç özellikler eklemeniz bekleniyor.</dd> +</dl> diff --git a/files/tr/learn/server-side/django/authentication/index.html b/files/tr/learn/server-side/django/authentication/index.html new file mode 100644 index 0000000000..516efc7d1d --- /dev/null +++ b/files/tr/learn/server-side/django/authentication/index.html @@ -0,0 +1,677 @@ +--- +title: 'Django Tutorial - 8. Bölüm: Kullanıcı doğrulama ve izinler' +slug: Öğren/Server-side/Django/Authentication +translation_of: Learn/Server-side/Django/Authentication +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</div> + +<p class="summary">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, <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Yerel Kütüphane</a> 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön şartlar:</th> + <td>Complete all previous tutorial topics, up to and including <a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a>.</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Kullanıcı doğrulama ve izinlerin nasıl kurulacağı ve kullanılacağını anlamak.</td> + </tr> + </tbody> +</table> + +<h2 id="Genel_bakış">Genel bakış</h2> + +<p>Django provides an authentication and authorisation ("permission") system, built on top of the session framework discussed in the <a href="/en-US/docs/Learn/Server-side/Django/Sessions">previous tutorial</a>, that allows you to verify user credentials and define what actions each user is allowed to perform. The framework includes built-in models for <code>Users</code> and <code>Groups</code> (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.</p> + +<div class="note"> +<p><strong>Note</strong>: 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).</p> +</div> + +<p>In this tutorial we'll show you how to enable user authentication in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> 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.</p> + +<p>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.</p> + +<p>We'll also show you how to create permissions, and check on login status and permissions in both views and templates.</p> + +<h2 id="Doğrulamayı_etkinleştirme">Doğrulamayı etkinleştirme</h2> + +<p>Doğrulama <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">iskelet websitesini oluşturduğumuzda</a> (tutorial 2'de) otomatik olarak etkinleştirilmiştir, bu yüzden bu noktada daha fazla bir şey yapmanız gerekmemektedir.</p> + +<div class="note"> +<p><strong>Not</strong>: <code>django-admin startproject</code> komutunu kullarak uygulamayı oluşturduğumuzda gerekli yapılandırmanın hepsi yapıldı. <code>python manage.py migrate</code>komutunu çağırdığımızda, kullanıcılar ve izinler için veri tabanı tabloları oluşturuldu.</p> +</div> + +<p>Aşağıda gösterildiği gibi, yapılandırma, proje dosyasının (<strong>locallibrary/locallibrary/settings.py</strong>) <code>INSTALLED_APPS</code> ve <code>MIDDLEWARE</code> kısımlarında kurulmuştur:</p> + +<pre class="brush: python">INSTALLED_APPS = [ + ... +<strong> 'django.contrib.auth', </strong>#Core authentication framework and its default models. +<strong> 'django.contrib.contenttypes', #</strong>Django content type system (allows permissions to be associated with models). + .... + +MIDDLEWARE = [ + ... +<strong> 'django.contrib.sessions.middleware.SessionMiddleware',</strong> #Manages sessions across requests + ... +<strong> 'django.contrib.auth.middleware.AuthenticationMiddleware',</strong> #Associates users with requests using sessions. + .... +</pre> + +<h2 id="Kullanıcılar_ve_gruplar_oluşturma">Kullanıcılar ve gruplar oluşturma</h2> + +<p>Tutorial 4'te <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django admin sitesi</a>'ne baktığımızda zaten ilk kullanıcınızı oluşturmuştunuz (<code>python manage.py createsuperuser</code> 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. Y<span class="translation">apmanın en hızlı yollarından biri olduğu için,</span> <em>locallibrary</em> gruplarımızı ve websitesi oturumlarımızı oluşturmak için admin sitesini kullanıyor olacağız.</p> + +<div class="note"> +<p>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).</p> + +<pre class="brush: python">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() +</pre> +</div> + +<p>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.</p> + +<p>Geliştirme sunucusunu başlatın ve yerel web tarayıcınızda admin sitesine gidin (<a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin/</a>). 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. <strong>Authentication and Authorisation</strong> kısmından, mevcut kayıtlarını görmek için <strong>Users</strong> veya <strong>Groups</strong> bağlantılarına tıklayabilirsiniz.</p> + +<p><img alt="Admin site - add groups or users" src="https://mdn.mozillademos.org/files/14091/admin_authentication_add.png" style="border-style: solid; border-width: 1px; display: block; height: 364px; margin: 0px auto; width: 661px;"></p> + +<p>İlk olarak kütüphane üyelerimiz için yeni bir grup oluşturalım.</p> + +<ol> + <li>Yeni bir <em>Group</em> oluşturmak için <strong>Add</strong> düğmesine (Group'un yanındaki) tıklayın; grup için <strong>Name</strong> kısmına "Library Members" girin.<img alt="Admin site - add group" src="https://mdn.mozillademos.org/files/14093/admin_authentication_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 561px; margin: 0px auto; width: 800px;"></li> + <li>Grup için herhangi bir izne ihtiyacımız yok, bu yüzden yalnızca <strong>SAVE</strong> düğmesine basın (sizi gruplar listesine götürecek).</li> +</ol> + +<p>Şimdi yeni bir kullanıcı oluşturalım:</p> + +<ol> + <li>Admin sitesinin anasayfasına geri gidin.</li> + <li><em>Add user</em> diyaloğunu açmak için <em>Users</em>'ın yanındaki <strong>Add</strong> düğmesine tıklayın.<img alt="Admin site - add user pt1" src="https://mdn.mozillademos.org/files/14095/admin_authentication_add_user_prt1.png" style="border-style: solid; border-width: 1px; display: block; height: 409px; margin: 0px auto; width: 800px;"></li> + <li>Test kullanıcınız için uygun bir <strong>Username</strong> ve <strong>Password</strong>/<strong>Password confirmation</strong> girin.</li> + <li>Kullanıcıyı oluşturmak için <strong>SAVE</strong> düğmesine basın.<br> + <br> + Admin sitesi yeni kullanıcıyı oluşturacak ve hemen sizi <strong>username</strong>'inizi değiştirebileceğinz ve User modelin isteğe bağlı alanlarına bilgi ekleyebileceğiniz bir <em>Change user</em> ekranına götürecektir. Bu alanlar ad, soyad, e-posta adresi, kullanıcı durumu ve izinleri (yalnızca <strong>Active</strong> 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).<img alt="Admin site - add user pt2" src="https://mdn.mozillademos.org/files/14097/admin_authentication_add_user_prt2.png" style="border-style: solid; border-width: 1px; display: block; height: 635px; margin: 0px auto; width: 800px;"></li> + <li><em>Groups</em> kısmında, select <strong>Library Member</strong> group from the list of <em>Available groups</em>, and then press the<strong> right-arrow</strong> between the boxes to move it into the <em>Chosen groups</em> box.<img alt="Admin site - add user to group" src="https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 414px; margin: 0px auto; width: 933px;"></li> + <li>We don't need to do anything else here, so just select <strong>SAVE</strong> again, to go to the list of users.</li> +</ol> + +<p>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).</p> + +<div class="note"> +<p><strong>Note</strong>: You should try creating another library member user. Also, create a group for Librarians, and add a user to that too!</p> +</div> + +<h2 id="Doğrulama_view'lerinizi_kurma">Doğrulama view'lerinizi kurma</h2> + +<p>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!</p> + +<p>In this section we show how to integrate the default system into the <em>LocalLibrary</em> website and create the templates. We'll put them in the main project URLs.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<div class="note"> +<p><strong>Note: </strong>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!</p> +</div> + +<h3 id="Proje_URL'leri">Proje URL'leri</h3> + +<p>Add the following to the bottom of the project urls.py file (<strong>locallibrary/locallibrary/urls.py</strong>) file:</p> + +<pre class="brush: python">#Add Django site authentication urls (for login, logout, password management) +urlpatterns += [ + url(r'^accounts/', include('django.contrib.auth.urls')), +] +</pre> + +<p>Navigate to the <a href="http://127.0.0.1:8000/accounts/">http://127.0.0.1:8000/accounts/</a> 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:</p> + +<div class="note"> +<p><strong>Note: </strong>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.</p> +</div> + +<div class="note"> +<pre class="brush: python">^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']</pre> +</div> + +<p>Now try to navigate to the login URL (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>). This will fail again, but with an error that tells you that we're missing the required template (<strong>registration/login.html</strong>) on the template search path. You'll see the following lines listed in the yellow section up the top:</p> + +<pre class="brush: python">Exception Type: TemplateDoesNotExist +Exception Value: <strong>registration/login.html</strong></pre> + +<p>The next step is to create a registration directory on the search path and then add the <strong>login.html</strong> file.</p> + +<h3 id="Şablon_dizini">Şablon dizini</h3> + +<p>The urls (and implicitly views) that we just added expect to find their associated templates in a directory <strong>/registration/</strong> somewhere in the templates search path.</p> + +<p>For this site we'll put our HTML pages in the <strong>templates/registration/</strong> directory. This directory should be in your project root directory, i.e the same directory as as the <strong>catalog</strong> and <strong>locallibrary</strong> folders). Please create these folders now.</p> + +<div class="note"> +<p><strong>Note:</strong> Your folder structure should now look like the below:<br> + locallibrary (django project folder)<br> + |_catalog<br> + |_locallibrary<br> + |_templates <strong>(new)</strong><br> + |_registration</p> +</div> + +<p>To make these directories visible to the template loader (i.e. to put this directory in the template search path) open the project settings (<strong>/locallibrary/locallibrary/settings.py</strong>), and update the <code>TEMPLATES</code> section's <code>'DIRS'</code> line as shown.</p> + +<pre class="brush: python">TEMPLATES = [ + { + ... +<strong> 'DIRS': ['./templates',],</strong> + 'APP_DIRS': True, + ... +</pre> + +<h3 id="Login_template">Login template</h3> + +<div class="warning"> +<p><strong>Important</strong>: 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!</p> +</div> + +<p>Create a new HTML file called /<strong>locallibrary/templates/registration/login.html</strong>. give it the following contents:</p> + +<pre class="brush: html">{% 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 %}</pre> + +<p id="sect1">This template shares some similarities with the ones we've seen before — it extends our base template and overrides the <code>content</code> 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.</p> + +<p>Navigate back to the login page (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>) once you've saved your template, and you should see something like this:</p> + +<p><img alt="Library login page v1" src="https://mdn.mozillademos.org/files/14101/library_login.png" style="border-style: solid; border-width: 1px; display: block; height: 173px; margin: 0px auto; width: 441px;"></p> + +<p>If you try to login that will succeed and you'll be redirected to another page (by default this will be <a href="http://127.0.0.1:8000/accounts/profile/">http://127.0.0.1:8000/accounts/profile/</a>). 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!</p> + +<p>Open the project settings (<strong>/locallibrary/locallibrary/settings.py</strong>) and add the text below to the bottom. Now when you login you should be redirected to the site home page by default.</p> + +<pre class="brush: python"># Redirect to home URL after login (Default redirects to /accounts/profile/) +LOGIN_REDIRECT_URL = '/' +</pre> + +<h3 id="Logout_template">Logout template</h3> + +<p>If you navigate to the logout url (<a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a>) then you'll see some odd behaviour — your user will be logged out sure enough, but you'll be taken to the <strong>Admin</strong> 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 <code>is_staff</code> permission).</p> + +<p>Create and open /<strong>locallibrary/templates/registration/logged_out.html</strong>. Copy in the text below:</p> + +<pre class="brush: html">{% extends "base_generic.html" %} + +{% block content %} +<p>Logged out!</p> + +<a href="{% url 'login'%}">Click here to login again.</a> +{% endblock %}</pre> + +<p>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:</p> + +<p><img alt="Library logout page v1" src="https://mdn.mozillademos.org/files/14103/library_logout.png" style="border-style: solid; border-width: 1px; display: block; height: 169px; margin: 0px auto; width: 385px;"></p> + +<h3 id="Password_reset_templates">Password reset templates</h3> + +<p>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.</p> + +<p>The following templates can be used as a starting point.</p> + +<h4 id="Password_reset_form">Password reset form</h4> + +<p>This is the form used to get the user's email address (for sending the password reset email). Create <strong>/locallibrary/templates/registration/password_reset_form.html</strong>, and give it the following contents:</p> + +<pre class="brush: html">{% 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 %} +</pre> + +<h4 id="Password_reset_done">Password reset done</h4> + +<p>This form is displayed after your email address has been collected. Create <strong>/locallibrary/templates/registration/password_reset_done.html</strong>, and give it the following contents:</p> + +<pre class="brush: html">{% 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 %} +</pre> + +<h4 id="Password_reset_email">Password reset email</h4> + +<p>This template provides the text of the HTML email containing the reset link that we will send to users. Create <strong>/locallibrary/templates/registration/password_reset_email.html</strong>, and give it the following contents:</p> + +<pre class="brush: html">Someone asked for password reset for email \{{ email }}. Follow the link below: +\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %} +</pre> + +<h4 id="Password_reset_confirm">Password reset confirm</h4> + +<p>This page is where you enter your new password after clicking the link in the password-reset email. Create <strong>/locallibrary/templates/registration/password_reset_confirm.html</strong>, and give it the following contents:</p> + +<pre class="brush: html">{% 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 %} +</pre> + +<h4 id="Password_reset_complete">Password reset complete</h4> + +<p>This is the last password-reset template, which is displayed to notify you when the password reset has succeeded. Create <strong>/locallibrary/templates/registration/password_reset_complete.html</strong>, and give it the following contents:</p> + +<pre class="brush: html">{% extends "base_generic.html" %} +{% block content %} + +<h1>The password has been changed!</h1> +<p><a href="{% url 'login' %}">log in again?</a></p> + +{% endblock %}</pre> + +<h3 id="Testing_the_new_authentication_pages">Testing the new authentication pages</h3> + +<p>Now that you've added the URL configuration and created all these templates, the authentication pages should now just work!</p> + +<p>You can test the new authentication pages by attempting to login and then logout your superuser account using these URLs:</p> + +<ul> + <li><a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a></li> + <li><a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a></li> +</ul> + +<p>You'll be able to test the password reset functionality from the link in the login page. <strong>Be aware that Django will only send reset emails to addresses (users) that are already stored in its database!</strong></p> + +<div class="note"> +<p><strong>Note</strong>: The password reset system requires that your website supports email, which is beyond the scope of this article, so this part <strong>won't work yet</strong>. 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).</p> + +<pre class="brush: python">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' +</pre> + +<p>For more information, see <a href="https://docs.djangoproject.com/en/1.10/topics/email/">Sending email</a> (Django docs).</p> +</div> + +<h2 id="Testing_against_authenticated_users">Testing against authenticated users</h2> + +<p>This section looks at what we can do to selectively control content the user sees based on whether they are logged in or not.</p> + +<h3 id="Testing_in_templates">Testing in templates</h3> + +<p>You can get information about the currently logged in user in templates with the <code>\{{ user }}</code> template variable (this is added to the template context by default when you set up the project as we did in our skeleton).</p> + +<p>Typically you will first test against the <code>\{{ user.is_authenticated }}</code> 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.</p> + +<p>Open the base template (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) and copy the following text into the <code>sidebar</code> block, immediately before the <code>endblock</code> template tag.</p> + +<pre class="brush: html"> <ul class="sidebar-nav"> + + ... + + <strong>{% if user.is_authenticated %}</strong> + <li>User: <strong>\{{ user.get_username }}</strong></li> + <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li> + <strong>{% else %}</strong> + <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li> + <strong>{% endif %} </strong> + </ul></pre> + +<p>As you can see, we use <code>if</code>-<code>else</code>-<code>endif</code> template tags to conditionally display text based on whether <code>\{{ user.is_authenticated }}</code> is true. If the user is authenticated then we know that we have a valid user, so we call <strong>\{{ user.get_username }} </strong>to display their name.</p> + +<p>We create the login and logout link URLs using the <code>url</code> template tag and the names of the respective URL configurations. Note also how we have appended <code>?next=\{{request.path}}</code> to the end of the URLs. What this does is add a URL parameter <font face="Consolas, Liberation Mono, Courier, monospace">next</font> containing the address (URL) of the <em>current</em> page, to the end of the linked URL. After the user has successfully logged in/out, the views will use this "<code>next</code>" value to redirect the user back to the page where they first clicked the login/logout link.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h3 id="Testing_in_views">Testing in views</h3> + +<p>If you're using function-based views, the easiest way to restrict access to your functions is to apply the <code>login_required</code> 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 (<code>settings.LOGIN_URL</code>), passing the current absolute path as the <code>next</code> URL parameter. If the user succeeds in logging in then they will be returned back to this page, but this time authenticated.</p> + +<pre class="brush: python">from django.contrib.auth.decorators import login_required + +@login_required +def my_view(request): + ...</pre> + +<div class="note"> +<p><strong>Note:</strong> You can do the same sort of thing manually by testing on <code>request.user.is_authenticated</code>, but the decorator is much more convenient!</p> +</div> + +<p>Similarly, the easiest way to restrict access to logged-in users in your class-based views is to derive from <code>LoginRequiredMixin</code>. You need to declare this mixin first in the super class list, before the main view class.</p> + +<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin + +class MyView(LoginRequiredMixin, View): + ...</pre> + +<p>This has exactly the same redirect behaviour as the <code>login_required</code> decorator. You can also specify an alternative location to redirect the user to if they are not authenticated (<code>login_url</code>), and a URL parameter name instead of "<code>next</code>" to insert the current absolute path (<code>redirect_field_name</code>).</p> + +<pre class="brush: python">class MyView(LoginRequiredMixin, View): + login_url = '/login/' + redirect_field_name = 'redirect_to' +</pre> + +<p>For additional detail, check out the <a href="https://docs.djangoproject.com/en/1.10/topics/auth/default/#limiting-access-to-logged-in-users">Django docs here</a>.</p> + +<h2 id="Example_—_listing_the_current_user's_books">Example — listing the current user's books</h2> + +<p>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.</p> + +<p>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 <code>BookInstance</code> model to support the concept of borrowing and use the Django Admin application to loan a number of books to our test user.</p> + +<h3 id="Models">Models</h3> + +<p>First we're going to have to make it possible for users to have a <code>BookInstance</code> on loan (we already have a <code>status</code> and a <code>due_back</code> date, but we don't yet have any association between this model and a User. We'll create one using a <code>ForeignKey</code> (one-to-many) field. We also need an easy mechanism to test whether a loaned book is overdue.</p> + +<p>Open <strong>catalog/models.py</strong>, and import the <code>User</code> model from <code>django.contrib.auth.models</code> (add this just below the previous import line at the top of the file, so <code>User</code> is available to subsequent code that makes use of it):</p> + +<pre class="brush: python">from django.contrib.auth.models import User +</pre> + +<p>Next add the <code>borrower</code> field to the <code>BookInstance</code> model:</p> + +<pre class="brush: python">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True) +</pre> + +<p>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.</p> + +<pre class="brush: python">from datetime import date + +@property +def is_overdue(self): + if self.due_back and date.today() > self.due_back: + return True + return False</pre> + +<div class="note"> +<p><strong>Note</strong>: We first verify whether <code>due_back</code> is empty before making a comparison. An empty <code>due_back</code> 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!</p> +</div> + +<p>Now that we've updated our models, we'll need to make fresh migrations on the project and then apply those migrations:</p> + +<pre class="brush: bash">python3 manage.py makemigrations +python3 manage.py migrate +</pre> + +<h3 id="Admin">Admin</h3> + +<p>Now open <strong>catalog/admin.py</strong>, and add the <code>borrower</code> field to the <code>BookInstanceAdmin</code> class in both the <code>list_display</code> and the <code>fieldsets</code> as shown below. This will make the field visible in the Admin section, so that we can assign a <code>User</code> to a <code>BookInstance</code> when needed.</p> + +<pre class="brush: python">@admin.register(BookInstance) +class BookInstanceAdmin(admin.ModelAdmin): + list_display = ('book', 'status'<strong>, 'borrower'</strong>, 'due_back', 'id') + list_filter = ('status', 'due_back') + + fieldsets = ( + (None, { + 'fields': ('book','imprint', 'id') + }), + ('Availability', { + 'fields': ('status', 'due_back'<strong>,'borrower'</strong>,) + }), + )</pre> + +<h3 id="Loan_a_few_books">Loan a few books</h3> + +<p>Now that its possible to loan books to a specific user, go and loan out a number of <code>BookInstance</code> records. Set their <code>borrowed</code> field to your test user, make the <code>status</code> "On loan" and set due dates both in the future and the past.</p> + +<div class="note"> +<p><strong>Note</strong>: We won't spell the process out, as you already know how to use the Admin site!</p> +</div> + +<h3 id="On_loan_view">On loan view</h3> + +<p>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 <code>LoginRequiredMixin</code>, so that only a logged in user can call this view. We will also choose to declare a <code>template_name</code>, rather than using the default, because we may end up having a few different lists of BookInstance records, with different views and templates.</p> + +<p>Add the following to catalog/views.py:</p> + +<pre class="brush: python">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')</pre> + +<p>In order to restrict our query to just the BookInstance objects for the current user, we re-implement <code>get_queryset()</code> as shown above. Note that "o" is the stored code for "on loan" and we order by the <code>due_back</code> date so that the oldest items are displayed first.</p> + +<h3 id="URL_conf_for_on_loan_books">URL conf for on loan books</h3> + +<p>Now open <strong>/catalog/urls.py</strong> and add an <code>url()</code> pointing to the above view (you can just copy the text below to the end of the file).</p> + +<pre class="brush: python">urlpatterns += [ + url(r'^mybooks/$', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'), +]</pre> + +<h3 id="Template_for_on_loan_books">Template for on loan books</h3> + +<p>Now all we need to do for this page is add a template. First, create the template file <strong>/catalog/templates/catalog/bookinstance_list_borrowed_user.html</strong> and give it the following contents:</p> + +<pre class="brush: python">{% 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 %}</pre> + +<p>This template is very similar to those we've created previously for the <code>Book</code> and <code>Author</code> objects. The only thing "new" here is that we check the method we added in the model <code>(bookinst.is_overdue</code>) and use it to change the colour of overdue items.</p> + +<p>When the development server is running, you should now be able to view the list for a logged in user in your browser at <a href="http://127.0.0.1:8000/catalog/mybooks/">http://127.0.0.1:8000/catalog/mybooks/</a>. Try this out with your user logged in and logged out (in the second case, you should be redirected to the login page).</p> + +<h3 id="Add_the_list_to_the_sidebar">Add the list to the sidebar</h3> + +<p>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.</p> + +<p>Open the base template (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) and add the line in bold to the sidebar as shown.</p> + +<pre class="brush: python"> <ul class="sidebar-nav"> + {% if user.is_authenticated %} + <li>User: \{{ user.get_username }}</li> +<strong> <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li></strong> + <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> +</pre> + +<h3 id="Nasıl_görünüyor">Nasıl görünüyor?</h3> + +<p>Herhangi bir kullanıcı giriş yaptığında, aşağıda görüntülendiği şekilde, kenar çubuğunda <em>My Borrowed</em> bağlantısını ve kitaplar listesini görecekler (ilk kitabın due date'i yok, bir sonraki tutorial'da gidereceğimiz bir bug!).</p> + +<p><img alt="Library - borrowed books by user" src="https://mdn.mozillademos.org/files/14105/library_borrowed_by_user.png" style="border-style: solid; border-width: 1px; display: block; height: 215px; margin: 0px auto; width: 530px;"></p> + +<h2 id="İzinler">İzinler</h2> + +<p>İ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 <em>add</em>, <em>change</em> ve <em>delete</em> 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.</p> + +<p>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).</p> + +<h3 id="Models_2">Models</h3> + +<p>Defining permissions is done on the model "<code>class Meta</code>" section, using the <code>permissions</code> 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:</p> + +<pre class="brush: python">class BookInstance(models.Model): + ... + class Meta: + ... +<strong> permissions = (("can_mark_returned", "Set book as returned"),) </strong> </pre> + +<p>We could then assign the permission to a "Librarian" group in the Admin site.</p> + +<p>Open the <strong>catalog/models.py</strong>, and add the permission as shown above. You will need to re-run your migrations (call <code>python3 manage.py makemigrations</code> and <code>python3 manage.py migrate</code>) to update the database appropriately.</p> + +<h3 id="Templates">Templates</h3> + +<p>The current user's permissions are stored in a template variable called <code>\{{ perms }}</code>. You can check whether the current user has a particular permission using the specific variable name within the associated Django "app" — e.g. <code>\{{ perms.catalog.can_mark_returned }}</code> will be <code>True</code> if the user has this permission, and <code>False</code> otherwise. We typically test for the permission using the template <code>{% if %}</code> tag as shown:</p> + +<pre class="brush: python">{% if perms.catalog.<code>can_mark_returned</code> %} + <!-- We can mark a BookInstance as returned. --> + <!-- Perhaps add code to link to a "book return" view here. --> +{% endif %} +</pre> + +<h3 id="Views">Views</h3> + +<p>Permissions can be tested in function view using the <code>permission_required</code> decorator or in a class-based view using the <code>PermissionRequiredMixin</code>. The pattern and behaviour are the same as for login authentication, though of course you might reasonably have to add multiple permissions.</p> + +<p>Function view decorator:</p> + +<pre class="brush: python">from django.contrib.auth.decorators import permission_required + +@permission_required('catalog.<code>can_mark_returned</code>') +@permission_required('catalog.<code>can_edit</code>') +def my_view(request): + ...</pre> + +<p>Permission-required mixin for class-based views.</p> + +<pre class="brush: python">from django.contrib.auth.mixins import PermissionRequiredMixin + +class MyView(PermissionRequiredMixin, View): + permission_required = 'catalog.<code>can_mark_returned</code>' + # Or multiple permissions + permission_required = ('catalog.<code>can_mark_returned</code>', 'catalog.can_edit') + # Note that 'catalog.can_edit' is just an example + # the catalog application doesn't have such permission!</pre> + +<h3 id="Example">Example</h3> + +<p>We won't update the <em>LocalLibrary</em> here; perhaps in the next tutorial!</p> + +<h2 id="Challenge_yourself">Challenge yourself</h2> + +<p>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 <em>all</em> books that have been borrowed, and which includes the name of each borrower.</p> + +<p>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: <code>staff_member_required</code>, template variable: <code>user.is_staff</code>) but we recommend that you instead use the <code>can_mark_returned</code> permission and <code>PermissionRequiredMixin</code>, as described in the previous section.</p> + +<div class="warning"> +<p><strong>Important</strong>: 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.</p> +</div> + +<p>When you are finished, your page should look something like the screenshot below.</p> + +<p><img alt="All borrowed books, restricted to librarian" src="https://mdn.mozillademos.org/files/14115/library_borrowed_all.png" style="border-style: solid; border-width: 1px; display: block; height: 283px; margin: 0px auto; width: 500px;"></p> + +<ul> +</ul> + +<h2 id="Summary">Summary</h2> + +<p>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.</p> + +<p>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.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/1.10/topics/auth/">User authentication in Django</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/1.10/topics/auth/default//">Using the (default) Django authentication system</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/#decorating-class-based-views">Introduction to class-based views > Decorating class-based views</a> (Django docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</p> diff --git a/files/tr/learn/server-side/django/index.html b/files/tr/learn/server-side/django/index.html new file mode 100644 index 0000000000..d4a8864ffb --- /dev/null +++ b/files/tr/learn/server-side/django/index.html @@ -0,0 +1,72 @@ +--- +title: Django Web Framework (Python) +slug: Öğren/Server-side/Django +tags: + - Beginner + - CodingScripting + - Intro + - Learn + - NeedsTranslation + - Python + - Server-side programming + - TopicStub + - django +translation_of: Learn/Server-side/Django +--- +<p>{{draft("Contact Hamish Willee via ~~chrisdavidmills if you have any questions about this work.")}}</p> + +<p class="summary">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.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>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 <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module.</p> + +<p>A general knowledge of programming concepts and <a href="/en-US/docs/Glossary/Python">Python</a> is recommended, but not essential to understanding the core concepts.</p> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django Introduction</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial — The Local Library website</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt> + <dd>This article shows how to define models for the <em>LocalLibrary</em> 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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt> + <dd>Now that we've created models for the <em>LocalLibrary </em>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt> + <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> 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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> 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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> 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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions">Django Tutorial Part 8: User authentication and permissions</a></dt> + <dd>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 <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd> + <dd> </dd> + <dt>Forms (TBD)</dt> + <dd><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> 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.</dd> + <dt> </dt> + <dt>Testing Django code (TBD)</dt> + <dd>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.</dd> + <dt>Django web application security (TBD)</dt> + <dd>Protecting user data is an essential part of any website design. We already explained some of the more common security threats in the topic <a href="/en-US/docs/Web/Security">Web security</a> — this article builds on that information, providing a brief overview of the security features that are provided for Django users out of the box.</dd> + <dt>Deployment to production (TBD)</dt> + <dd>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 <a href="https://www.heroku.com/">Heroku</a> cloud hosting service.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above</p> + +<dl> + <dt>DIY Mini Blog (TBD)</dt> + <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd> +</dl> diff --git a/files/tr/learn/server-side/django/sessions/index.html b/files/tr/learn/server-side/django/sessions/index.html new file mode 100644 index 0000000000..594cab9f47 --- /dev/null +++ b/files/tr/learn/server-side/django/sessions/index.html @@ -0,0 +1,182 @@ +--- +title: 'Django Tutorial Part 7: Sessions framework' +slug: Öğren/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}</div> + +<p class="summary">Bu tutorial, anasayfaya session temelli bir ziyareti sayacı ekleyerek <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön şartlar:</th> + <td><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial 6. Bölüm: Generic list ve detail view'lar</a> dahil önceki tüm tutorial konularını tamamlayın</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Session'ların nasıl kullanıldığını anlamak.</td> + </tr> + </tbody> +</table> + +<h2 id="Genel_Bakış">Genel Bakış</h2> + +<p>Önceki tutorial'larda oluşturduğumuz <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> 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.</p> + +<p>"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. </p> + +<p>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. </p> + +<h2 id="Sessions_Nedir">Sessions Nedir?</h2> + +<p>Web tarayıcılar ve sunucular arasındaki tüm iletişim, <em>stateless</em> 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, <span class="translation">bir istemci ile devam eden ilişkileri takip eden bir siteye sahip olmak istiyorsanız</span>, bunu kendiniz uygulamanız gerekiyor.</p> + +<p>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 <span class="translation">tarayıcı bağlandığında bu verileri sitede bulabilirsiniz</span>. 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.</p> + +<p>Django uses a cookie containing a special <em>session id</em> to identify each browser and its associated session with the site. The actual session <em>data</em> 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.</p> + +<h2 id="Session'ları_Etkinleştirme">Session'ları Etkinleştirme</h2> + +<p>Sessions <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">iskelet websitesini oluşturduğumuzda</a> (tutorial 2'de) otomatik olarak etkinleştirilir.</p> + +<p>Aşağıda görüldüğü gibi, yapılandırma, proje dosyasının (<strong>locallibrary/locallibrary/settings.py</strong>) <code>INSTALLED_APPS</code> ve <code>MIDDLEWARE</code> kısımlarına kurulur:</p> + +<pre class="brush: python">INSTALLED_APPS = [ + ... +<strong> 'django.contrib.sessions',</strong> + .... + +MIDDLEWARE = [ + ... +<strong> 'django.contrib.sessions.middleware.SessionMiddleware',</strong> + ....</pre> + +<h2 id="Session'ları_Kullanma">Session'ları Kullanma</h2> + +<p>You can access the <code>session</code> attribute in the view from the <code>request</code> parametresi (an <code>HttpRequest</code> 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 <em>browser</em>, as identified by the session id in the browser's cookie for this site).</p> + +<p><code>session</code> 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.</p> + +<p>The code fragments below show how you can get, set, and delete some data with the key "<code>my_car</code>", associated with the current session (browser). </p> + +<div class="note"> +<p><strong>Note</strong>: 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 <code>my_car</code> is associated only with the browser that sent the current request.</p> +</div> + +<pre class="brush: python"># 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'] +</pre> + +<p>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 <a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">How to use sessions</a> (Django belgeleri).</p> + +<h2 id="Session_Verisini_Kaydetmek">Session Verisini Kaydetmek</h2> + +<p>Varsayılan olarak, Django yalnızca session veri tabanını kaydeder ve session <em>değiştirildiğinde</em> veya <em>silindiğinde</em> 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:</p> + +<pre class="brush: python"># This is detected as an update to the session, so session data is saved. +request.session['my_car'] = 'mini'</pre> + +<p>Session verisi <em>içersinde</em> 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, "<code>my_car</code>" verinizin içerisindeki "<code>wheels</code>" verinizi değiştirmek üzereyseniz). Bu durumda session'ı açık bir şekilde değiştirilmiş olarak işaretlemeniz gerekecektir.</p> + +<pre class="brush: python"># 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. +<code>request.session.modified = True</code> +</pre> + +<div class="note"> +<p><strong>Not</strong>: Davranışı değiştirebilirsiniz; böylece site veri tabanını güncelleyecek/proje ayarlarınıza (<strong>locallibrary/locallibrary/settings.py</strong>) <code>SESSION_SAVE_EVERY_REQUEST = True</code> komutunu ekleyerek her bir request'teki çerezi gönderecektir.</p> +</div> + +<h2 id="Basit_Örnek_—_Ziyaret_Sayısını_Almak">Basit Örnek — Ziyaret Sayısını Almak</h2> + +<p>Basit bir gerçek dünya örneği olarak, mevcut kullanıcıya <em>LocalLibrary</em> anasayfasını kaç kere ziyaret ettiklerini söyleyemesi için kütüphanemizi güncelleyeceğiz.</p> + +<p><strong>/locallibrary/catalog/views.py</strong> dosyasını açın ve aşağıda kalın olarak gösterilen değişiklikleri yapın. </p> + +<pre class="brush: python">def index(request): + ... + + num_authors=Author.objects.count() # The 'all()' is implied by default. + +<strong> # 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</strong> + + # Render the HTML template index.html with the data in the context variable. + return render( + request, + 'index.html', +<strong> 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</strong> + )</pre> + +<p>Here we first get the value of the <code>'num_visits'</code> 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 <code>num_visits</code> variable is then passed to the template in our context variable. </p> + +<div class="note"> +<p><strong>Note</strong>: We might also test whether cookies are even supported in the browser here (see <a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">How to use sessions</a> for examples) or design our UI so that it doesn't matter whether or not cookies are supported.</p> +</div> + +<p>Add the line seen at the bottom of the following block to your main HTML template (<strong>/locallibrary/catalog/templates/index.html</strong>) at the bottom of the "Dynamic content" section to display the context variable:</p> + +<pre class="brush: html"><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> + +<strong><p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p></strong> +</pre> + +<p>Değişikliklerinizi kaydedin ve test sunucusunu yeniden başlatın. Sayfayı her yenilediğinizde, numara güncellenmelidir.</p> + +<ul> +</ul> + +<h2 id="Özet">Özet</h2> + +<p><em>Bilinmeyen</em> kullanıcılarla etkileşiminizi arttırmak için oturumları kullanmanın ne kadar kolay olduğunu artık biliyorsunuz.</p> + +<p>Sıradaki makalelerimizde, authentication ve authorisation (izin) framework'ünü açıklayacağız ve kullanıcı hesaplarını nasıl destekleyeceğinizi göstereceğiz.</p> + +<h2 id="Ayrıca_bakın">Ayrıca bakın</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">Session'lar nasıl kullanılır</a> (Django belgeleri)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}</p> diff --git a/files/tr/learn/server-side/django/skeleton_website/index.html b/files/tr/learn/server-side/django/skeleton_website/index.html new file mode 100644 index 0000000000..4301d37ce5 --- /dev/null +++ b/files/tr/learn/server-side/django/skeleton_website/index.html @@ -0,0 +1,394 @@ +--- +title: 'Django Tutorial 2. Bölüm: Websitesi İskeleti Oluşturmak' +slug: Öğren/Server-side/Django/website_iskeleti +translation_of: Learn/Server-side/Django/skeleton_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div> + +<p class="summary"><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial</a> 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Gereksinimler:</th> + <td><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Django geliştirme ortamı kur</a>. <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial</a>'i gözden geçir.</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Kendi website projelerinizi oluşturmak için Django araçlarını kullanabilmek</td> + </tr> + </tbody> +</table> + +<h2 id="Genel_Bakış">Genel Bakış</h2> + +<p>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..</p> + +<p>Süreç gayet açık:</p> + +<ol> + <li><code style="font-style: normal; font-weight: normal; line-height: 1.5;">django-admin</code><span style="line-height: 1.5;"> tool to create the project folder, basic file templates, and project management script (</span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;">).</span></li> + <li><span style="line-height: 1.5;">Use </span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;"> to create one or more </span><em>applications</em><span style="line-height: 1.5;">.</span> + <div class="note"> + <p><strong>Note</strong>: 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 <em>applications</em>, which could then be re-used in different projects if desired. </p> + </div> + </li> + <li><span style="line-height: 1.5;">Register the new applications to include them in the project. </span></li> + <li><span style="line-height: 1.5;">Hook up the url/path mapper for each application.</span></li> +</ol> + +<p>For the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> the website folder and its project folder will be named <em>locallibrary</em>, and we'll have just one application named <em>catalog</em>. The top level folder structure will therefore be as follows:</p> + +<pre class="brush: bash"><em>locallibrary/ # Website folder</em> + <strong>manage.py </strong># Script to run Django tools for this project (created using django-admin) + <em>locallibrary/ # Website/project folder </em>(created using django-admin) + <em>catalog/ # Application folder </em>(created using manage.py) +</pre> + +<p><span style="line-height: 1.5;">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.</span></p> + +<h2 id="Projeyi_Oluşturma">Projeyi Oluşturma</h2> + +<p>İlk olarak komut istemi/terminali açın, <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">sanal ortamda</a> olduğunuza emin olun, Django uygulamalarının bulunmasını istediğiniz yeri açın(<code>cd</code> komutuyla)<span style="line-height: 1.5;"> (<em>belgeler </em>klasörü gibi kolay bulabileceğiniz bir yer olsun) ve yeni websiteniz için yeni bir klasör oluşturun (biz </span><em>django_projects </em>olarak oluşturduk). Sonra <code>cd</code> komutuyla o klasöre girin:</p> + +<pre class="brush: bash">mkdir django_projects +cd django_projects</pre> + +<p>Gösterildiği gibi <code>django-admin startproject</code> komutuyla yeni projeyi oluşturun ve sonra klasörün içine girin.</p> + +<pre class="brush: bash">django-admin startproject locallibrary +cd locallibrary</pre> + +<p><code>django-admin</code> aracı aşağıda görünen şekilde bir klasör/dosya yapısı oluşturur:</p> + +<pre class="brush: bash"><em>locallibrary/</em> + manage.py + <em>locallibrary/</em> + __init__.py + settings.py + urls.py + wsgi.py</pre> + +<p>Bizim çalıştığımız klasör şuna benzer şekilde görünmeli:</p> + +<pre class="syntaxbox">../django_projects/locallibrary/</pre> + +<p><em>locallibrary</em> proje altklasörü websitemiz için giriş noktası:</p> + +<ul> + <li><strong>__init__.py </strong>Python'a bu klasöre Python paketi olarak davranması gerektiğini söyleyen boş bir dosya.</li> + <li><strong>settings.py</strong> 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. </li> + <li><strong>urls.py</strong> 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<span style="line-height: 1.5;">. </span></li> + <li><strong style="line-height: 1.5;">wsgi.py</strong><span style="line-height: 1.5;"> Django uygulamamızın web sunucusuyla iletişim kurmasına yardım eder. Şablon olarak düşünebilirsiniz.</span></li> +</ul> + +<p><strong>manage.py</strong> 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. </p> + +<h2 id="Catalog_uygulamasını_oluşturma">Catalog uygulamasını oluşturma</h2> + +<p><em>locallibrary </em>projemizin içinde duracak olan <em>catalog</em> uygulamasını oluşturmak için aşağıdaki komutu çalıştırın (projemizin <strong>manage.py </strong>betiğinin de bulunduğu klasörde çalıştırılmalı):</p> + +<pre class="brush: bash">python3 manage.py startapp catalog</pre> + +<div class="note"> +<p><strong>Not</strong>: Yukarıdaki komut Linux/macOS X içindir. Windows'taki komut şu şekilde olmalı: <code>py -3 manage.py startapp catalog</code></p> + +<p>Windows kullanıyorsanız, bu modül boyunca <code>python3</code> yerine <code>py -3</code> yazmalısınız.</p> + +<p>Python 3.7.0 kullanıyorsanız sadece <code>py manage.py startapp catalog</code> kullanmalısınız.</p> +</div> + +<p>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 <strong>views.py'</strong>da, Model'ler <strong>models.py'</strong>da, test'ler <strong>tests.py'</strong>da, site yönetim sayfası ayarları <strong>admin.py'</strong>da, uygulama kayıtları <strong>apps.py'</strong>da bulunur). Ayrıca bu dosyalar ilişkili oldukları nesnelerle çalışırken kullanılabilecek minimal bir kod şablonu da içerir.</p> + +<p>Proje klasörünün son hali şu şekilde görünmeli:</p> + +<pre class="brush: bash"><em>locallibrary/</em> + manage.py + <em>locallibrary/ +</em><strong> <em>catalog/</em> + admin.py + apps.py + models.py + tests.py + views.py + __init__.py + <em>migrations/</em></strong> +</pre> + +<p>In addition we now have:</p> + +<ul> + <li>A <em>migrations</em> folder, used to store "migrations" — files that allow you to automatically update your database as you modify your models. </li> + <li><strong>__init__.py</strong> — an empty file created here so that Django/Python will recognise the folder as a <a href="https://docs.python.org/3/tutorial/modules.html#packages">Python Package</a> and allow you to use its objects within other parts of the project.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 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).</p> +</div> + +<h2 id="Registering_the_catalog_application">Registering the catalog application</h2> + +<p>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 <code>INSTALLED_APPS</code> list in the project settings. </p> + +<p>Open the project settings file <strong>django_projects/locallibrary/locallibrary/settings.py</strong> and find the definition for the <code>INSTALLED_APPS</code> list. Then add a new line at the end of the list, as shown in bold below.</p> + +<pre class="brush: bash">INSTALLED_APPS = [ + 'django.contrib.admin', + 'django.contrib.auth', + 'django.contrib.contenttypes', + 'django.contrib.sessions', + 'django.contrib.messages', + 'django.contrib.staticfiles', +<strong> 'catalog.apps.CatalogConfig', </strong> +]</pre> + +<p>The new line specifies the application configuration object (<code>CatalogConfig</code>) that was generated for you in <strong>/locallibrary/catalog/apps.py</strong> when you created the application.</p> + +<div class="note"> +<p><strong>Note</strong>: You'll notice that there are already a lot of other <code>INSTALLED_APPS</code> (and <code>MIDDLEWARE</code>, further down in the settings file). These enable support for the <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django administration site</a> and as a result lots of the functionality it uses (including sessions, authentication, etc).</p> +</div> + +<h2 id="Specifying_the_database">Specifying the database</h2> + +<p>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 <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#databases">Databases</a> (Django docs). </p> + +<p>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 <strong>settings.py</strong> (more information is also included below):</p> + +<pre class="brush: python">DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), + } +} +</pre> + +<p>Because we are using SQLite, we don't need to do any further setup here. Let's move on!</p> + +<h2 id="Other_project_settings">Other project settings</h2> + +<p>The <strong>settings.py</strong> file is also used for configuring a number of other settings, but at this point you probably only want to change the <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-TIME_ZONE">TIME_ZONE</a> — this should be made equal to a string from the standard <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">List of tz database time zones</a> (the TZ column in the table contains the values you want). Change your <code>TIME_ZONE</code> value to one of these strings appropriate for your time zone, for example:</p> + +<pre class="brush: python">TIME_ZONE = 'Europe/London'</pre> + +<p>There are two other settings you won't change now, but that you should be aware of:</p> + +<ul> + <li><code>SECRET_KEY</code>. 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. </li> + <li><code>DEBUG</code>. This enables debugging logs to be displayed on error, rather than HTTP status code responses. This should be set to <code>False</code> on production as debug information is useful for attackers, but for now we can keep it set to <code>True</code>.</li> +</ul> + +<h2 id="Hooking_up_the_URL_mapper">Hooking up the URL mapper</h2> + +<p>The website is created with a URL mapper file (<strong>urls.py</strong>) 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.</p> + +<p>Open <strong>locallibrary/locallibrary/urls.py</strong> and note the instructional text which explains some of the ways to use the URL mapper. </p> + +<pre class="brush: python">"""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), +] +</pre> + +<p>The URL mappings are managed through the <code>urlpatterns</code> variable, which is a Python <em>list</em> of <code>path()</code> functions. Each <code>path()</code> function either associates a URL pattern to a <em>specific view</em>, 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 <code>urlpatterns</code> list initially defines a single function that maps all URLs with the pattern <em>admin/</em> to the module <code>admin.site.urls</code> , which contains the Administration application's own URL mapping definitions.</p> + +<div class="note"> +<p><strong>Note</strong>: The route in <code>path()</code> is a string defining a URL pattern to match. This string might include a named variable (in angle brackets), e.g. <code>'catalog/<id>/'</code>. This pattern will match a URL like <strong>/catalog/</strong><em>any_chars</em><strong>/</strong> and pass <em>any_chars</em> to the view as a string with parameter name <code>id</code>). We discuss path methods and route patterns further in later topics.</p> +</div> + +<p>Add the lines below to the bottom of the file in order to add a new list item to the <code>urlpatterns</code> list. This new item includes a <code>path()</code> that forwards requests with the pattern <code>catalog/</code> to the module <code>catalog.urls</code> (the file with the relative URL <strong>/catalog/urls.py</strong>).</p> + +<pre class="brush: python"># 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')), +] +</pre> + +<p>Now let's redirect the root URL of our site (i.e. <code>127.0.0.1:8000</code>) to the URL <code>127.0.0.1:8000/catalog/</code>; 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 (<code>RedirectView</code>), which takes as its first argument the new relative URL to redirect to (<code>/catalog/</code>) when the URL pattern specified in the <code>path()</code> function is matched (the root URL, in this case).</p> + +<p>Add the following lines, again to the bottom of the file:</p> + +<pre class="brush: python">#Add URL maps to redirect the base URL to our application +from django.views.generic import RedirectView +urlpatterns += [ + path('', RedirectView.as_view(url='/catalog/')), +]</pre> + +<p>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:</p> + +<pre class="brush: python">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 '/'. +</pre> + +<p>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. </p> + +<p>Add the following final block to the bottom of the file now:</p> + +<pre><code># 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)</code> +</pre> + +<div class="note"> +<p><strong>Note</strong>: There are a number of ways to extend the <code>urlpatterns</code> list (above we just appended a new list item using the <code>+=</code> operator to clearly separate the old and new code). We could have instead just included this new pattern-map in the original list definition:</p> + +<pre class="brush: python">urlpatterns = [ + path('admin/', admin.site.urls), + path('catalog/', include('catalog.urls')), + path('', RedirectView.as_view(url='/catalog/', permanent=True)), +] + <code>static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code> +</pre> + +<p>In addition, we included the import line (<code>from django.urls import include</code>) 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.</p> +</div> + +<p>As a final step, create a file inside your catalog folder called <strong>urls.py</strong>, and add the following text to define the (empty) imported <code>urlpatterns</code>. This is where we'll add our patterns as we build the application. </p> + +<pre class="brush: python">from django.urls import path +from catalog import views + + +urlpatterns = [ + +] +</pre> + +<h2 id="Testing_the_website_framework">Testing the website framework</h2> + +<p>At this point we have a complete skeleton project. The website doesn't actually <em>do</em> anything yet, but its worth running it to make sure that none of our changes have broken anything. </p> + +<p>Before we do that, we should first run a <em>database migration</em>. This updates our database to include any models in our installed applications (and removes some build warnings).</p> + +<h3 id="Running_database_migrations">Running database migrations</h3> + +<p>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 <strong>/locallibrary/catalog/migrations/</strong>) to automatically migrate the underlying data structure in the database to match the model.</p> + +<p>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<strong> manage.py</strong>):</p> + +<pre class="brush: bash">python3 manage.py makemigrations +python3 manage.py migrate +</pre> + +<div class="warning"> +<p><strong>Important</strong>: 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).</p> +</div> + +<p>The <code>makemigrations</code> command <em>creates</em> (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!</p> + +<p>The <code>migrate</code> command actually applies the migrations to your database (Django tracks which ones have been added to the current database).</p> + +<div class="note"> +<p><strong>Note</strong>: See <a href="https://docs.djangoproject.com/en/2.0/topics/migrations/">Migrations</a> (Django docs) for additional information about the lesser-used migration commands.</p> +</div> + +<h3 id="Running_the_website">Running the website</h3> + +<p>During development you can test the website by first serving it using the <em>development web server</em>, and then viewing it on your local web browser. </p> + +<div class="note"> +<p><strong>Note</strong>: 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 (<code>http://127.0.0.1:8000/)</code>, but you can also specify other computers on your network to serve to. For more information see <a href="https://docs.djangoproject.com/en/2.0/ref/django-admin/#runserver">django-admin and manage.py: runserver</a> (Django docs).</p> +</div> + +<p>Run the <em>development web server</em> by calling the <code>runserver</code> command (in the same directory as <strong>manage.py</strong>):</p> + +<pre class="brush: bash">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. +</pre> + +<p>Once the server is running you can view the site by navigating to <code>http://127.0.0.1:8000/</code> in your local web browser. You should see a site error page that looks like this:</p> + +<p><img alt="Django Debug page for Django 2.0" src="https://mdn.mozillademos.org/files/15729/django_404_debug_page.png"></p> + +<p>Don't worry! This error page is expected because we don't have any pages/urls defined in the <code>catalogs.urls</code> module (which we're redirected to when we get an URL to the root of the site). </p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>At this point we know that Django is working! </p> + +<div class="note"> +<p><strong>Note</strong>: You should re-run migrations and re-test the site whenever you make significant changes. It doesn't take very long!</p> +</div> + +<h2 id="Challenge_yourself">Challenge yourself</h2> + +<p>The <strong>catalog/</strong> directory contains files for the views, models, and other parts of the application. Open these files and inspect the boilerplate. </p> + +<p>As you saw above, a URL-mapping for the Admin site has already been added in the project's <strong>urls.py</strong>. Navigate to the admin area in your browser and see what happens (you can infer the correct URL from the mapping above).</p> + +<ul> +</ul> + +<h2 id="Summary">Summary</h2> + +<p>You have now created a complete skeleton website project, which you can go on to populate with urls, models, views, and templates.</p> + +<p>Now the skeleton for the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> is complete and running, it's time to start writing the code that makes this website do what it is supposed to do. </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial01/">Writing your first Django app - part 1</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.0/ref/applications/#configuring-applications">Applications</a> (Django Docs). Contains information on configuring applications.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> + +<p> </p> diff --git a/files/tr/learn/server-side/index.html b/files/tr/learn/server-side/index.html new file mode 100644 index 0000000000..ad515e95a9 --- /dev/null +++ b/files/tr/learn/server-side/index.html @@ -0,0 +1,52 @@ +--- +title: Server-side website programming +slug: Öğren/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +<p>{{draft("Contact Hamish Willee via ~~chrisdavidmills if you have any questions about this work.")}}</p> + +<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> 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.</p> + +<p>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 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p> + +<p>In the modern world of web development, learning about server-side development is highly recommended.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>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.</p> + +<p>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".</p> + +<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Modules">Modules</h2> + +<p>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 . </p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>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.</dd> + <dt>Express (node.js/Javascript) Web Framework (TBD)</dt> + <dd>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.</dd> +</dl> |