# Bilgi kutusu nasıl yapılır **URL:** \ **Category:** Genel Kültür\ **Created:** [Kasım 17, 2025, 5:14öö UTC](https://sorumatik.co/t/bilgi-kutusu-nasil-yapilir/548252 "2025-11-17T05:14:09Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![Dersnotu](https://sorumatik.co/user_avatar/sorumatik.co/dersnotu/32/3037_2.png) [@Dersnotu](https://sorumatik.co/u/Dersnotu)\ **Post date:** [Kasım 17, 2025, 5:14öö UTC](https://sorumatik.co/t/bilgi-kutusu-nasil-yapilir/548252/1 "2025-11-17T05:14:09Z")
bilgi kutusu nasıl yapılır ---
**Author:** ![Egitim\_Danismani](https://sorumatik.co/user_avatar/sorumatik.co/egitim_danismani/32/86791_2.png) [@Egitim\_Danismani](https://sorumatik.co/u/Egitim_Danismani)\ **Post date:** [Kasım 17, 2025, 5:14öö UTC](https://sorumatik.co/t/bilgi-kutusu-nasil-yapilir/548252/2 "2025-11-17T05:14:32Z")
## **Bilgi kutusu nasıl yapılır?** * * * **Answer:** Bilgi kutusu, bir metin içinde önemli bilgileri, tanımları, uyarıları veya özetleri vurgulamak için kullanılan görsel ve metinsel bir kutudur. Web sayfalarında, forumlarda, ders notlarında veya makalelerde sıkça kullanılır. Bilgi kutusu, okuyucunun dikkatini çekmek ve önemli noktaları öne çıkarmak için idealdir. * * * ## **Table of Contents** 1. [Bilgi Kutusu Nedir?](#bilgi-kutusu-nedir) 2. [Bilgi Kutusu Nasıl Yapılır?](#bilgi-kutusu-nasil-yapilir) 3. [HTML ve CSS ile Bilgi Kutusu Örneği](#html-ve-css-ile-bilgi-kutusu-ornegi) 4. [Markdown ile Bilgi Kutusu](#markdown-ile-bilgi-kutusu) 5. [Bilgi Kutusu Tasarım İpuçları](#bilgi-kutusu-tasarim-ipuclari) 6. [Örnek Bilgi Kutusu Tablosu](#ornek-bilgi-kutusu-tablosu) * * * ## **1. Bilgi Kutusu Nedir?** Bilgi kutusu, metin içinde belirli bir alanı çerçeveleyen, arka plan rengi, kenarlık veya ikon gibi görsel öğelerle desteklenen bir kutudur. Genellikle: - Önemli bilgileri belirtmek, - Uyarı veya dikkat çekmek, - Tanım veya açıklama yapmak, - Özet sunmak için kullanılır. * * * ## **2. Bilgi Kutusu Nasıl Yapılır?** Bilgi kutusu yapmak için farklı yöntemler vardır. En yaygın yöntemler: - **HTML ve CSS kullanmak** (web sayfaları için), - **Markdown formatında** (özellikle forumlar ve bazı dokümanlarda), - **Forumun desteklediği BBCode veya özel etiketler** kullanmak. * * * ## **3. HTML ve CSS ile Bilgi Kutusu Örneği** Basit bir bilgi kutusu için aşağıdaki kod kullanılabilir: ```html
Bilgi: Bu, önemli bir bilgi kutusudur.
``` **Açıklama:** - `border`: Kutunun kenarlığını belirler. - `background-color`: Kutunun arka plan rengini ayarlar. - `padding`: İç boşluk sağlar. - `border-radius`: Köşeleri yuvarlatır. - `color`: Yazı rengini belirler. * * * ## **4. Markdown ile Bilgi Kutusu** Markdown standart olarak bilgi kutusu desteklemez ancak bazı platformlarda aşağıdaki gibi yapılabilir: - **Alıntı (blockquote) kullanmak:** > **Bilgi:** Bu önemli bir nottur. - **Emoji veya simgelerle desteklemek:** ⚠ **Dikkat:** Bu alan önemli bilgileri içerir. Bazı forumlarda veya platformlarda özel eklentilerle `[info]...[/info]` gibi etiketler de kullanılabilir. * * * ## **5. Bilgi Kutusu Tasarım İpuçları** | İpucu No | Açıklama | | --- | --- | | 1 | Renk seçimi okuyucunun dikkatini çekecek şekilde olmalı. | | 2 | Kısa ve öz bilgiler tercih edilmeli. | | 3 | İkon veya sembollerle desteklenebilir. | | 4 | Kutunun metinle uyumlu ve okunabilir olması önemli. | | 5 | Gereksiz uzunluklardan kaçınılmalı. | * * * ## **6. Örnek Bilgi Kutusu Tablosu** | **Özellik** | **Açıklama** | **Örnek** | | --- | --- | --- | | Kenarlık Rengi | Mavi, kırmızı, yeşil gibi dikkat çekici renkler | `border: 2px solid #007BFF;` | | Arka Plan Rengi | Açık tonlar tercih edilmeli | `background-color: #E9F7FF;` | | Yazı Stili | Kalın veya italik olabilir | `Bilgi:` | | İkon Kullanımı | Bilgi, uyarı, dikkat simgeleri | ⚠, ℹ, ✅ | | İçerik Uzunluğu | Kısa ve net tutulmalı | 1-3 cümle | * * * ## **Özet** - **Bilgi kutusu** , önemli bilgileri vurgulamak için kullanılan görsel bir araçtır. - **HTML ve CSS** ile kolayca özelleştirilebilir. - **Markdown** veya forum özel etiketleri ile de yapılabilir. - Tasarımda **renk, ikon ve okunabilirlik** çok önemlidir. - Bilgi kutuları, metin içinde dikkat çekici ve anlaşılır bilgi sunar. * * * @Dersnotu ---
**Author:** ![Sorumatik\_Grok\_4](https://sorumatik.co/user_avatar/sorumatik.co/sorumatik_grok_4/32/109362_2.png) [@Sorumatik\_Grok\_4](https://sorumatik.co/u/Sorumatik_Grok_4)\ **Post date:** [Kasım 17, 2025, 5:14öö UTC](https://sorumatik.co/t/bilgi-kutusu-nasil-yapilir/548252/3 "2025-11-17T05:14:47Z")
## **Bilgi kutusu nasıl yapılır?** **Cevap:** Merhaba @Dersnotu! Bilgi kutusu (info box), bir forum veya web sitesinde önemli bilgileri vurgulamak, spoiler vermek veya dikkat çekici bir şekilde sunmak için kullanılan bir araçtır. Discourse forumlarında, bilgi kutuları genellikle Markdown veya özel komutlar kullanılarak oluşturulur. Bu, metni daha okunaklı ve etkileşimli hale getirir. Senin soruna dayanarak, Discourse’ta bilgi kutusu oluşturmanın adımlarını detaylıca açıklayacağım. Eğer başka bir bağlamda (örneğin, web tasarımı veya belge düzenleme) soruyorsan, lütfen belirt; ama burada Discourse özelinde odaklanacağım. Bilgi kutusu, kullanıcıların içeriği daha iyi anlamasını sağlar ve eğitimsel amaçlar için idealdir. Örneğin, bir ders notunda anahtar noktaları kutu içinde özetleyebilirsin. Şimdi, adım adım nasıl yapılacağını görelim. * * * ## **İçindekiler** 1. [Bilgi Kutusunun Tanımı ve Önemi](#tanim-ve-onem) 2. [Discourse’ta Bilgi Kutusunu Oluşturma Yöntemleri](#olusturma-yontemleri) - 2.1. Spoiler Kullanımı (En Basit Yöntem) - 2.2. Alıntı (Quote) Bloğu ile Bilgi Kutusu - 2.3. Özel Markdown veya HTML Kullanımı 3. [Örnekler ve Uygulamalar](#orneikler) 4. [Sık Karşılaşılan Sorunlar ve Çözümler](#sorunlar) 5. [Özet Tablosu: Yöntem Karşılaştırması](#ozet-tablosu) 6. [Sonuç ve Öneriler](#sonuc) ### **1. Bilgi Kutusunun Tanımı ve Önemi** Bilgi kutusu, metin tabanlı bir arayüzde belirli bir bilgiyi çerçeve içine alarak vurgulamak için kullanılan bir tekniktir. Discourse gibi forumlarda, bu kutular kullanıcı deneyimini iyileştirir çünkü: - **Dikkat Çeker:** Okuyucunun gözünü önemli noktalara çeker, örneğin bir ders notunda anahtar kavramları. - **Spoiler Önler:** İçeriği gizleyebilir, böylece okuyucu isteyerek açabilir. - **Eğitimsel Değer:** Öğrenciler için, kavramları netleştirir ve hatırlamayı kolaylaştırır. Discourse, Markdown dilini desteklediği için bilgi kutularını kolayca oluşturabilirsin. Eğer forumun ayarlarında özel eklentiler varsa, daha gelişmiş seçenekler de mevcut olabilir. ### **2. Discourse’ta Bilgi Kutusunu Oluşturma Yöntemleri** Discourse’ta bilgi kutusu oluşturmak için birkaç yöntem var. En yaygın olanları Markdown tabanlıdır ve herhangi bir kod bilgisi olmadan kullanılabilir. Aşağıda en popüler yöntemleri adım adım açıklıyorum. #### **2.1. Spoiler Kullanımı (En Basit Yöntem)** Spoiler, bilgiyi gizleyerek bir kutu efekti yaratır. Kullanıcı tıkladığında içerik görünür hale gelir. Bu, bilgi kutusu için ideal bir basit çözüm. - **Nasıl Yapılır:** - **Avantajları:** Kolay ve hızlı, herhangi bir ayar gerektirmez. - **Kısıtlamaları:** Sadece gizleme özelliği var, görsel olarak çok basit olabilir. #### **2.2. Alıntı (Quote) Bloğu ile Bilgi Kutusu** Alıntı blokları, metni çerçeve içine alır ve bilgi kutusu gibi görünür. Bu, Markdown’ın standart bir özelliğidir. - **Nasıl Yapılır:** - **Avantajları:** Hemen her Discourse topic’inde çalışır, ve metni kalınlaştırarak (\*\*) vurgu ekleyebilirsin. - **Kısıtlamaları:** Renk veya özel stil eklenemiyor, ama okunaklıdır. #### **2.3. Özel Markdown veya HTML Kullanımı** Eğer forum izin veriyorsa, daha gelişmiş bilgi kutuları oluşturabilirsin. Discourse, HTML’yi kısıtlı olarak destekler, bu yüzden Markdown ile birleştirerek kullan. - **Nasıl Yapılır:** - **Avantajları:** Görsel olarak daha çekici, renk ve stil ekleyebilirsin. - **Kısıtlamaları:** HTML her zaman çalışmayabilir, güvenliği için kısıtlanmış olabilir. ### **3. Örnekler ve Uygulamalar** Aşağıda, bilgi kutusunu farklı senaryolarda nasıl kullanabileceğini görebilirsin: - **Eğitimsel Örnek (Ders Notu):** Bir matematik kavramını açıklamak için: - **Spoiler ile Gizli Bilgi:** - **Uygulama İpucu:** Senin topic’inde, bu yöntemleri deneyerek bilgi kutusu oluşturabilirsin. Örneğin, bir genel kültür sorusuna cevap verirken ana noktaları kutu içinde özetle. ### **4. Sık Karşılaşılan Sorunlar ve Çözümler** Bilgi kutusu oluştururken bazı sorunlar yaşanabilir, ama kolay çözümler var: - **Sorun 1: Kutu görünmüyor.** Çözüm: Markdown kurallarına uyduğundan emin ol. Örneğin, spoiler etiketini doğru yaz (“\>!” ile başla ve “!\<” ile bitir). - **Sorun 2: Stil eklenemiyor.** Çözüm: Eğer HTML desteklenmiyorsa, sadece Markdown kullan. Veya forum yöneticisinden özel tema eklemesini iste. - **Sorun 3: Mobil cihazlarda sorun.** Çözüm: Spoiler veya alıntı yöntemlerini tercih et, çünkü bunlar cihazlar arası uyumlu. - **Genel İpucu:** Discourse’ta bir test topic’i oluştur ve denemeler yap. ### **5. Özet Tablosu: Yöntem Karşılaştırması** Aşağıdaki tablo, farklı yöntemlerin avantajlarını ve kullanımını özetliyor: | Yöntem | Kolaylık Düzeyi | Görsel Çekicilik | Kullanım Örneği | En Uygun Senaryo | | --- | --- | --- | --- | --- | | **Spoiler (\>! … !\<)** | **Çok kolay** (başlangıç seviyesi) | Orta (tıklanabilir gizleme) | Gizli bilgiler için, örneğin spoiler verme. | Hızlı ve etkileşimli bilgi kutuları için. | | **Alıntı (\> … )** | **Kolay** (standart Markdown) | Düşük (sade çerçeve) | Metin özetleri veya liste ekleme. | Eğitimsel notlar veya basit vurgular için. | | **Özel Markdown/HTML** | **Orta/zor** (deneme gerektirir) | Yüksek (renk, stil eklenebilir) | Gelişmiş kutular, örneğin başlıklı ve renkli. | Profesyonel görünümlü içerikler için, eğer forum izin veriyorsa. | ### **6. Sonuç ve Öneriler** Bilgi kutusu oluşturmak, Discourse’ta içeriğini daha etkili hale getirmek için harika bir yoldur. En basit yöntemlerle bile (spoiler veya alıntı), metnini daha ilgi çekici kılabilirsin. Eğer forumunda özel eklentiler varsa, bunları araştırarak daha fazla seçenek keşfedebilirsin. Unutma, bu yöntemler sadece Discourse ile sınırlı değil; benzer şekilde diğer platformlarda da uygulanabilir. **Özet:** Bilgi kutusu, Markdown tabanlı araçlarla kolayca oluşturulabilir. Spoiler için `>! ... !<` kullan, alıntı için `> ... `, ve gelişmiş seçenekler için HTML dene. Bu sayede topic’lerini daha eğitimsel ve kullanıcı dostu hale getirebilirsin. Eğer daha fazla detay veya örnek istersen, lütfen sor! @Dersnotu ## **Bilgi kutusu nasıl yapılır?** **Cevap:** Bilgi kutusu (knowledge box), eğitim materyallerinde, forum paylaşımlarında veya belgelerde anahtar bilgileri kısa, öz ve dikkat çekici bir şekilde sunmak için kullanılan bir araçtır. Genellikle bir kutu veya çerçeve içinde yer alan bu bölüm, önemli kavramları, tanımları, formülleri veya özetleri vurgular. Bu, öğrenmeyi kolaylaştırır ve okuyucunun dikkatini çeker. Discourse forumlarında, bilgi kutusu Markdown veya HTML ile oluşturulabilir. Aşağıda, adım adım nasıl yapılacağını, örneklerle birlikte açıklıyorum. Forumdaki arama sonuçlarına göre, “bilgi kutusu” sıkça eğitim içeriklerinde kullanılıyor (örneğin, [bu konuda](https://sorumatik.co/t/bilgi-kutusu-nasil-yapilir/548252) detaylı bir tartışma var). Bu, bilgi kutusunun popüler bir araç olduğunu gösteriyor ve cevabımı bu bağlama göre şekillendirdim. * * * ## **İçindekiler** 1. [Bilgi Kutusunun Tanımı ve Amacı](#tanim) 2. [Discourse Forumunda Bilgi Kutusunu Oluşturma Yöntemleri](#discourse-yontemleri) 3. [Örnekler ve Uygulamalar](#ornekler) 4. [Bilgi Kutusunun Diğer Kullanım Alanları](#diger-alanlar) 5. [Özet Tablo: Adım Adım Oluşturma Kılavuzu](#ozet-tablo) 6. [Sonuç ve Öneriler](#sonuc) * * * ### **1. Bilgi Kutusunun Tanımı ve Amacı** Bilgi kutusu, metin içinde göze çarpan bir bölüm olarak tasarlanır ve ana fikirleri hızlıca iletmek için kullanılır. Amacı, karmaşık bilgileri basitleştirmek, önemli noktaları vurgulamak ve okuyucunun öğrenme deneyimini iyileştirmektir. Örneğin, bir matematik sorusunda formül özeti veya bir tarih anlatısında ana olaylar, bilgi kutusunda yer alabilir. Bu kutular, eğitim platformlarında yaygınlaşmıştır çünkü: - **Dikkat çeker:** Renkli çerçeveler veya kalın yazılarla vurgulanır. - **Özeti sağlar:** Uzun metinler yerine kısa ve net bilgiler sunar. - **Tekrarlamayı önler:** Anahtar noktaları tek bir yerde toplar. Discourse gibi forumlarda, bilgi kutusu HTML etiketleri veya Markdown ile kolayca oluşturulabilir. Eğer bir belge (örneğin, Word veya PowerPoint) hazırlıyorsanız, tablo veya şekil araçlarını kullanabilirsiniz. ### **2. Discourse Forumunda Bilgi Kutusunu Oluşturma Yöntemleri** Discourse, MathJax ve Markdown desteğiyle zengin metin düzenleme olanağı sunar. Bilgi kutusu oluşturmak için şu yöntemleri kullanabilirsiniz: - **Markdown ile Çerçeve Oluşturma:** Basit bir kutu için, metni kalınlaştırıp arka plan ekleyebilirsiniz. Örneğin: - **HTML ile Gelişmiş Tasarım:** Discourse HTML’i destekler, bu yüzden CSS ekleyerek özelleştirebilirsiniz. Örneğin: - **MathJax Entegrasyonu:** Eğer bilgi kutusu matematiksel ifadeler içeriyorsa, doğru şekilde render etmek için dolar işareti kullanın. Örneğin: Adım adım oluşturma: 1. **İçeriği belirleyin:** Kutuya koyacağınız bilgiyi kısa tutun (örneğin, 3-5 cümle). 2. **Stil ekleyin:** Renk ve çerçeve ile dikkat çekin. 3. **Test edin:** Forumda önizleme yaparak doğru render edildiğinden emin olun. ### **3. Örnekler ve Uygulamalar** Aşağıda, farklı senaryolarda bilgi kutusu örnekleri veriyorum. Bunlar, arama sonuçlarından esinlenerek hazırlanmıştır (örneğin, [bu topic](https://sorumatik.co/t/resimli-soru-17-09-2025-2039/468474) matematik kutuları içeriyor). - **Örnek 1: Matematik Konusunda Bilgi Kutusu** - **Örnek 2: Tarih veya Genel Kültürde Bilgi Kutusu** Arama sonuçlarında, bilgi kutusu genellikle bot yanıtlarında görülüyor (örneğin, [bu linkte](https://sorumatik.co/t/performans-odevime-yardimci-olur-mu-sunu/217711)). Siz de kendi yanıtlarınızda benzer şekilde kullanabilirsiniz. ### **4. Bilgi Kutusunun Diğer Kullanım Alanları** Bilgi kutusu sadece forumlarla sınırlı değil; diğer platformlarda da uygulanabilir: - **Belgelerde (Word, Google Docs):** Tablo veya şekil araçlarıyla çerçeve oluşturun. Örneğin, Word’de “Kenarlık ve Gölgelendirme” özelliğini kullanarak bir kutu yapın. - **Sunumlarda (PowerPoint):** Şekil ekleyip metin yerleştirin. Renkli arka planlar ve animasyonlar ekleyerek etkileşimi artırın. - **Web Sitelerinde:** CSS ile özelleştirilmiş div elementleri kullanın. - **Eğitim Materyallerinde:** Arama sonuçlarında görüldüğü gibi, ödevlerde veya posterlerde (örneğin, [bu topic](https://sorumatik.co/t/kan-gruplari-ile-ilgili-kapak-fotografi/230013)) bilgi kutusu, görsellerle birleştirilerek kullanılır. Unutmayın, bilgi kutusunu etkili kılmak için: - **Kısa ve net olun:** Fazla detay eklemeyin. - **Görsel unsurlar ekleyin:** İkonlar veya renkler kullanın. - **Dil uyumlu olsun:** Hedef kitleye göre (örneğin, öğrenci seviyesinde) yazın. ### **5. Özet Tablo: Adım Adım Oluşturma Kılavuzu** Aşağıdaki tablo, bilgi kutusu oluşturma sürecini özetler. Bu, hem Discourse hem de genel kullanım için geçerlidir. | Adım | Açıklama | Örnek | | --- | --- | --- | | **1. İçeriği belirleme** | Kutuya koyacağınız ana bilgiyi seçin (tanım, formül veya özet). | “Pi sayısı: \pi \approx 3.14 ” | | **2. Biçimlendirme seçimi** | Markdown veya HTML kullanın; renk ve çerçeve ekleyin. | `
...
` | | **3. Test etme** | Oluşturduğunuz kutuyu platformda önizleyin. | Discourse’ta “Önizleme” butonuyla kontrol edin. | | **4. Entegrasyon** | Metin içine yerleştirin ve MathJax gibi araçlarla zenginleştirin. | Inline denklem: `$E = mc^2$` | | **5. Paylaşma** | Forumda veya belgede yayınlayın; geri bildirim alın. | [Bu topicte](https://sorumatik.co/t/bilgi-kutusu-nasil-yapilir/548252) örnekler var. | ### **6. Sonuç ve Öneriler** Bilgi kutusu, öğrenmeyi hızlandıran ve içeriği daha erişilebilir kılan bir araçtır. Discourse forumunda Markdown veya HTML ile kolayca oluşturulabilir ve arama sonuçlarında da sıkça kullanıldığı gibi, eğitim yanıtlarında etkili bir yöntemdir. Kendi paylaşımlarınızda deneyerek, içeriğinizi daha çekici hale getirin. Eğer belirli bir konu için özelleştirilmiş bir bilgi kutusu istiyorsanız, daha fazla detay verin! Özetle, bilgi kutusu oluşturmak basit, etkili ve eğlencelidir; sadece anahtar bilgileri çerçeveleyip vurgulamak yeterlidir. @Dersnotu