` gibi etiketler bulunur. Bu etiketler, içeriklerinizi düzenlemenizi ve istendiği gibi görüntülemenizi sağlar. Ayrıca, her etiketin bazı özellikleri de vardır; örneğin, `
` etiketiyle bir bağlantı oluşturduğunuzda, ilgili bağlantının adresini belirtmek için `href` özelliğini kullanmalısınız.
HTML, web sayfasının iskeletini oluştururken, HTML ve CSS Temelleri arasında önemli bir köprü işlevi görür. CSS, bu iskelete stil ve görünüm katarken, HTML içeriklerinizi yapılandırır. İkisi birlikte kullanıldığında, çekici ve kullanıcı dostu web sayfaları tasarlamak mümkündür. Özetle, HTML etiketlerini doğru bir şekilde kullanmak, web geliştirme yolculuğunuzda atacağınız en önemli adımlardan biridir.```html
CSS Seçicileri: Ne İşe Yarar ve Nasıl Kullanılır?
HTML ve CSS Temelleri üzerinde çalışırken, CSS seçicileri, web sayfanızın görünümünü özelleştirmek için hayati bir rol oynar. CSS seçicileri, hangi HTML öğelerine stil uygulamak istediğinizi belirlemenizi sağlar. Örneğin, bir sayfadaki belirli başlıkları, paragrafları veya görselleri hedefleyerek onlara farklı renkler, yazı tipleri veya boyutlar gibi stil özellikleri atayabilirsiniz.
En yaygın kullanılan CSS seçicilerinden bazıları sınıf, kimlik ve etiket seçicileridir. Sınıf seçicileri, belirli bir sınıfa ait olan öğelere stil uygulamak için kullanılırken, kimlik seçicileri yalnızca bir tane olan, benzersiz öğeleri hedef almak için idealdir. Etiket seçicileri ise, tüm benzer etiketlere uygulanacak stilleri tanımlar.
CSS seçicileri, hiyerarşik yapısıyla daha karmaşık stiller oluşturmanıza olanak tanır. Örneğin, bir öğenin içine gömülü olan başka bir öğeye stil uygulamak için, seçici hiyerarşisini kullanarak belirli bir konumda olan öğeleri hedefleyebilirsiniz. Bu, daha hedeflenmiş ve etkili bir stil uygulaması sağlar.
Özetlemek gerekirse, CSS seçicileri, web sayfalarınızın düzenini ve görünümünü istenen şekilde biçimlendirmek için son derece önemlidir. HTML ve CSS Temelleri konusundaki bu anlayış, daha etkili ve estetik olarak hoş tasarımlar oluşturmanıza yardımcı olacaktır.
```Sayfa Yapısı: HTML ile Temel Düzen Nasıl Oluşturulur?
ve CSS Temelleri, web tasarımının temel taşlarını oluşturan iki önemli bileşendir. HTML, web sayfalarının yapı taşıdır; bu dil, içerikleri düzenlemek ve sayfaların temel yapısını kurmak için kullanılır. Örneğin, başlıklar, paragraflar, listeler ve bağlantılar gibi unsurlar, HTML etiketleri ile tanımlanır.
Bir web sayfasının nasıl düzenleneceğini anlamak için öncelikle HTML etiketlerini iyi bilmek gerekir. Basit bir sayfa oluşturmak için kullanabileceğiniz bazı temel etiketler şunlardır: ``, ``, ``, `<body>`, `<h1>`, `<p>`, `<a>` gibi etiketler. Bu etiketler, sayfanızın iskeletini oluştururken önemli bir rol oynar.
Örneğin, `<html>` etiketi, bir HTML belgesinin başlangıcını belirtir, `<head>` kısmında sayfanızın başlığı ve stil bilgileri gibi meta veriler bulunur. `<body>` etiketi ise sayfanızda görünen içeriğin yer aldığı kısmı tanımlamak için kullanılır. Başlıklar için `<h1>`'den `<h6>`'ya kadar altı farklı seviye etiket bulunmaktadır. Paragraflar için ise `<p>` etiketi kullanılır.
Sayfanızda bağlantılar oluşturmak için `<a>` etiketi çok kullanışlıdır ve bu etiketin "href" niteliği ile yönlendirmek istediğiniz URL'yi belirtebilirsiniz. Örneğin, "Git" butonunu oluşturmak için basit bir HTML kodu yazabilirsiniz: `<a href="https://www.ornek.com">Git</a>`.
Son olarak, <b>CSS Temelleri</b> ile birlikte kullanıldığında, HTML sayfanızın görsel düzenini ve estetik görünümünü geliştirme imkanı sağlar. Bu iki komplementer dilin birleşimi, işlevsel ve çekici web sayfaları oluşturmanıza olanak tanır. Unutmayın ki, <b><b>HTML ve CSS Temelleri</b></b> konusunda sahip olduğunuz bilgi, web tasarımında yaratıcı olmanıza ve projelerinizi başarıyla hayata geçirmenize büyük katkı sağlayacaktır.<h2>CSS ile Stil Verme: Renkler, Fontlar ve Arka Planlar</h2>
<p><b><b>HTML ve CSS Temelleri</b></b> öğrenirken, web sayfalarınızın görünümünü güzelleştirmek için stil vermenin ne kadar önemli olduğunu fark edeceksiniz. CSS, web sitenizi daha çekici hale getirmek için renkler, fontlar ve arka planlar gibi çeşitli unsurları kullanmanıza olanak tanır.</p>
<p>Renkler, bir siteye ruh hali ve anlam katmanın en etkili yollarından biridir. Örneğin, sıcak renkler (kırmızı, turuncu) genellikle enerji ve heyecanı simgelerken, soğuk renkler (mavi, yeşil) huzur ve sakinlik hissi verir. CSS ile renkleri tanımlarken, adları kullanabilir veya hexadecimal kodları ile tam belirtebilirsiniz. Bu çeşitlilik, tasarımınızın özgün olmasına yardımcı olur.</p>
<p>Fontlar da web tasarımında büyük bir rol oynar. Doğru font seçimi, mesajınızı daha etkili iletmenizi sağlar. Başlıklar için cesur ve dikkat çekici fontlar tercih edebilirken, içerik metinlerinde daha sade ve okunabilir fontlar kullanmak son derece faydalıdır. CSS sayesinde font stilini, boyutunu ve ağırlığını kolaylıkla ayarlayabilirsiniz. Bu, web sayfanızın genel estetiğini güçlendirir.</p>
<p>Arka planlar ise, kullanıcı deneyimini zenginleştirir ve dikkat çekici görsellerle sayfanızı canlandırır. CSS ile arka plana renk, resim veya bir desen ekleyerek sayfanıza derinlik katabilirsiniz. Farklı arka plan stilleri denemek, web sayfanızın farklı kısımlarını vurgulamanızı sağlar ve ziyaretçilerin ilgisini çeker.</p>
<p>Sonuç olarak, <b><b>HTML ve CSS Temelleri</b></b> içinde CSS ile stil verme, web tasarımında kilit bir faktördür. Renkler, fontlar ve arka planlar ile web sitenizin görsel çekiciliğini artırabilir ve kullanıcılarınızla daha iyi bir etkileşim kurabilirsiniz. Bu unsurları etkili bir biçimde kombinlemek, sitenizin profesyonel ve benzersiz görünmesi için oldukça önemlidir.</p><h2>Responsive Tasarım: HTML ve CSS ile Mobil Uyumluluk</h2>
Günümüzde, internet kullanımı her geçen gün artmakta ve mobil cihazların önemi daha da belirginleşmektedir. Bu noktada, web tasarımında <b><b>HTML ve CSS Temelleri</b></b> gereklilik haline gelmiştir. Responsive tasarım, farklı ekran boyutlarına ve cihaz türlerine uyum sağlayabilen web sitelerinin oluşturulmasına olanak tanır. Kullanıcıların deneyimini artırmak için tasarlanan bu yapılar, mobil uyumluluğu sağlamak amacıyla dikkatle işlenmelidir.
Responsive tasarımın en önemli bileşenlerinden biri <b><b>HTML ve CSS Temelleri</b></b>dir. Doğru bir şekilde yapılandırılmış HTML kodları, sayfanın içeriğini tanımlamak için kullanılırken, CSS ile ise bu içeriklerin nasıl görüntüleneceği belirlenir. Özellikle media query kullanımı, belirli ekran boyutlarına göre stil değişiklikleri yaparak mobil uyumluluğu artırmaktadır. Bu sayede, kullanıcılar ister büyük bir masaüstü bilgisayardan, isterse de küçük bir akıllı telefondan web sitenizi rahatlıkla görüntüleyebilir.
Ayrıca, duyarlı görseller ve esnek grid yapıları da responsive tasarımın temel unsurlarındandır. Bu öğelerin dikkatli bir şekilde tasarlanması, hem kullanıcı deneyimini iyileştirir hem de arama motoru optimizasyonuna katkı sağlar. Sonuç olarak, doğru bir responsive tasarım uygulamak, günümüz dijital dünyasında var olmanın en etkili yollarından biridir ve bu süreçte <b><b>HTML ve CSS Temelleri</b></b> büyük bir öneme sahiptir.<h2>Formlar ve Girdi Elemanları: HTML ile Kullanım Detayları</h2>
Formlar, web sitelerinin etkileşimli olmasını sağlayan önemli bileşenlerdir. Kullanıcıların bilgi girmesine, seçim yapmasına ve etkileşimde bulunmasına olanak tanır. <b><b>HTML ve CSS Temelleri</b></b> bağlamında, bir form oluştururken dikkat edilmesi gereken bazı temel unsurlar bulunmaktadır.
HTML’de formlar, <code><form></code> etiketi ile başlar. Bu etiket, form içindeki tüm elemanları kapsayan bir yapı oluşturur. Form elemanları sayesinde kullanıcılar ad, e-posta, şifre gibi bilgilerini girebilirler. Girdi elemanları arasında en yaygın olanları, metin kutuları için <code><input type="text"></code>, şifre alanları için <code><input type="password"></code>, e-posta adresleri için <code><input type="email"></code> ve seçimler için ise <code><select></code> etiketidir.
Ayrıca, her bir girdi elemanı için <b><b>HTML ve CSS Temelleri</b></b> açısından önemli olan <code>name</code> ve <code>id</code> atributları kullanılmalıdır. Bu, form verilerinin sunucuya gönderilirken düzgün bir şekilde tanımlanmasını sağlar. CSS kullanarak form elemanlarının görünümünü özelleştirmek mümkündür. Böylece, formların estetik bir tasarım ile kullanıcı dostu hale gelmesi sağlanabilir.
Formların doğru bir şekilde çalışabilmesi için <code><submit></code> butonları da oldukça önemlidir. Kullanıcı bilgilerinin sunucuya gönderilmesini sağlamak için bu butonlar yer almalıdır. Tasarım açısından, butonların dikkat çekici olması ve kolayca bulunabilmesi kullanıcı deneyimini olumlu yönde etkiler.
Sonuç olarak, <b><b>HTML ve CSS Temelleri</b></b> bilgisi ile oluşturulan formlar, bir web sitesinin etkileşimini artıran kritik elemanlardır. Doğru kullanım, kullanıcıların form aracılığıyla hızlı ve eğlenceli bir deneyim yaşamalarını sağlarken, geliştiricilere de esneklik sunar.<h2>CSS Box Model: Alan, Kenarlık ve Kenar Boşlukları</h2>
CSS, web tasarımının en önemli bileşenlerinden biridir ve <b><b>HTML ve CSS Temelleri</b></b> içinde öğrenilmesi gereken temel kavramlardan biridir. CSS Box Model, her bir HTML elemanının nasıl görüntülendiğini ve yer kapladığını anlamanın anahtarıdır. Bu model, her bir öğenin iç yapısını belirler ve üç ana bileşenden oluşur: alan (content), kenarlık (border) ve kenar boşlukları (margin).
Öncelikle, "alan" terimi, bir öğenin içindeki gerçek içeriği ifade eder. Bu, metin, resim veya başka herhangi bir nesne olabilir. Alan, öğenin en iç kısmını temsil eder ve boyutları, width ve height özellikleri ile kontrol edilebilir.
Sonra, "kenarlık" gelir. Kenarlık, alanın çevresinde yer alan görünür bir çerçevenin temsilidir. Bu çerçeve, farklı renkler, kalınlıklar ve stillerle özelleştirilebilir ve böylece tasarımın estetiğini artırır. Kenarlığın kalınlığını değiştirmek, tasarımın genel görünümüne büyük bir etki yapabilir.
Son olarak, "kenar boşlukları", bir öğenin etrafındaki boş alanı ifade eder. Margin, öğelerin birbirleriyle arasındaki mesafeyi ayarlamaya yarar. Bu boşluk, tasarımın dengesi için oldukça önemlidir ve öğelerin birbiriyle daha iyi bir şekilde hizalanmasına yardımcı olur.
CSS Box Model, <b><b>HTML ve CSS Temelleri</b></b> arasında sağlam bir temel oluşturur ve web geliştiricilerin tasarımda doğru yerleşim ve boyutlandırma yapmalarını sağlar. Bu modelin bileşenlerini anlamak, daha etkili ve şık web sayfaları yaratmanın yolu olacaktır.<h2>HTML5 ve CSS3: Yeni Özellikler ve Farklar</h2>
HTML ve CSS, web tasarımının temel yapı taşlarıdır. Bu iki teknoloji, web sayfalarının görünümünü ve içeriğini yönetmek için kullanılır. Ancak son yıllarda, HTML5 ve CSS3 ile birlikte birçok yenilik eklenmiştir. <b><b>HTML ve CSS Temelleri</b></b> ile ilgili yapılan bu güncellemeler, geliştiricilere daha fazla esneklik ve işlevsellik sunmaktadır.
HTML5, daha zengin ve etkileşimli içerikler oluşturmak için birçok yeni etiket ve özellik getirmiştir. Örneğin, video ve ses gibi medya öğelerini doğrudan sayfaya eklemek için yeni etiketler eklenmiştir. Bu, geliştiricilerin dış kaynaklara bağımlılığını azaltırken, kullanıcı deneyimini de iyileştirir. Ayrıca, HTML5 ile birlikte gelen semantik etiketler, sayfaların daha kolay anlaşılabilir olmasını sağlar. Böylece arama motorları, sayfanın içeriğini daha doğru bir şekilde analiz edebilir.
Öte yandan, CSS3 ise, görsel tasarımı daha zengin hale getirmek için birçok yeni stil özelliği sunmuştur. CSS3 ile birlikte gelen medya sorguları, web sitelerinin farklı cihazlarda ve ekran boyutlarında en iyi şekilde görüntülenmesini sağlar. Bu da "responsive" (duyarlı) tasarımın temelini oluşturur. Ayrıca, CSS3 ile eklenen geometri, animasyon ve geçiş efektleri, web sayfalarını daha dinamik ve ilgi çekici hale getirir.
Sonuç olarak, <b><b>HTML ve CSS Temelleri</b></b> üzerinde yapılan bu geliştirmeler, web tasarımında devrim niteliğindedir. Geliştiriciler, HTML5 ve CSS3'ün sunduğu yeni özellikler sayesinde daha işlevsel ve kullanıcı dostu web sayfaları oluşturabilirler. Bu da son kullanıcılar için daha akıcı ve keyifli bir deneyim sağlar.<h2>Temel Projeler: HTML ve CSS ile Uygulama Önerileri</h2>
<b>HTML ve CSS Temelleri</b>, web geliştirme dünyasında önemli bir yere sahiptir. Bu iki güçlü araç, kullanıcıların sıradan bir web sayfasından etkileyici bir internet deneyimine geçiş yapmasına olanak tanır. Eğer bu konularda yeniyseniz, başlamak için çeşitli basit projeler yaparak pratik yapabilirsiniz.
İlk olarak, kişisel bir web sitesi oluşturabilir ve burada kendinizi tanıtan bir "Hakkımda" bölümü ekleyebilirsiniz. Basit bir tasarım ile HTML ve CSS ile düzenleme yaparak, sayfanızın nasıl göründüğünü ve kullanıcı etkileşimini deneyimleyebilirsiniz.
Bir diğer fikir, bir portföy sitesi hazırlamaktır. Çalışmalarınızı sergilemek için şık bir düzen ve göz alıcı stil eklemek, hem öğrenmenizi hızlandırır hem de yaratıcı yönlerinizi ortaya çıkarmanıza yardımcı olur. Bu tip bir proje, <b>HTML ve CSS</b> bilgilerinizin pekişmesine ve kullanıcı deneyimini gözlemlemenize olanak tanır.
Son olarak, bir basit blog tasarlamak da harika bir projedir. Farklı sayfa yapıları, yazı stilleri ve başlık düzenleri ile <b>HTML ve CSS</b> kullanarak, gerçekten etkileyici bir içerik sunabilirsiniz. Bu süreçte, tema seçimi ve renk paleti gibi unsurlar üzerinde düşünmek, tasarım yeteneklerinizi geliştirir.
Bu önerilerle birlikte, <b>HTML ve CSS</b> temellerini pekiştirmek ve yeteneklerinizi artırmak için eğlenceli ve öğretici projelere adım atabilirsiniz.
</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=Web Geliştirme" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
Web Geliştirme
</a>
<a href="/tr/blog?tag=CSS Temelleri" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
CSS Temelleri
</a>
<a href="/tr/blog?tag=HTML Temelleri" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
HTML Temelleri
</a>
<a href="/tr/blog?tag=Temel Tasarım" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
Temel Tasarım
</a>
<a href="/tr/blog?tag=Frontend Eğitimi" class="px-3 py-1.5 glass-card text-sm text-gray-400 hover:text-white transition-colors rounded-lg">
Frontend Eğitimi
</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%2Fhtml-ve-css-temelleri&text=HTML%20ve%20CSS%20Temelleri" 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%2Fhtml-ve-css-temelleri" 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%2Fhtml-ve-css-temelleri" 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%20ve%20CSS%20Temelleri&body=https%3A%2F%2Fekolsoft.com%2Ftr%2Fb%2Fhtml-ve-css-temelleri" 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>
