```html

HTML Form Nedir? Temel Bilgiler

HTML, web sayfalarının yapı taşlarını oluşturan bir işaretleme dilidir. Formlar, kullanıcıdan bilgi toplamak için en etkili yöntemlerden biridir. HTML'de nasıl bir form oluşturabilirim? sorusunun cevabı, formun temel bileşenlerini anlamaktan geçer. Formlar, genellikle metin kutuları, onay kutuları, radyo düğmeleri ve butonlar gibi çeşitli elemanları içerir. Bu bileşenler sayesinde, kullanıcılar isimlerini, e-posta adreslerini ve diğer verilerini rahatça girebilirler. Formlar, veri toplamak ve kullanıcılara geri bildirim sağlamak için vazgeçilmezdir. Ayrıca, sitedeki etkileşimi artıran dinamik bir yapı sunarlar. Özetle, HTML'de nasıl bir form oluşturabilirim? sorusu, formun yapısını ve işlevini kavrayarak cevaplanabilir. Form oluşturmak, web geliştirme sürecinin önemli bir parçasıdır. html

Form Elemanları: Girdi Türleri ve Özellikleri

HTML'de nasıl bir form oluşturabilirim? Bu sorunun yanıtı, form elemanlarının doğru ve etkili bir şekilde kullanılmasıyla başlar. Formlar, kullanıcılarla etkileşim sağlamak için en önemli araçlardandır. Girdi türleri, kullanıcılardan alınacak bilgilerin niteliğine göre değişiklik gösterir. Bununla birlikte, her bir girdi türünün kendine özgü özellikleri bulunmaktadır.

Örneğin, text girdisi kullanıcıdan metin alırken, password girdi türü şifre gibi hassas bilgileri gizli tutar. Ayrıca, checkbox ve radio butonları, kullanıcıların seçenekler arasından birini veya birden fazlasını seçmesine olanak tanır. select öğesi ise açılır bir liste şeklinde sunularak, kullanıcıların belirli bir tercihte bulunmalarını sağlar.

Her bir girdi türünün beraberinde geldiği çeşitli özellikler sayesinde, formlar daha işlevsel hale getirilebilir. Örneğin, required özelliği, belirli bir alanın doldurulmasının zorunlu olduğunu belirtirken; placeholder özelliği, giriş alanında kullanıcıya yardımcı olabilecek örnek metinler sunar. Bu gibi özellikler, kullanıcı deneyimini artırarak formların etkinliğini yükseltir.

Sonuç olarak, kullanıcı dostu ve işlevsel formlar oluşturmak için HTML'de nasıl bir form oluşturabilirim? sorusunu yanıtlamak amacıyla, girdi türlerini ve özelliklerini iyi bir şekilde anlamak gerekmektedir. Böylece, hedeflenen bilgi girişini sağlamak ve kullanıcıların isteklerini kolay bir şekilde ifade etmeleri mümkün olacaktır.

```

Form Oluşturma: Adım Adım Süreç

Form oluşturmak, web tasarımında önemli bir adımdır ve kullanıcı deneyimini büyük ölçüde etkileyebilir. Peki, HTML'de nasıl bir form oluşturabilirim? sorusunun cevabı oldukça basittir. İşte adım adım süreci takip edebileceğiniz bazı basit yönergeler: Öncelikle, HTML belgenizin uygun bir yerinde `

` etiketi ile formunuzu başlatmalısınız. Bu etiket, kullanıcının verilerini girebileceği alanları barındıran bölümü tanımlar. Ardından, formunuzu oluşturan çeşitli bileşenleri eklemek için `input`, `textarea`, `select` gibi etiketleri kullanabilirsiniz. Form elemanlarına daha fazla özellik eklemek için `type`, `placeholder`, ve `value` gibi nitelikler kullanarak kullanıcıların deneyimini geliştirebilirsiniz. Örneğin, bir metin girişi oluşturmak istiyorsanız, şöyle bir kod kullanabilirsiniz: ``. Bu, kullanıcılara ne yazmaları gerektiğini açıklayan bir ipucu sağlar. Ayrıca, kullanıcının seçim yapabileceği kutucuklar veya onay kutuları eklemek için `` veya `` etiketlerini kullanabilirsiniz. Formunuzun sonunda, kullanıcıların verilerini göndermesi için bir gönderim butonu (``) eklemeyi unutmayın. Sonuç olarak, `HTML'de nasıl bir form oluşturabilirim?` sorusunu bu adımları takip ederek çok kolay bir şekilde cevaplayabilirsiniz. İyi bir kullanıcı deneyimi için formunuzu temel tasarım ilkelerine göre oluşturmayı ve test etmeyi ihmal etmeyin.

HTML Form Alanları: Etiketler ve Kullanım

HTML, web sayfalarında kullanıcıların etkileşimde bulunabilmesi için oldukça önemli bir yapı taşını temsil eder. Özellikle form yaratmak, kullanıcıdan bilgi toplamanın en etkili yollarından biridir. Peki, HTML'de nasıl bir form oluşturabilirim? İşte tam burada devreye etiketler giriyor. HTML formları genellikle `` etiketi içerisinde yer alır. Bu etiket, formun başlangıcını ve bitişini belirler ve gerekli alanları oluşturmak için çeşitli alt etiketler kullanılır. En yaygın kullanılan etiketler arasında ``, ``, `<select>` ve `<button>` bulunur. `<input>` etiketi, kullanıcıdan bilgi toplamak için farklı türlerde alanlar oluşturmanızı sağlar. Örneğin, bir metin girişi için type="text", bir şifre girişi için type="password" veya bir tarihi seçmek için type="date" kullanılabilir. `<textarea>` etiketi, çok satırlı metin girişi sağlamak için idealdir. Kullanıcıların daha fazla alan girmesine izin verir ve yazılı içeriklerin düzenlenmesine olanak tanır. `<select>` etiketi, kullanıcının belirli seçenekler arasından seçim yapmasına yardımcı olur. Aşağıda açılır bir liste oluşturmak için kullanılır ve `<option>` etiketi ile birlikte çalışır. Son olarak, `<button>` veya `<input type="submit">` etiketleri, formun gönderimini tetikler. Kullanıcı bilgilerini göndermek için bu butona tıklanması gerekir. Tüm bu etiketlerle bir araya getirildiğinde, kullanıcıların çeşitli bilgileri kolayca doldurabilmesini sağlayan işlevsel bir form oluşturmak mümkündür. Kısacası, <b><b>HTML'de nasıl bir form oluşturabilirim?</b></b> sorusunun cevabı, doğru etiketleri kullanmakla ilgilidir. Bu etiketler sayesinde formunuzu fonksiyonel ve kullanıcı dostu bir hale getirebilirsiniz.<h2>Form Verilerini Göndermek: Yöntemler ve Örnekler</h2> <b>HTML'de nasıl bir form oluşturabilirim?</b> Bu sorunun cevabı, web sitenizde kullanıcı etkileşimini artırmanın ve veri toplamayı kolaylaştırmanın önemli bir adımıdır. Formlar, kullanıcıların bilgilerinin toplandığı, sunucuya gönderildiği ve çeşitli işlemler için kullanıldığı güçlü araçlardır. Form verilerini göndermek için en yaygın iki yöntem vardır: GET ve POST. GET yöntemi, form verilerini URL'ye ekler ve genellikle arama formları gibi basit veri gönderim işlemleri için kullanılır. Bu yöntemde veriler açıkça görülebilir, bu nedenle kullanıcı bilgilerini gizli tutmak istemediğiniz durumlarda tercih edilmelidir. Öte yandan, POST yöntemi verileri gömülü bir şekilde sunucuya gönderir ve genellikle daha güvenli olan bu yöntem, daha hassas bilgiler (örneğin, şifreler) için önerilir. Örnek bir kullanım ile açıklamak gerekirse, aşağıda basit bir HTML formu ve verilerin nasıl gönderileceğine dair bir örnek bulunmaktadır: ```html <form action="your-server-endpoint" method="POST"> <label for="name">Adınız:</label> <input type="text" id="name" name="name" required> <label for="email">E-posta:</label> <input type="email" id="email" name="email" required> <input type="submit" value="Gönder"> </form> ``` Bu örnek, kullanıcıdan adını ve e-posta adresini alarak sunucuya göndermektedir. Form gönderildiğinde, bilgiler güvenli bir şekilde belirtilen sunucu noktasına iletilecektir. Sonuç olarak, <b><b>HTML'de nasıl bir form oluşturabilirim?</b></b> sorusunun yanıtı, temel olarak form etiketleri ile başlayıp, GET ve POST gibi yöntemlerle verilerinizi nasıl en etkili bir şekilde sunucuya göndereceğinizi anlamaya dayanmaktadır. Form verilerini yönlendirme ve işleme süreci, kullanıcı deneyimini artıran ve web projelerinizin başarısını destekleyen kritik unsurlardır.<h2>Formları Stilize Etmek: CSS ile Tasarım İpuçları</h2> HTML'de bir form oluşturmak, kullanıcı etkileşimini sağlamak için oldukça önemlidir. İlk olarak, <b><b>HTML'de nasıl bir form oluşturabilirim?</b></b> sorusunu yanıtlayalım. Formlar, ziyaretçilerden veri toplamak için kullanılır ve bu verilerin estetik bir şekilde sunulması, kullanıcı deneyimini büyük ölçüde etkileyebilir. Sayfanızda yer alan formu, CSS ile stilize ederek çok daha çekici ve kullanıcı dostu hale getirebilirsiniz. CSS kullanarak form elemanlarınızı stilize etmek için bazı temel ipuçlarına dikkat etmelisiniz. Öncelikle, giriş alanlarının (input) boyutlarını ayarlayarak görselliği ve kullanılabilirliği artırabilirsiniz. Örneğin, genişlik, yükseklik ve margin değerlerini ayarlayarak alanlar arası boşlukları daha düzenli hale getirebilirsiniz. Ayrıca, hata mesajları ve onay mesajları için farklı renkler kullanarak, kullanıcıların dikkatini çekebilir ve formu daha etkileşimli hale getirebilirsiniz. Özellikle butonlar için CSS ile özel stiller oluşturmak, kullanıcıların dikkatini çekmek için oldukça etkilidir. Butonlarınıza hover efektleri ekleyerek, fareyle üzerlerine gelindiğinde renk değişimi gibi animasyonlar sağlayabilirsiniz. Bu, formunuzu daha canlı hale getirir ve kullanıcıların işlem yapma şansını artırır. Arka plan renkleri ve kenar boşlukları da formunuzun genel görünümünü etkileyen önemli unsurlar arasındadır. Kasvetli ve dar bir arka plan yerine, daha açık ve ferah bir ortam sunmak, kullanıcıların formu daha rahat doldurmasına yardımcı olabilir. Sonuç olarak, formunuzu ve içeriğinizi stilize etmek, kullanıcı deneyimini iyileştirmek için çok önemlidir. Unutmayın ki, <b><b>HTML'de nasıl bir form oluşturabilirim?</b></b> sorusunun yanıtı sadece kod yazmaktan ibaret değildir; aynı zamanda kullanıcıların bu formları kullanırken hissettikleri deneyimi de göz önünde bulundurmak gerekir.<h2>Form Doğrulama: HTML ve JavaScript Kullanımı</h2> HTML'de <b>nasıl bir form oluşturabilirim?</b> sorusu, web geliştirme sürecinde sıkça karşılaşan önemli bir meseledir. Form, kullanıcıdan bilgi toplamak için vazgeçilmez bir araçtır. Kullanıcıların giriş yaparken veya çeşitli veriler gönderirken form kullanmaları neredeyse kaçınılmazdır. HTML ile form oluşturmak oldukça basittir. Öncelikle, `<form>` etiketini kullanarak formun yapısına başlamamız gerekiyor. Formunuzda, kullanıcıdan almayı planladığınız bilgilere göre farklı alanlar ekleyebilirsiniz. Metin giriş alanları için `<input type="text">`, şifre için `<input type="password">`, e-posta için `<input type="email">` gibi çeşitli türlerde giriş alanları kullanmak mümkündür. Ayrıca, radio butonları ve checkboxlar gibi seçenekler de ekleyerek formunuzu zenginleştirebilirsiniz. Yalnızca formu oluşturmak yeterli değildir; formun doğru bir şekilde ve beklenen biçimde doldurulup doldurulmadığını kontrol etmek için form doğrulama işlemi gereklidir. Bu noktada JavaScript devreye girer. JavaScript kullanarak, kullanıcının girdiği bilgilerin geçerliliğini kontrol edebilir, eksik veya hatalı doldurulmuş alanlar olduğunda kullanıcıyı uyandırabilirsiniz. Örneğin, bir e-posta alanının doğru formatta girilip girilmediğini kontrol edebilir ve kullanıcıya uygun bir geri bildirim sağlayabilirsiniz. Sonuç olarak, HTML ile <b>nasıl bir form oluşturabilirim?</b> sorusunun yanıtı basit bir yapı ile başlayıp, JavaScript ile geliştirilmiş doğrulamaların eklenmesiyle tamamlanır. Bu iki teknoloji birleştiğinde, kullanıcı dostu ve işlevsel formlar oluşturmanız mümkün hale gelir.```html <h2>Mobil Uyumlu Form Oluşturma: Dikkat Edilmesi Gerekenler</h2> <p>Mobil uyumlu <b>form</b> oluşturma süreci, kullanıcı deneyimini artırmak ve erişilebilirliği sağlamak açısından oldukça önemlidir. Öncelikle, <b><b>HTML'de nasıl bir form oluşturabilirim?</b></b> sorusunu yanıtlamak için basit ve etkili düzenlemeler yapmalısınız. Form elemanlarını düzenlerken, küçük ekranlarda dahi kullanıcıların rahatça etkileşimde bulunabilmesi için yeterince büyük butonlar ve giriş alanları kullanmalısınız. Ayrıca, etiketlerin net ve anlamlı olması, kullanıcıların ne yapmaları gerektiği konusunda daha fazla bilgi sahibi olmalarını sağlar. Form alanlarını mümkün olduğunca sade tutmak, karmaşıklığı azaltır ve kullanıcıların işlem yapma isteğini artırır. Son olarak, formlarınızın responsive (duyarlı) tasarımı ile farklı cihazlarda nasıl göründüğünü sürekli kontrol etmek, olası sorunları erken tespit etmenize yardımcı olacaktır. Bu detaylara dikkat ederek, kullanıcı dostu ve mobil uyumlu <b>form</b>lar oluşturabilirsiniz.</p> ```<h2>HTML5 ile Yenilikçi Form Olanakları</h2> HTML, web sayfası oluşturmak için en temel yapı taşlarından biridir ve formlar, kullanıcı etkileşiminde önemli bir rol oynar. <b><b>HTML'de nasıl bir form oluşturabilirim?</b></b> sorusu, özellikle kullanıcı deneyimini artırmak isteyen geliştiriciler için kritik bir noktadır. HTML5 ile, daha önce hayal bile edilemeyecek birçok yeni ve yenilikçi form olanağı sunulmuştur. Bu yenilikler, formların daha kullanıcı dostu hale gelmesine yardımcı olur. Örneğin, HTML5 sayesinde birçok yerleşik form kontrolü ve özellikleri mevcut. Bu özellikler arasında placeholder (yer tutucu) metinleri, otomatik tamamlama, tarih ve saat seçimi için özel giriş alanları ve daha fazlası bulunmaktadır. Bu tür özellikler, kullanıcının formları daha kolay ve hızlı bir şekilde doldurmasına olanak tanır. Ayrıca, HTML5 ile birlikte gelen yeni form elementleri, geliştiricilere daha fazla esneklik sağlar. Örneğin, "email" ve "url" gibi özel giriş türleri, kullanıcıların doğru bilgi girmesini sağlayarak, formların doğruluğunu artırır. Bu da, kullanıcıların formları doldururken karşılaşabileceği hataları en aza indirir. Sonuç olarak, HTML5 ile yenilikçi form olanakları, <b><b>HTML'de nasıl bir form oluşturabilirim?</b></b> sorusuna yanıt bulmanın en pratik ve etkili yolunu sunmaktadır. Geliştiricilerin bu yeni olanakları keşfetmesi, kullanıcı deneyimini iyileştirerek, daha etkili web uygulamaları oluşturmasına yardımcı olur.```html <h2>En Sık Yapılan Form Hataları ve Çözümleri</h2> <p>HTML’de nasıl bir form oluşturabilirim? Bu sorunun cevabı, birçok kullanıcı için büyük önem taşır. Ancak, form tasarlarken sıkça karşılaşılan bazı hatalar, kullanıcı deneyimini olumsuz yönde etkileyebilir. İşte <b><b>HTML'de nasıl bir form oluşturabilirim?</b></b> sorusunun yanıtını ararken dikkat etmeniz gereken en yaygın hatalar ve bu hataların pratik çözümleri:</p> <ul> <li><b>Gerekli Alanların Belirtilmemesi:</b> Formda hangi alanların zorunlu olduğunu belirtmezseniz, kullanıcılar eksik bilgiyle formu gönderebilirler. Çözüm olarak, zorunlu alanları işaretlemek için asterisk (*) veya açıklayıcı metin kullanın.</li> <li><b>Yanlış Veri Girişi:</b> Kullanıcıların yanlış formatta bilgi girmesi sık karşılaşılan bir durumdur. Geri dönüş sağlamadan formu gönderdiğinde, hata mesajları göstermek bu sorunu çözer.</li> <li><b>Yanlış Hata Mesajları:</b> Kullanıcılar sıkça hata ile karşılaştıklarında, aldıkları hata mesajlarının açık olmaması durumu ortaya çıkabilir. Açıklayıcı ve net mesajlar vererek kullanıcıların problemi anlamalarına yardımcı olun.</li> <li><b>Formun Mobil Uyumluluğu Olmaması:</b> Günümüzde birçok kullanıcı mobil cihazlar üzerinden işlem yapmaktadır. Formun mobil uyumlu olmaması, kullanıcıların formları doldurmasını zorlaştırabilir. Responsive tasarım ile bu sorunu çözebilirsiniz.</li> <li><b>Kullanıcı Deneyimini Göz Ardı Etmek:</b> Formun karmaşık olması kullanıcıları uzaklaştırabilir. Basit ve sade bir tasarım, kullanıcıların formları doldurmasını kolaylaştırır. Formu sade ve anlaşılır tutun.</li> </ul> <p>Sonuç olarak, <b><b>HTML'de nasıl bir form oluşturabilirim?</b></b> sorusu üzerinde düşünürken, bu yaygın hataları göz önünde bulundurmak, formunuzun etkinliğini artıracaktır. Bu şekilde daha iyi bir kullanıcı deneyimi sağlamış olursunuz.</p> ``` </div> <!-- Tags --> <div class="mt-12 pt-8 border-t border-ek-border"> <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Etiketler</h3> <div class="flex flex-wrap gap-2"> <a href="/tr/blog?tag=Form Elemanları" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg"> Form Elemanları </a> <a href="/tr/blog?tag=HTML Form Oluşturma" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg"> HTML Form Oluşturma </a> <a href="/tr/blog?tag=Form Verisi İşleme" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg"> Form Verisi İşleme </a> <a href="/tr/blog?tag=Kullanıcı Giriş Formu" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg"> Kullanıcı Giriş Formu </a> <a href="/tr/blog?tag=İletişim Formu" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg"> İletişim Formu </a> </div> </div> <!-- Share Buttons --> <div class="mt-8 pt-8 border-t border-ek-border"> <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Bu yazıyı paylaş</h3> <div class="flex gap-3"> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fekolsoft.com%2Ftr%2Fb%2Fhtmlde-nasil-bir-form-olusturabilirim&text=HTML%27de%20nas%C4%B1l%20bir%20form%20olu%C5%9Fturabilirim%3F" target="_blank" rel="noopener noreferrer" class="w-10 h-10 glass-card flex items-center justify-center rounded-lg text-gray-400 hover:text-white transition-colors"> <i class="fab fa-x-twitter"></i> </a> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fekolsoft.com%2Ftr%2Fb%2Fhtmlde-nasil-bir-form-olusturabilirim" target="_blank" rel="noopener noreferrer" class="w-10 h-10 glass-card flex items-center justify-center rounded-lg text-gray-400 hover:text-white transition-colors"> <i class="fab fa-linkedin-in"></i> </a> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fekolsoft.com%2Ftr%2Fb%2Fhtmlde-nasil-bir-form-olusturabilirim" target="_blank" rel="noopener noreferrer" class="w-10 h-10 glass-card flex items-center justify-center rounded-lg text-gray-400 hover:text-white transition-colors"> <i class="fab fa-facebook-f"></i> </a> <a href="mailto:?subject=HTML%27de%20nas%C4%B1l%20bir%20form%20olu%C5%9Fturabilirim%3F&body=https%3A%2F%2Fekolsoft.com%2Ftr%2Fb%2Fhtmlde-nasil-bir-form-olusturabilirim" class="w-10 h-10 glass-card flex items-center justify-center rounded-lg text-gray-400 hover:text-white transition-colors"> <i class="fas fa-envelope"></i> </a> </div> </div> </div> </article> <!-- Related Posts --> <section class="pb-24 px-4 bg-ek-darker"> <div class="max-w-7xl mx-auto py-16"> <h2 class="section-title text-center mb-12">İlgili Yazılar</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <a href="/tr/b/web3-gelistirme-rehberi-akilli-kontratlar-defi" class="glass-card overflow-hidden group hover:border-ek-accent/30 transition-all duration-300"> <img data-src="/img/blog/1sg0qi1e.webp" alt="Web3 ve blockchain geliştirme görseli" class="lazyload w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-semibold group-hover:text-ek-accent-light transition-colors">Web3 Geliştirme Rehberi: Akıllı Kontratlardan DeFi'ye Kapsamlı Kılavuz</h3> <p class="text-gray-500 text-sm mt-2">Mar 29, 2026</p> </div> </a> <a href="/tr/b/yesil-bt-surdurulebilir-yazilim-cevre-duyarli-teknoloji" class="glass-card overflow-hidden group hover:border-ek-accent/30 transition-all duration-300"> <img data-src="/img/blog/yji3szmz.webp" alt="Yeşil BT ve sürdürülebilir yazılım geliştirme" class="lazyload w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-semibold group-hover:text-ek-accent-light transition-colors">Yeşil BT ve Sürdürülebilir Yazılım: Çevreye Duyarlı Teknoloji Geliştirme Rehberi</h3> <p class="text-gray-500 text-sm mt-2">Mar 29, 2026</p> </div> </a> <a href="/tr/b/github-actions-ci-cd-rehberi-workflow-matrix-build" class="glass-card overflow-hidden group hover:border-ek-accent/30 transition-all duration-300"> <img data-src="/img/blog/wrncohrs.webp" alt="GitHub Actions CI/CD otomasyon ve DevOps" class="lazyload w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-semibold group-hover:text-ek-accent-light transition-colors">GitHub Actions ile CI/CD Rehberi: Workflow, Matrix Build ve Deployment</h3> <p class="text-gray-500 text-sm mt-2">Mar 29, 2026</p> </div> </a> </div> </div> </section> </main> <footer class="bg-ek-darker border-t border-ek-border"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12"> <div class="lg:col-span-1"> <a href="/" class="flex items-center gap-2 text-2xl font-bold gradient-text"> <img src="/img/favicon-96x96.png" alt="Ekolsoft" style="height: 1.75em; width: 1.75em;"> Ekolsoft </a> <p class="mt-4 text-gray-400 text-sm leading-relaxed"> Web ve mobil uygulamalardan yapay zekâ destekli sistemlere kadar akıllı yazılım çözümleri geliştiriyoruz. Büyümeye hazır işletmeler için tam kapsamlı geliştirme. </p> <div class="flex space-x-4 mt-6"> <a href="https://www.linkedin.com/company/ekolsoft" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-ek-accent-light transition-colors duration-200"> <i class="fa-brands fa-linkedin-in text-lg"></i> </a> <a href="https://github.com/msanlisavas" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-ek-accent-light transition-colors duration-200"> <i class="fa-brands fa-github text-lg"></i> </a> <a href="https://instagram.com/ekolsoft" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-ek-accent-light transition-colors duration-200"> <i class="fa-brands fa-instagram text-lg"></i> </a> </div> </div> <div> <h3 class="text-white font-semibold mb-4">Hizmetler</h3> <ul class="space-y-3"> <li><a href="/tr/services/software-solutions/web-development" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Web Geliştirme</a></li> <li><a href="/tr/services/software-solutions/mobile-development" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Mobil Geliştirme</a></li> <li><a href="/tr/services/ai-solutions" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Yapay Zekâ Çözümleri</a></li> <li><a href="/tr/services/ai-content-solutions" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Yapay Zekâ İçerik Çözümleri</a></li> <li><a href="/tr/services/infrastructure" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Altyapı</a></li> </ul> </div> <div> <h3 class="text-white font-semibold mb-4">Çocuk Zeka Oyunları</h3> <ul class="space-y-3"> <li><a href="/Sudoku" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Sudoku</a></li> <li><a href="/Maze" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Labirent</a></li> <li><a href="/BlockBuilding" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Blok Yapı</a></li> <li><a href="/robotik-kodlama" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Robotik Kodlama</a></li> </ul> </div> <div> <h3 class="text-white font-semibold mb-4">Şirket</h3> <ul class="space-y-3"> <li><a href="/#about" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Hakkımızda</a></li> <li><a href="/tr/blog" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Blog</a></li> <li><a href="/portfolio" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Portföy</a></li> <li><button type="button" onclick="openContactModal()" class="text-gray-400 hover:text-white text-sm transition-colors duration-200 bg-transparent border-0 p-0 cursor-pointer">İletişim</button></li> <li><a href="/tr/p/gizlilik-sozlesmesi" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Gizlilik Politikası</a></li> <li><a href="/tr/p/cerez-politikasi" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Çerez Politikası</a></li> <li><a href="/tr/p/kisisel-verilerin-korunmasi" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Kişisel Verilerin Korunması</a></li> </ul> </div> <div> <h3 class="text-white font-semibold mb-4">Bize Ulaşın</h3> <ul class="space-y-3"> <li class="flex items-center space-x-3 text-gray-400 text-sm"> <i class="fa-solid fa-envelope text-ek-accent-light"></i> <span>info@ekolsoft.com</span> </li> <li> <a href="https://wa.me/+905334049799?text=Merhaba%2C+Ekolsoft+websitesinden+geliyorum+ve+bilgi+almak+istiyorum." target="_blank" rel="noopener noreferrer" class="flex items-center space-x-3 text-gray-400 hover:text-green-400 text-sm transition-colors duration-200"> <i class="fa-brands fa-whatsapp text-green-400"></i> <span>WhatsApp</span> </a> </li> </ul> </div> </div> </div> <div class="border-t border-ek-border"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> <p class="text-center text-gray-500 text-sm"> © 2026 Ekolsoft. Tüm hakları saklıdır. </p> </div> </div> </footer> <div id="cookieConsentDialog"> <!-- Overlay --> <div class="cookieOverlay fixed inset-0 z-[1009] bg-black/60 backdrop-blur-sm hidden"></div> <!-- Dialog --> <div class="cookieDialog fixed inset-0 z-[1010] flex items-center justify-center p-4 hidden"> <div class="cookieBox relative w-full max-w-lg bg-ek-darker/95 backdrop-blur-lg border border-ek-border rounded-2xl p-6 sm:p-8 shadow-2xl shadow-ek-accent/10 text-gray-300"> <!-- Close button --> <a href="#" class="cookieClose absolute top-4 right-4 text-gray-500 hover:text-white transition-colors text-xl leading-none" title="close">✖</a> <h2 class="text-lg sm:text-xl font-bold text-white mb-3">Çerez Onayı</h2> <p class="text-sm text-gray-400 mb-5 leading-relaxed">Bu web sitesi, içeriği kişiselleştirmek ve trafiğimizi analiz etmek için çerezler kullanır.</p> <!-- Cookie toggles --> <div class="space-y-4 mb-5"> <div class="flex items-center justify-between gap-4 bg-white/5 rounded-xl px-4 py-3"> <div> <span class="block text-sm font-semibold text-white">Gerekli</span> <span class="block text-xs text-gray-500 mt-0.5">Gerekli çerezler, temel işlevleri etkinleştirerek bir web sitesini kullanılabilir hale getirmek için gereklidir. Bu çerezler olmadan web sitesi düzgün çalışamaz. (her zaman aktif)</span> </div> <label class="relative inline-flex items-center cursor-not-allowed"> <input type="checkbox" name="necessaryCookiesConsent" id="necessaryCookiesConsent_input" disabled="disabled" checked="checked" class="sr-only peer"> <div class="w-11 h-6 bg-ek-accent rounded-full peer-checked:bg-ek-accent"></div> <div class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5"></div> </label> </div> <div class="flex items-center justify-between gap-4 bg-white/5 rounded-xl px-4 py-3"> <div> <span class="block text-sm font-semibold text-white">Pazarlama</span> <span class="block text-xs text-gray-500 mt-0.5">Pazarlama çerezleri, ziyaretçileri web siteleri arasında izlemek için kullanılır.</span> </div> <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" name="marketingCookiesConsent" id="marketingCookiesConsent_input" class="sr-only peer"> <div class="w-11 h-6 bg-gray-600 rounded-full peer-checked:bg-ek-accent transition-colors"></div> <div class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5"></div> </label> </div> </div> <p class="text-xs text-gray-500 mb-5"> Çerezler hakkında bilgi edinebilir ve çerez onayı ayarlarınızı değiştirebilirsiniz <a href="/tr/p/cerez-politikasi" class="text-ek-accent-light hover:text-white transition-colors underline underline-offset-2">Çerez Politikası sayfası</a> </p> <!-- Buttons --> <div id="cookieDialog_buttonbar" class="flex flex-col sm:flex-row gap-3"> <input type="submit" name="" value="Tercihleri kaydet" id="coookieDialog_save_button" class="cookieNoticeButton flex-1 px-5 py-2.5 border border-ek-border text-white text-sm font-medium rounded-xl cursor-pointer bg-transparent hover:border-ek-accent hover:text-ek-accent-light transition-all" title=""> <input type="submit" name="" value="Tümüne izin ver" id="coookieDialog_acceptAll_button" class="cookieNoticeButton flex-1 px-5 py-2.5 bg-gradient-to-r from-ek-accent to-purple-600 text-white text-sm font-medium rounded-xl cursor-pointer border-0 hover:shadow-[0_0_20px_rgba(99,102,241,0.4)] transition-all" title=""> </div> </div> </div> </div> <style> /* Override JS display:table with flex via important */ .cookieDialog[style*="display: table"], .cookieDialog[style*="display:table"] { display: flex !important; } /* When JS shows the overlay */ .cookieOverlay[style*="display: block"], .cookieOverlay[style*="display:block"] { display: block !important; } </style> <!-- Default Organization JSON-LD --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "Ekolsoft", "url": "https://ekolsoft.com", "description": "AI Solutions & Software Development", "sameAs": [ "https://www.linkedin.com/company/ekolsoft", "https://github.com/msanlisavas", "https://instagram.com/ekolsoft" ] } </script> <script src="/assets/js/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="/js/lazysizes.min.js" async></script> <script> (function() { var w = document.querySelector('chatbot-widget'); if (w) { var s = document.createElement('script'); s.src = '/libs/signalr/dist/browser/signalr.js'; document.head.appendChild(s); } })(); </script> <script src="/js/tailwind-animations.js?v=Mi63f2GFrzNzvlogwhyBzOi2uf2-f_h6HmDPszR74IQ"></script> <script> document.addEventListener("DOMContentLoaded", function () { const content = document.querySelector("#toc-content"); const headings = content.querySelectorAll("h2, h3, h4, h5, h6"); const toc = document.querySelector("#table-of-contents"); const tocContainer = document.querySelector("#table-of-contents-container"); const tocToggleButton = document.getElementById("toc-toggle-button"); if (headings.length === 0) { tocContainer.style.display = "none"; return; } // Generate TOC headings.forEach(function (heading, index) { var tocItem = document.createElement("li"); var tocLink = document.createElement("a"); var headingID = "heading-" + index; heading.setAttribute("id", headingID); tocLink.textContent = heading.textContent; tocLink.href = "#" + headingID; tocLink.classList.add("toc-link"); // Indent based on heading level var level = parseInt(heading.tagName.charAt(1)) - 2; if (level > 0) { tocLink.style.paddingLeft = (12 + level * 16) + "px"; } tocItem.appendChild(tocLink); toc.appendChild(tocItem); }); // Toggle TOC collapse/expand tocToggleButton.addEventListener("click", function () { if (tocContainer.classList.contains("collapsed")) { tocContainer.classList.remove("collapsed"); tocToggleButton.textContent = "-"; } else { tocContainer.classList.add("collapsed"); tocToggleButton.textContent = "+"; } }); // Smooth scrolling with offset for fixed headers var offset = 100; toc.addEventListener("click", function (e) { if (e.target.tagName === "A") { e.preventDefault(); var targetId = e.target.getAttribute("href").substring(1); var targetElement = document.getElementById(targetId); var elementPosition = targetElement.getBoundingClientRect().top; var offsetPosition = elementPosition - offset; window.scrollTo({ top: window.pageYOffset + offsetPosition, behavior: "smooth" }); } }); // Highlight active section while scrolling window.addEventListener("scroll", function () { var currentActive = null; headings.forEach(function (heading) { var bounding = heading.getBoundingClientRect(); if (bounding.top <= 100 && bounding.bottom > 100) { currentActive = heading.getAttribute("id"); } }); document.querySelectorAll(".toc-link").forEach(function (link) { link.classList.remove("active"); if (link.getAttribute("href") === "#" + currentActive) { link.classList.add("active"); } }); }); }); </script> <link rel="stylesheet" href="/ekolchatbot/assets/widget.css?v=1.6.0.0" /> <div id="ekolchatbot-container"></div> <script src="/ekolchatbot/assets/widget.js?v=1.6.0.0"></script> </body> </html>