Halkali Merkez Viertel Fatih Str. Ozgur Apt. No. 46, Kucukcekmece, Istanbul, 34303, TR
Lernen Sie die Grundlagen der Webentwicklung mit unserer umfassenden Wissensdatenbank zur Webentwicklung. Von HTML-Grundlagen bis hin zu fortgeschrittenen PHP-Techniken haben wir alles für Sie.
Unsere Schritt-für-Schritt-Anleitungen, Codebeispiele und Best Practices helfen Ihnen dabei, Ihre Webentwicklungsfähigkeiten auszubauen und professionelle Websites zu erstellen.
Erfahren Sie, wie Sie Webinhalte mit HTML strukturieren
Gestalten Sie attraktive Websites mit CSS
Erstellen Sie dynamische Websites mit PHP
Fügen Sie Ihren Seiten Interaktivität hinzu
Lernen Sie die grundlegenden Bausteine der Webentwicklung kennen
HTML (Hypertext Markup Language) ist die Standard-Markup-Sprache zum Erstellen von Webseiten. HTML beschreibt die Struktur einer Webseite semantisch und enthält ursprünglich Hinweise für das Erscheinungsbild des Dokuments.
Türkei (Türkisch)
Germany (German)
Worldwide (English)
<!DOCTYPE html>
<html>
<head>
<title>Merhaba Dünya</title>
<meta charset="utf-8">
</head>
<body>
<h1>Merhaba Dünya</h1>
<p>Bu benim ilk web sayfam!</p>
</body>
</html>Erläuterung:
</code>: Gibt einen Titel für das Dokument an</li>
<li><code><meta charset="utf-8"></code>: Gibt die Zeichenkodierung für das Dokument an</li>
<li><code><body></code>: Enthält den sichtbaren Seiteninhalt</li>
<li><code><h1></code>: Definiert eine große Überschrift</li>
<li><code><p></code>: Definiert einen Absatz</li>
</ul> </div>
<h4 class="mt-4">HTML-Elemente und Tags</h4>
<p>HTML-Elemente werden durch Tags dargestellt. Tags bestehen aus dem Elementnamen in spitzen Klammern.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight"><h1></span>Bu bir başlıktır<span class="tag-highlight"></h1></span>
<span class="tag-highlight"><h2></span>Bu ikinci seviye bir başlıktır<span class="tag-highlight"></h2></span>
<span class="tag-highlight"><h3></span>Bu üçüncü seviye bir başlıktır<span class="tag-highlight"></h3></span>
<span class="tag-highlight"><p></span>Bu bir paragraftır.<span class="tag-highlight"></p></span>
<span class="tag-highlight"><a</span> <span class="attribute-highlight">href=</span><span class="value-highlight">"https://www.example.com"</span><span class="tag-highlight">></span>Bu bir bağlantıdır<span class="tag-highlight"></a></span>
<span class="tag-highlight"><img</span> <span class="attribute-highlight">src=</span><span class="value-highlight">"resim.jpg"</span> <span class="attribute-highlight">alt=</span><span class="value-highlight">"Beschreibung metni"</span><span class="tag-highlight">></span></code></pre>
</div>
<div class="explanation">
<p><strong>Gemeinsame HTML-Tags:</strong></p>
<ul>
<li><code><h1></code> bis <code><h6></code>: Überschriften (h1 ist am wichtigsten, h6 ist am unwichtigsten)</li>
<li><code><p></code>: Absatz</li>
<li><code><a></code>: Anker (Link)</li>
<li><code><img></code>: Bild</li>
<li><code><div></code>: Abteilung oder Abschnitt</li>
<li><code><span></code>: Inline-Container</li>
<li><code><ul></code>, <code><ol></code>, <code><li></code>: Ungeordnete Liste, geordnete Liste, Listenelement</li>
<li><code><table></code>, <code><tr></code>, <code><td></code>: Tabelle, Tabellenzeile, Tabellendaten</li>
<li><code><form></code>, <code><input></code>, <code><button></code>: Formularelemente</li>
</ul> </div>
<h4 class="mt-4">HTML-Attribute</h4>
<p>HTML-Attribute liefern zusätzliche Informationen zu HTML-Elementen. Attribute werden immer im Start-Tag angegeben und liegen normalerweise in Name/Wert-Paaren wie: name="value" vor.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight"><a</span> <span class="attribute-highlight">href=</span><span class="value-highlight">"https://www.example.com"</span> <span class="attribute-highlight">target=</span><span class="value-highlight">"_blank"</span><span class="tag-highlight">></span>Yeni sekmede aç<span class="tag-highlight"></a></span>
<span class="tag-highlight"><img</span> <span class="attribute-highlight">src=</span><span class="value-highlight">"logo.png"</span> <span class="attribute-highlight">alt=</span><span class="value-highlight">"Logo"</span> <span class="attribute-highlight">width=</span><span class="value-highlight">"100"</span> <span class="attribute-highlight">height=</span><span class="value-highlight">"50"</span><span class="tag-highlight">></span>
<span class="tag-highlight"><div</span> <span class="attribute-highlight">class=</span><span class="value-highlight">"container"</span> <span class="attribute-highlight">id=</span><span class="value-highlight">"main"</span><span class="tag-highlight">></span>
Inhalt burada
<span class="tag-highlight"></div></span></code></pre>
</div>
<div class="explanation">
<p><strong>Gemeinsame HTML-Attribute:</strong></p>
<ul>
<li><code>href</code>: Gibt die URL der Seite an, zu der der Link führt</li>
<li><code>src</code>: Gibt den Pfad zum anzuzeigenden Bild an</li>
<li><code>alt</code>: Gibt einen alternativen Text für ein Bild an</li>
<li><code>id</code>: Gibt eine eindeutige ID für ein Element an</li>
<li><code>class</code>: Gibt einen oder mehrere Klassennamen für ein Element an</li>
<li><code>Stil</code>: Gibt einen Inline-CSS-Stil für ein Element an</li>
<li><code>Titel</code>: Gibt zusätzliche Informationen zu einem Element an (wird als Tooltip angezeigt)</li>
</ul> </div>
</div>
</div>
</div>
</div>
<!-- PHP Bölümü -->
<div class="content-section bg-light py-5">
<div class="container">
<div class="code-card mb-5">
<div class="code-card-header">
<i class="fab fa-php"></i>
PHP: Dynamische Webseiten </div>
<div class="code-card-body">
<p>PHP (Hypertext Preprocessor) ist eine serverseitige Skriptsprache, die für die Webentwicklung entwickelt wurde. PHP-Code wird auf dem Server ausgeführt und generiert HTML, das dann an den Client gesendet wird. Mit PHP können Sie dynamische Webseiten erstellen und mit Datenbanken interagieren.</p>
<h4 class="mt-4">Grundlegende PHP-Syntax</h4>
<p>PHP-Code ist in spezielle Start- und Endverarbeitungsanweisungen <code><?php</code> und <code>?></code> eingeschlossen, die es Ihnen ermöglichen, in den „PHP-Modus“ zu wechseln und ihn zu verlassen.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight"><!DOCTYPE html></span>
<span class="tag-highlight"><html></span>
<span class="tag-highlight"><head></span>
<span class="tag-highlight"><title></span>PHP Beispiel<span class="tag-highlight"></title></span>
<span class="tag-highlight"></head></span>
<span class="tag-highlight"><body></span>
<span class="tag-highlight"><h1></span>Merhaba PHP<span class="tag-highlight"></h1></span>
<span class="tag-highlight"><?php</span>
<span class="value-highlight">// PHP kodu burada</span>
<span class="attribute-highlight">$mesaj</span> = <span class="value-highlight">"Merhaba, Dünya!"</span>;
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>$mesaj</p>"</span>;
<span class="tag-highlight">$sayi1</span> = <span class="value-highlight">10</span>;
<span class="tag-highlight">$sayi2</span> = <span class="value-highlight">5</span>;
<span class="tag-highlight">$toplam</span> = <span class="tag-highlight">$sayi1</span> + <span class="tag-highlight">$sayi2</span>;
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>$sayi1 + $sayi2 = $toplam</p>"</span>;
<span class="tag-highlight">?></span>
<span class="tag-highlight"></body></span>
<span class="tag-highlight"></html></span></code></pre>
</div>
<div class="explanation">
<p><strong>Erläuterung:</strong></p>
<ul>
<li><code><?php</code> und <code>?></code>: PHP-Code ist in diesen Tags eingeschlossen</li>
<li><code>//</code>: Einzeiliger Kommentar</li>
<li><code>$mesaj</code>: Variablen in PHP beginnen mit einem Dollarzeichen ($)</li>
<li><code>echo</code>: Gibt Text an den Browser aus</li>
<li>String-Verkettung und Operationen in PHP</li>
</ul> </div>
<h4 class="mt-4">Variablen und Datentypen</h4>
<p>In PHP beginnen Variablen mit einem Dollarzeichen ($), gefolgt vom Namen der Variablen. PHP ist eine lose typisierte Sprache, was bedeutet, dass Sie den Datentyp einer Variablen nicht deklarieren müssen.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight"><?php</span>
<span class="value-highlight">// String (Metin)</span>
<span class="attribute-highlight">$ad</span> = <span class="value-highlight">"Ahmet"</span>;
<span class="attribute-highlight">$soyad</span> = <span class="value-highlight">'Yılmaz'</span>;
<span class="value-highlight">// Integer (Tamsayı)</span>
<span class="attribute-highlight">$yas</span> = <span class="value-highlight">25</span>;
<span class="value-highlight">// Float (Ondalıklı sayı)</span>
<span class="attribute-highlight">$boy</span> = <span class="value-highlight">1.78</span>;
<span class="value-highlight">// Boolean (Mantıksal)</span>
<span class="attribute-highlight">$aktif</span> = <span class="value-highlight">true</span>;
<span class="value-highlight">// Array (Dizi)</span>
<span class="attribute-highlight">$renkler</span> = <span class="tag-highlight">array</span>(<span class="value-highlight">"Kırmızı"</span>, <span class="value-highlight">"Mavi"</span>, <span class="value-highlight">"Yeşil"</span>);
<span class="attribute-highlight">$meyveler</span> = [<span class="value-highlight">"Elma"</span>, <span class="value-highlight">"Armut"</span>, <span class="value-highlight">"Muz"</span>]; <span class="value-highlight">// PHP 5.4+ sözdizimi</span>
<span class="value-highlight">// Değişken içeriğini görüntüleme</span>
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>Merhaba, $ad $soyad</p>"</span>;
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>Yaş: $yas, Boy: $boy metre</p>"</span>;
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>Durum: "</span> . (<span class="attribute-highlight">$aktif</span> ? <span class="value-highlight">"Aktif"</span> : <span class="value-highlight">"Pasif"</span>) . <span class="value-highlight">"</p>"</span>;
<span class="value-highlight">// Dizi içeriğini yazdırma</span>
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>İlk renk: "</span> . <span class="attribute-highlight">$renkler</span>[<span class="value-highlight">0</span>] . <span class="value-highlight">"</p>"</span>;
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>İkinci meyve: "</span> . <span class="attribute-highlight">$meyveler</span>[<span class="value-highlight">1</span>] . <span class="value-highlight">"</p>"</span>;
<span class="tag-highlight">?></span></code></pre>
</div>
<h4 class="mt-4">Bedingte PHP-Anweisungen</h4>
<p>Bedingte Anweisungen werden verwendet, um unterschiedliche Aktionen basierend auf unterschiedlichen Bedingungen auszuführen.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight"><?php</span>
<span class="attribute-highlight">$saat</span> = <span class="tag-highlight">date</span>(<span class="value-highlight">"H"</span>); <span class="value-highlight">// Mevcut saat (0-23)</span>
<span class="tag-highlight">if</span> (<span class="attribute-highlight">$saat</span> < <span class="value-highlight">12</span>) {
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>Günaydın!</p>"</span>;
} <span class="tag-highlight">elseif</span> (<span class="attribute-highlight">$saat</span> < <span class="value-highlight">18</span>) {
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>İyi Tagler!</p>"</span>;
} <span class="tag-highlight">else</span> {
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>İyi akşamlar!</p>"</span>;
}
<span class="value-highlight">// Switch-case kullanımı</span>
<span class="attribute-highlight">$gun</span> = <span class="tag-highlight">date</span>(<span class="value-highlight">"N"</span>); <span class="value-highlight">// Haftanın Tagü (1-7)</span>
<span class="tag-highlight">switch</span> (<span class="attribute-highlight">$gun</span>) {
<span class="tag-highlight">case</span> <span class="value-highlight">1</span>:
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>BuTag Pazartesi</p>"</span>;
<span class="tag-highlight">break</span>;
<span class="tag-highlight">case</span> <span class="value-highlight">2</span>:
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>BuTag Salı</p>"</span>;
<span class="tag-highlight">break</span>;
<span class="tag-highlight">case</span> <span class="value-highlight">3</span>:
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>BuTag Çarşamba</p>"</span>;
<span class="tag-highlight">break</span>;
<span class="tag-highlight">case</span> <span class="value-highlight">4</span>:
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>BuTag Perşembe</p>"</span>;
<span class="tag-highlight">break</span>;
<span class="tag-highlight">case</span> <span class="value-highlight">5</span>:
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>BuTag Cuma</p>"</span>;
<span class="tag-highlight">break</span>;
<span class="tag-highlight">default</span>:
<span class="tag-highlight">echo</span> <span class="value-highlight">"<p>BuTag hafta sonu</p>"</span>;
}
<span class="tag-highlight">?></span></code></pre>
</div>
<h4 class="mt-4">PHP-Schleifen</h4>
<p>Schleifen werden verwendet, um denselben Codeblock wiederholt auszuführen, bis eine bestimmte Bedingung erfüllt ist.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight"><?php</span>
<span class="value-highlight">// For döngüsü</span>
<span class="tag-highlight">echo</span> <span class="value-highlight">"<h4>For Döngüsü</h4>"</span>;
<span class="tag-highlight">echo</span> <span class="value-highlight">"<ul>"</span>;
<span class="tag-highlight">for</span> (<span class="attribute-highlight">$i</span> = <span class="value-highlight">1</span>; <span class="attribute-highlight">$i</span> <= <span class="value-highlight">5</span>; <span class="attribute-highlight">$i</span>++) {
<span class="tag-highlight">echo</span> <span class="value-highlight">"<li>Öğe $i</li>"</span>;
}
<span class="tag-highlight">echo</span> <span class="value-highlight">"</ul>"</span>;
<span class="value-highlight">// While döngüsü</span>
<span class="tag-highlight">echo</span> <span class="value-highlight">"<h4>While Döngüsü</h4>"</span>;
<span class="tag-highlight">echo</span> <span class="value-highlight">"<ul>"</span>;
<span class="attribute-highlight">$j</span> = <span class="value-highlight">1</span>;
<span class="tag-highlight">while</span> (<span class="attribute-highlight">$j</span> <= <span class="value-highlight">5</span>) {
<span class="tag-highlight">echo</span> <span class="value-highlight">"<li>Öğe $j</li>"</span>;
<span class="attribute-highlight">$j</span>++;
}
<span class="tag-highlight">echo</span> <span class="value-highlight">"</ul>"</span>;
<span class="value-highlight">// Foreach döngüsü (diziler für)</span>
<span class="attribute-highlight">$meyveler</span> = [<span class="value-highlight">"Elma"</span>, <span class="value-highlight">"Portakal"</span>, <span class="value-highlight">"Muz"</span>, <span class="value-highlight">"Çilek"</span>, <span class="value-highlight">"Kivi"</span>];
<span class="tag-highlight">echo</span> <span class="value-highlight">"<h4>Foreach Döngüsü</h4>"</span>;
<span class="tag-highlight">echo</span> <span class="value-highlight">"<ul>"</span>;
<span class="tag-highlight">foreach</span> (<span class="attribute-highlight">$meyveler</span> <span class="tag-highlight">as</span> <span class="attribute-highlight">$meyve</span>) {
<span class="tag-highlight">echo</span> <span class="value-highlight">"<li>$meyve</li>"</span>;
}
<span class="tag-highlight">echo</span> <span class="value-highlight">"</ul>"</span>;
<span class="value-highlight">// Anahtarlı dizi ile foreach</span>
<span class="attribute-highlight">$kisi</span> = [
<span class="value-highlight">"ad"</span> => <span class="value-highlight">"Ahmet"</span>,
<span class="value-highlight">"soyad"</span> => <span class="value-highlight">"Yılmaz"</span>,
<span class="value-highlight">"yas"</span> => <span class="value-highlight">25</span>,
<span class="value-highlight">"sehir"</span> => <span class="value-highlight">"İstanbul"</span>
];
<span class="tag-highlight">echo</span> <span class="value-highlight">"<h4>Kişi Bilgileri</h4>"</span>;
<span class="tag-highlight">echo</span> <span class="value-highlight">"<ul>"</span>;
<span class="tag-highlight">foreach</span> (<span class="attribute-highlight">$kisi</span> <span class="tag-highlight">as</span> <span class="attribute-highlight">$anahtar</span> => <span class="attribute-highlight">$deger</span>) {
<span class="tag-highlight">echo</span> <span class="value-highlight">"<li><strong>"</span> . <span class="tag-highlight">ucfirst</span>(<span class="attribute-highlight">$anahtar</span>) . <span class="value-highlight">"</strong>: $deger</li>"</span>;
}
<span class="tag-highlight">echo</span> <span class="value-highlight">"</ul>"</span>;
<span class="tag-highlight">?></span></code></pre>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Bölümü -->
<div class="content-section py-5">
<div class="container">
<div class="code-card mb-5">
<div class="code-card-header">
<i class="fab fa-css3-alt"></i>
CSS: Webseiten gestalten </div>
<div class="code-card-body">
<p>CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die zur Beschreibung der Darstellung eines in HTML geschriebenen Dokuments verwendet wird. CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in Sprache oder auf anderen Medien gerendert werden sollen.</p>
<h4 class="mt-4">Grundlegende CSS-Syntax</h4>
<p>CSS besteht aus einem Selektor und einem Deklarationsblock. Der Selektor zeigt auf das HTML-Element, das Sie formatieren möchten, und der Deklarationsblock enthält eine oder mehrere durch Semikolons getrennte Deklarationen.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight">/* Temel CSS sözdizimi */</span>
<span class="attribute-highlight">selector</span> {
<span class="attribute-highlight">property</span>: <span class="value-highlight">value</span>;
<span class="attribute-highlight">property</span>: <span class="value-highlight">value</span>;
}
<span class="tag-highlight">/* Örnek */</span>
<span class="attribute-highlight">h1</span> {
<span class="attribute-highlight">color</span>: <span class="value-highlight">#333333</span>;
<span class="attribute-highlight">font-size</span>: <span class="value-highlight">24px</span>;
<span class="attribute-highlight">font-family</span>: <span class="value-highlight">Arial, sans-serif</span>;
<span class="attribute-highlight">text-align</span>: <span class="value-highlight">center</span>;
}
<span class="attribute-highlight">p</span> {
<span class="attribute-highlight">color</span>: <span class="value-highlight">#666666</span>;
<span class="attribute-highlight">font-size</span>: <span class="value-highlight">16px</span>;
<span class="attribute-highlight">line-height</span>: <span class="value-highlight">1.5</span>;
<span class="attribute-highlight">margin-bottom</span>: <span class="value-highlight">15px</span>;
}</code></pre>
</div>
<div class="explanation">
<p><strong>Erläuterung:</strong></p>
<ul>
<li><code>selector</code>: Zeigt auf das HTML-Element, das Sie formatieren möchten (wie h1, p, div usw.)</li>
<li><code>property</code>: Die Stileigenschaft, die Sie ändern möchten (wie Farbe, Schriftgröße usw.)</li>
<li><code>Wert</code>: Der Wert für die Eigenschaft (wie Blau, 20 Pixel usw.)</li>
</ul> </div>
<h4 class="mt-4">CSS-Selektoren</h4>
<p>CSS-Selektoren werden verwendet, um die HTML-Elemente zu „finden“ (oder auszuwählen), die Sie formatieren möchten.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight">/* Element Seçici */</span>
<span class="attribute-highlight">h1</span> {
<span class="attribute-highlight">color</span>: <span class="value-highlight">blue</span>;
}
<span class="tag-highlight">/* ID Seçici */</span>
<span class="attribute-highlight">#header</span> {
<span class="attribute-highlight">background-color</span>: <span class="value-highlight">#f0f0f0</span>;
<span class="attribute-highlight">padding</span>: <span class="value-highlight">10px</span>;
}
<span class="tag-highlight">/* Sınıf Seçici */</span>
<span class="attribute-highlight">.btn</span> {
<span class="attribute-highlight">display</span>: <span class="value-highlight">inline-block</span>;
<span class="attribute-highlight">padding</span>: <span class="value-highlight">10px 20px</span>;
<span class="attribute-highlight">background-color</span>: <span class="value-highlight">#4CAF50</span>;
<span class="attribute-highlight">color</span>: <span class="value-highlight">white</span>;
<span class="attribute-highlight">border-radius</span>: <span class="value-highlight">4px</span>;
}
<span class="tag-highlight">/* Çocuk Seçici */</span>
<span class="attribute-highlight">ul > li</span> {
<span class="attribute-highlight">margin-bottom</span>: <span class="value-highlight">5px</span>;
}
<span class="tag-highlight">/* Pseudo-class Seçici */</span>
<span class="attribute-highlight">a:hover</span> {
<span class="attribute-highlight">color</span>: <span class="value-highlight">red</span>;
<span class="attribute-highlight">text-decoration</span>: <span class="value-highlight">underline</span>;
}</code></pre>
</div>
<h4 class="mt-4">CSS-Box-Modell</h4>
<p>Das CSS-Box-Modell ist im Wesentlichen eine Box, die jedes HTML-Element umschließt. Es besteht aus Rändern, Rändern, Innenabständen und dem eigentlichen Inhalt.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="attribute-highlight">.box</span> {
<span class="attribute-highlight">width</span>: <span class="value-highlight">300px</span>;
<span class="attribute-highlight">height</span>: <span class="value-highlight">200px</span>;
<span class="attribute-highlight">padding</span>: <span class="value-highlight">20px</span>;
<span class="attribute-highlight">border</span>: <span class="value-highlight">5px solid #333</span>;
<span class="attribute-highlight">margin</span>: <span class="value-highlight">30px</span>;
<span class="attribute-highlight">background-color</span>: <span class="value-highlight">#f0f0f0</span>;
}
<span class="tag-highlight">/* Box-sizing speziellliği */</span>
<span class="attribute-highlight">* </span>{
<span class="attribute-highlight">box-sizing</span>: <span class="value-highlight">border-box</span>; <span class="tag-highlight">/* Genişlik ve yükseklik, padding ve border'ı içerir */</span>
}</code></pre>
</div>
<h4 class="mt-4">CSS-Layouttechniken</h4>
<p>CSS bietet verschiedene Layouttechniken zum Entwerfen reaktionsfähiger und flexibler Webseiten.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight">/* Flexbox Layout */</span>
<span class="attribute-highlight">.container</span> {
<span class="attribute-highlight">display</span>: <span class="value-highlight">flex</span>;
<span class="attribute-highlight">justify-content</span>: <span class="value-highlight">space-between</span>;
<span class="attribute-highlight">align-items</span>: <span class="value-highlight">center</span>;
<span class="attribute-highlight">flex-wrap</span>: <span class="value-highlight">wrap</span>;
}
<span class="attribute-highlight">.item</span> {
<span class="attribute-highlight">flex</span>: <span class="value-highlight">1 0 200px</span>; <span class="tag-highlight">/* grow shrink basis */</span>
<span class="attribute-highlight">margin</span>: <span class="value-highlight">10px</span>;
}
<span class="tag-highlight">/* Grid Layout */</span>
<span class="attribute-highlight">.grid-container</span> {
<span class="attribute-highlight">display</span>: <span class="value-highlight">grid</span>;
<span class="attribute-highlight">grid-template-columns</span>: <span class="value-highlight">repeat(3, 1fr)</span>;
<span class="attribute-highlight">grid-gap</span>: <span class="value-highlight">20px</span>;
}
<span class="tag-highlight">/* Responsive Design with Media Queries */</span>
<span class="tag-highlight">@media (max-width: 768px)</span> {
<span class="attribute-highlight">.grid-container</span> {
<span class="attribute-highlight">grid-template-columns</span>: <span class="value-highlight">repeat(2, 1fr)</span>;
}
}
<span class="tag-highlight">@media (max-width: 480px)</span> {
<span class="attribute-highlight">.grid-container</span> {
<span class="attribute-highlight">grid-template-columns</span>: <span class="value-highlight">1fr</span>;
}
}</code></pre>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bölümü -->
<div class="content-section bg-light py-5">
<div class="container">
<div class="code-card mb-5">
<div class="code-card-header">
<i class="fab fa-js"></i>
JavaScript: Interaktivität hinzufügen </div>
<div class="code-card-body">
<p>JavaScript ist eine Programmiersprache, die interaktive Webseiten ermöglicht. Es ist ein wesentlicher Bestandteil von Webanwendungen und wird von der überwiegenden Mehrheit der Websites für das clientseitige Seitenverhalten verwendet.</p>
<h4 class="mt-4">Grundlegende JavaScript-Syntax</h4>
<p>JavaScript kann direkt in HTML oder in externen .js-Dateien hinzugefügt werden. So fügen Sie Ihren Webseiten JavaScript hinzu:</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight"><!-- HTML in JavaScript --></span>
<span class="tag-highlight"><script></span>
<span class="tag-highlight">// Arbeitte basit bir JavaScript kodu</span>
<span class="tag-highlight">document</span>.<span class="attribute-highlight">getElementById</span>(<span class="value-highlight">'demo'</span>).<span class="attribute-highlight">innerHTML</span> = <span class="value-highlight">'Merhaba, JavaScript!'</span>;
<span class="tag-highlight">// Değişkenler tanımlama</span>
<span class="tag-highlight">let</span> <span class="attribute-highlight">isim</span> = <span class="value-highlight">'Ahmet'</span>;
<span class="tag-highlight">const</span> <span class="attribute-highlight">YAS</span> = <span class="value-highlight">30</span>;
<span class="tag-highlight">var</span> <span class="attribute-highlight">aktif</span> = <span class="value-highlight">true</span>;
<span class="tag-highlight">// Fonksiyon tanımlama</span>
<span class="tag-highlight">function</span> <span class="attribute-highlight">selamVer</span>(<span class="attribute-highlight">ad</span>) {
<span class="tag-highlight">return</span> <span class="value-highlight">'Merhaba, '</span> + <span class="attribute-highlight">ad</span> + <span class="value-highlight">'!'</span>;
}
<span class="tag-highlight">// Fonksiyonu çağırma</span>
<span class="tag-highlight">console</span>.<span class="attribute-highlight">log</span>(<span class="attribute-highlight">selamVer</span>(<span class="attribute-highlight">isim</span>));
<span class="tag-highlight"></script></span>
<span class="tag-highlight"><!-- Harici JavaScript dosyası --></span>
<span class="tag-highlight"><script</span> <span class="attribute-highlight">src=</span><span class="value-highlight">"script.js"</span><span class="tag-highlight">></script></span></code></pre>
</div>
<h4 class="mt-4">DOM-Manipulation</h4>
<p>Das Document Object Model (DOM) ist eine Programmierschnittstelle für Webdokumente. JavaScript kann alle HTML-Elemente, Attribute und CSS-Stile auf der Seite ändern.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight">// HTML öğelerini seçme</span>
<span class="tag-highlight">const</span> <span class="attribute-highlight">baslik</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">getElementById</span>(<span class="value-highlight">'baslik'</span>);
<span class="tag-highlight">const</span> <span class="attribute-highlight">paragraflar</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">getElementsByTagName</span>(<span class="value-highlight">'p'</span>);
<span class="tag-highlight">const</span> <span class="attribute-highlight">butonlar</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">getElementsByClassName</span>(<span class="value-highlight">'btn'</span>);
<span class="tag-highlight">const</span> <span class="attribute-highlight">ilkButon</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">querySelector</span>(<span class="value-highlight">'.btn'</span>);
<span class="tag-highlight">const</span> <span class="attribute-highlight">tumButonlar</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">querySelectorAll</span>(<span class="value-highlight">'.btn'</span>);
<span class="tag-highlight">// Inhalt değiştirme</span>
<span class="attribute-highlight">baslik</span>.<span class="attribute-highlight">textContent</span> = <span class="value-highlight">'Yeni Titel'</span>;
<span class="attribute-highlight">baslik</span>.<span class="attribute-highlight">innerHTML</span> = <span class="value-highlight">'<em>Vurgulu</em> Titel'</span>;
<span class="tag-highlight">// Stil değiştirme</span>
<span class="attribute-highlight">baslik</span>.<span class="attribute-highlight">style</span>.<span class="attribute-highlight">color</span> = <span class="value-highlight">'blue'</span>;
<span class="attribute-highlight">baslik</span>.<span class="attribute-highlight">style</span>.<span class="attribute-highlight">fontSize</span> = <span class="value-highlight">'24px'</span>;
<span class="tag-highlight">// Sınıf ekleme ve kaldırma</span>
<span class="attribute-highlight">baslik</span>.<span class="attribute-highlight">classList</span>.<span class="attribute-highlight">add</span>(<span class="value-highlight">'vurgulu'</span>);
<span class="attribute-highlight">baslik</span>.<span class="attribute-highlight">classList</span>.<span class="attribute-highlight">remove</span>(<span class="value-highlight">'gizli'</span>);
<span class="attribute-highlight">baslik</span>.<span class="attribute-highlight">classList</span>.<span class="attribute-highlight">toggle</span>(<span class="value-highlight">'aktif'</span>);
<span class="tag-highlight">// Yeni öğe erstellenma ve ekleme</span>
<span class="tag-highlight">const</span> <span class="attribute-highlight">yeniParagraf</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">createElement</span>(<span class="value-highlight">'p'</span>);
<span class="attribute-highlight">yeniParagraf</span>.<span class="attribute-highlight">textContent</span> = <span class="value-highlight">'Bu yeni bir paragraftır.'</span>;
<span class="tag-highlight">document</span>.<span class="attribute-highlight">body</span>.<span class="attribute-highlight">appendChild</span>(<span class="attribute-highlight">yeniParagraf</span>);</code></pre>
</div>
<h4 class="mt-4">Ereignisbehandlung</h4>
<p>JavaScript kann ausgeführt werden, wenn ein Ereignis eintritt, beispielsweise wenn ein Benutzer auf ein HTML-Element klickt.</p>
<div class="code-example">
<button class="copy-btn">
<i class="far fa-copy"></i> Kopieren </button>
<pre><code><span class="tag-highlight">// HTML öğesine olay dinleyici ekleme</span>
<span class="tag-highlight">const</span> <span class="attribute-highlight">buton</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">getElementById</span>(<span class="value-highlight">'buton'</span>);
<span class="attribute-highlight">buton</span>.<span class="attribute-highlight">addEventListener</span>(<span class="value-highlight">'click'</span>, <span class="tag-highlight">function</span>() {
<span class="tag-highlight">alert</span>(<span class="value-highlight">'Butona tıklandı!'</span>);
});
<span class="tag-highlight">// Alternatif als, ok fonksiyonu kullanabilirsiniz</span>
<span class="attribute-highlight">buton</span>.<span class="attribute-highlight">addEventListener</span>(<span class="value-highlight">'click'</span>, () => {
<span class="tag-highlight">console</span>.<span class="attribute-highlight">log</span>(<span class="value-highlight">'Butona tıklandı!'</span>);
});
<span class="tag-highlight">// Yaygın olay türleri</span>
<span class="value-highlight">// click: Benutzer öğeye tıkladığında</span>
<span class="value-highlight">// dblclick: Benutzer öğeye doppelt tıkladığında</span>
<span class="value-highlight">// mouseenter: Fare öğenin üzerine geldiğinde</span>
<span class="value-highlight">// mouseleave: Fare öğenin üzerinden ayrıldığında</span>
<span class="value-highlight">// keydown: Klavye tuşuna btatsächlichdığında</span>
<span class="value-highlight">// keyup: Klavye tuşu bırakıldığında</span>
<span class="value-highlight">// submit: Form gönderildiğinde</span>
<span class="value-highlight">// load: Seite veya resim yüklendiğinde</span>
<span class="value-highlight">// resize: Pencere boyutu değiştiğinde</span>
<span class="value-highlight">// scroll: Benutzer sayfayı kaydırdığında</span>
<span class="tag-highlight">// Form olayını işleme</span>
<span class="tag-highlight">const</span> <span class="attribute-highlight">form</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">getElementById</span>(<span class="value-highlight">'iletisim-formu'</span>);
<span class="attribute-highlight">form</span>.<span class="attribute-highlight">addEventListener</span>(<span class="value-highlight">'submit'</span>, <span class="tag-highlight">function</span>(<span class="attribute-highlight">event</span>) {
<span class="attribute-highlight">event</span>.<span class="attribute-highlight">preventDefault</span>(); <span class="tag-highlight">// Formun normal gönderimini engelle</span>
<span class="tag-highlight">const</span> <span class="attribute-highlight">ad</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">getElementById</span>(<span class="value-highlight">'ad'</span>).<span class="attribute-highlight">value</span>;
<span class="tag-highlight">const</span> <span class="attribute-highlight">email</span> = <span class="tag-highlight">document</span>.<span class="attribute-highlight">getElementById</span>(<span class="value-highlight">'email'</span>).<span class="attribute-highlight">value</span>;
<span class="tag-highlight">console</span>.<span class="attribute-highlight">log</span>(<span class="value-highlight">'Form gönderildi: '</span>, <span class="attribute-highlight">ad</span>, <span class="attribute-highlight">email</span>);
<span class="tag-highlight">// Burada AJAX ile form verileri gönderilebilir</span>
});</code></pre>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Kopyalama Fonksiyonu -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Kod örneği kopyalama butonları
const copyButtons = document.querySelectorAll('.copy-btn');
copyButtons.forEach(button => {
button.addEventListener('click', function() {
const codeBlock = this.nextElementSibling;
const codeText = codeBlock.textContent;
navigator.clipboard.writeText(codeText).then(() => {
// Kopyalama başarılı olduğunda buton metnini değiştir
const originalText = this.innerHTML;
this.innerHTML = `<i class="fas fa-check"></i> Kopiert!`;
// 2 saniye sonra orijinal metni geri getir
setTimeout(() => {
this.innerHTML = originalText;
}, 2000);
});
});
});
});
</script>
<style>
.eka-footer-partners,
.eka-footer-cta,
.eka-footer,
.eka-footer-scroll-top{
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.eka-footer .container,
.eka-footer-cta .container,
.eka-footer-partners .container{
width:min(1240px,calc(100% - 40px));
max-width:1240px;
margin-right:auto;
margin-left:auto;
padding-right:0;
padding-left:0;
}
.eka-footer-partners{
padding:26px 0;
background:#fff;
border-top:1px solid #dfe7ec;
}
.eka-footer-partners-grid{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
align-items:center;
border:1px solid #dfe7ec;
border-radius:10px;
overflow:hidden;
}
.eka-footer-partner{
min-width:0;
height:66px;
display:flex;
align-items:center;
justify-content:center;
padding:12px;
border-right:1px solid #dfe7ec;
background:#fff;
}
.eka-footer-partner:last-child{
border-right:0;
}
.eka-footer-partner img{
display:block;
width:auto;
max-width:110px;
max-height:34px;
object-fit:contain;
opacity:.68;
filter:grayscale(1);
transition:opacity .2s ease,filter .2s ease;
}
.eka-footer-partner:hover img{
opacity:1;
filter:grayscale(0);
}
.eka-footer-cta{
padding:48px 0;
background:#082f49;
border-bottom:1px solid rgba(255,255,255,.08);
}
.eka-footer-cta-inner{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:36px;
align-items:center;
}
.eka-footer-cta-label{
display:block;
margin-bottom:9px;
color:#7bc8e9;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
.eka-footer-cta h2{
max-width:760px;
margin:0;
color:#fff;
font-size:clamp(27px,3vw,40px);
font-weight:800;
line-height:1.18;
letter-spacing:-.035em;
}
.eka-footer-cta p{
max-width:720px;
margin:12px 0 0;
color:#afc4cf;
font-size:13px;
line-height:1.7;
}
.eka-footer-cta-actions{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:9px;
}
.eka-footer-cta-button{
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:0 17px;
border:1px solid transparent;
border-radius:8px;
font-size:11px;
font-weight:800;
text-decoration:none!important;
transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
}
.eka-footer-cta-button:hover{
transform:translateY(-2px);
}
.eka-footer-cta-button-primary{
background:#fff;
color:#082f49!important;
}
.eka-footer-cta-button-primary:hover{
background:#edf7fb;
color:#082f49!important;
}
.eka-footer-cta-button-secondary{
border-color:rgba(255,255,255,.18);
background:rgba(255,255,255,.06);
color:#fff!important;
}
.eka-footer-cta-button-secondary:hover{
border-color:rgba(255,255,255,.3);
background:rgba(255,255,255,.1);
color:#fff!important;
}
.eka-footer{
background:#052638;
color:#b7c8d1;
}
.eka-footer-top{
padding:58px 0 34px;
}
.eka-footer-grid{
display:grid;
grid-template-columns:300px minmax(0,1fr);
gap:48px;
align-items:start;
}
.eka-footer-company{
min-width:0;
}
.eka-footer-logo{
display:inline-flex;
margin-bottom:21px;
}
.eka-footer-logo img{
display:block;
width:auto;
max-width:176px;
max-height:56px;
object-fit:contain;
}
.eka-footer-contact-list{
display:grid;
gap:10px;
}
.eka-footer-contact-item{
display:grid;
grid-template-columns:20px minmax(0,1fr);
gap:9px;
align-items:start;
color:#b7c8d1;
font-size:11px;
line-height:1.65;
}
.eka-footer-contact-item i{
padding-top:4px;
color:#75c4e7;
text-align:center;
}
.eka-footer-contact-item a{
color:#b7c8d1!important;
}
.eka-footer-contact-item a:hover{
color:#fff!important;
}
.eka-footer-certifications{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:19px;
}
.eka-footer-certification{
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 9px;
border:1px solid rgba(255,255,255,.11);
border-radius:7px;
background:rgba(255,255,255,.04);
}
.eka-footer-certification img{
display:block;
width:auto;
max-width:76px;
max-height:27px;
object-fit:contain;
}
.eka-footer-legal{
margin-top:19px;
padding-top:17px;
border-top:1px solid rgba(255,255,255,.09);
color:#839aa6;
font-size:9px;
line-height:1.65;
}
.eka-footer-legal p{
margin:0 0 7px;
}
.eka-footer-menus{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:26px;
}
.eka-footer-menu-column{
min-width:0;
}
.eka-footer-heading{
position:relative;
margin:2px 0 17px;
padding-bottom:11px;
color:#fff;
font-size:13px;
font-weight:800;
line-height:1.35;
}
.eka-footer-heading:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:26px;
height:2px;
background:#42a6d1;
}
.eka-footer-menu{
margin:0;
padding:0;
list-style:none;
}
.eka-footer-menu li{
margin:0;
border-bottom:1px solid rgba(255,255,255,.07);
}
.eka-footer-menu li:last-child{
border-bottom:0;
}
.eka-footer-menu a{
min-height:37px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
color:#91a8b4!important;
font-size:10px;
line-height:1.45;
}
.eka-footer-menu a span{
min-width:0;
}
.eka-footer-menu a i{
flex:0 0 auto;
color:#527082;
font-size:7px;
transition:transform .2s ease,color .2s ease;
}
.eka-footer-menu a:hover{
color:#fff!important;
}
.eka-footer-menu a:hover i{
color:#75c4e7;
transform:translateX(2px);
}
.eka-footer-subscribe-area{
margin-top:35px;
padding:23px;
border:1px solid rgba(255,255,255,.1);
border-radius:10px;
background:rgba(255,255,255,.035);
}
.eka-footer-subscribe-grid{
display:grid;
grid-template-columns:minmax(230px,.78fr) minmax(420px,1.22fr);
gap:28px;
align-items:center;
}
.eka-footer-subscribe-copy h3{
margin:0 0 6px;
color:#fff;
font-size:16px;
font-weight:800;
}
.eka-footer-subscribe-copy p{
margin:0;
color:#8fa6b2;
font-size:10px;
line-height:1.65;
}
.eka-footer-newsletter-form{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
}
.eka-footer-newsletter-input{
position:relative;
}
.eka-footer-newsletter-input i{
position:absolute;
top:50%;
left:14px;
color:#6f8a98;
transform:translateY(-50%);
}
.eka-footer-newsletter-input input{
width:100%;
height:45px;
padding:0 14px 0 40px;
border:1px solid rgba(255,255,255,.13);
border-radius:7px;
outline:0;
background:rgba(2,20,30,.38);
color:#fff;
font-size:11px;
}
.eka-footer-newsletter-input input::placeholder{
color:#6f8996;
}
.eka-footer-newsletter-input input:focus{
border-color:#52aed5;
box-shadow:0 0 0 3px rgba(82,174,213,.11);
}
.eka-footer-newsletter-button{
min-width:132px;
height:45px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 17px;
border:1px solid #087dab;
border-radius:7px;
background:#087dab;
color:#fff;
cursor:pointer;
font-size:10px;
font-weight:800;
}
.eka-footer-newsletter-button:hover{
border-color:#066d97;
background:#066d97;
}
.eka-footer-newsletter-button:disabled{
border-color:#3d5664;
background:#3d5664;
color:#95aab5;
cursor:not-allowed;
}
.eka-footer-newsletter-gdpr{
margin-top:11px;
position:relative;
}
.eka-footer-newsletter-gdpr input{
position:absolute;
opacity:0;
pointer-events:none;
}
.eka-footer-newsletter-gdpr label{
position:relative;
display:block;
min-height:18px;
margin:0;
padding-left:26px;
color:#819aa6;
font-size:9px;
line-height:1.55;
cursor:pointer;
}
.eka-footer-newsletter-gdpr label:before{
content:"";
position:absolute;
top:1px;
left:0;
width:17px;
height:17px;
border:1px solid rgba(255,255,255,.17);
border-radius:4px;
background:rgba(2,20,30,.38);
}
.eka-footer-newsletter-gdpr input:checked+label:before{
border-color:#087dab;
background:#087dab;
}
.eka-footer-newsletter-gdpr input:checked+label:after{
content:"";
position:absolute;
top:4px;
left:6px;
width:5px;
height:9px;
border:solid #fff;
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.eka-footer-newsletter-gdpr a{
color:#8fd2ee!important;
}
.eka-footer-social-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-top:25px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.09);
}
.eka-footer-social-copy strong,
.eka-footer-social-copy span{
display:block;
}
.eka-footer-social-copy strong{
margin-bottom:3px;
color:#fff;
font-size:12px;
}
.eka-footer-social-copy span{
color:#78909c;
font-size:9px;
}
.eka-footer-social-links{
display:flex;
flex-wrap:wrap;
gap:7px;
}
.eka-footer-social-links a{
width:36px;
height:36px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.11);
border-radius:7px;
background:rgba(255,255,255,.035);
color:#b9cbd4!important;
font-size:13px;
}
.eka-footer-social-links a:hover{
border-color:#087dab;
background:#087dab;
color:#fff!important;
}
.eka-footer-bottom{
padding:18px 0;
border-top:1px solid rgba(255,255,255,.08);
background:#031d2b;
}
.eka-footer-bottom-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
}
.eka-footer-copyright{
margin:0;
color:#718b98;
font-size:9px;
line-height:1.6;
}
.eka-footer-payment-list{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:5px;
margin:0;
padding:0;
list-style:none;
}
.eka-footer-payment-list li{
height:29px;
display:flex;
align-items:center;
justify-content:center;
padding:4px 7px;
border-radius:5px;
background:#fff;
}
.eka-footer-payment-list img{
display:block;
width:auto;
max-width:39px;
max-height:18px;
object-fit:contain;
}
.eka-footer-scroll-top{
position:fixed;
right:22px;
bottom:-70px;
z-index:9998;
width:42px;
height:42px;
display:grid;
place-items:center;
padding:0;
border:1px solid rgba(255,255,255,.14);
border-radius:8px;
background:#082f49;
color:#fff;
cursor:pointer;
opacity:0;
visibility:hidden;
box-shadow:0 12px 30px rgba(5,38,56,.22);
transition:bottom .25s ease,opacity .25s ease,visibility .25s ease,background-color .2s ease;
}
.eka-footer-scroll-top.open{
bottom:22px;
opacity:1;
visibility:visible;
}
.eka-footer-scroll-top:hover{
background:#052638;
}
.cd-top{
display:none!important;
}
@media(max-width:1100px){
.eka-footer-partners-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.eka-footer-partner:nth-child(4){
border-right:0;
}
.eka-footer-partner:nth-child(-n+4){
border-bottom:1px solid #dfe7ec;
}
.eka-footer-grid{
grid-template-columns:1fr;
}
.eka-footer-menus{
grid-template-columns:repeat(4,minmax(0,1fr));
}
}
@media(max-width:880px){
.eka-footer-cta-inner{
grid-template-columns:1fr;
}
.eka-footer-cta-actions{
justify-content:flex-start;
}
.eka-footer-menus{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.eka-footer-subscribe-grid{
grid-template-columns:1fr;
}
}
@media(max-width:680px){
.eka-footer .container,
.eka-footer-cta .container,
.eka-footer-partners .container{
width:min(100% - 24px,1240px);
}
.eka-footer-partners{
padding:20px 0;
}
.eka-footer-partners-grid{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
}
.eka-footer-partner{
flex:0 0 150px;
border-right:1px solid #dfe7ec!important;
border-bottom:0!important;
scroll-snap-align:start;
}
.eka-footer-cta{
padding:40px 0;
}
.eka-footer-cta-actions,
.eka-footer-cta-button{
width:100%;
}
.eka-footer-top{
padding:44px 0 30px;
}
.eka-footer-menus{
grid-template-columns:1fr;
gap:4px;
}
.eka-footer-menu-column{
padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.eka-footer-subscribe-area{
padding:18px;
}
.eka-footer-newsletter-form{
grid-template-columns:1fr;
}
.eka-footer-newsletter-button{
width:100%;
}
.eka-footer-social-row,
.eka-footer-bottom-row{
align-items:flex-start;
flex-direction:column;
}
.eka-footer-payment-list{
justify-content:flex-start;
}
.eka-footer-scroll-top.open{
right:13px;
bottom:144px;
}
}
@media(max-width:420px){
.eka-footer .container,
.eka-footer-cta .container,
.eka-footer-partners .container{
width:min(100% - 18px,1240px);
}
.eka-footer-certification{
flex:1 1 calc(33.333% - 7px);
}
}
@media(prefers-reduced-motion:reduce){
.eka-footer *{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important;
}
}
</style>
<style>
.eka-footer-partners,
.eka-footer-cta,
.eka-footer{
width:100%!important;
max-width:none!important;
display:block!important;
float:none!important;
clear:both!important;
position:relative!important;
}
.eka-footer-checkout{
margin-top:0!important;
}
</style>
<section class="eka-footer-cta">
<div class="container">
<div class="eka-footer-cta-inner">
<div>
<span class="eka-footer-cta-label">Eka Sunucu</span>
<h2>Call now to get more detailed information about our products and services.</h2>
<p>Planen wir gemeinsam die passende Lösung für Ihren Server-, Hosting- und Softwarebedarf. Kontaktieren Sie unser Team für eine technische Beratung vor dem Kauf.</p>
</div>
<div class="eka-footer-cta-actions">
<a href="/iletisim" class="eka-footer-cta-button eka-footer-cta-button-primary">
<i class="fas fa-headset" aria-hidden="true"></i>
<span>Kontakt aufnehmen</span>
</a>
<a href="tel:08503073458" class="eka-footer-cta-button eka-footer-cta-button-secondary">
<i class="fas fa-phone-alt" aria-hidden="true"></i>
<span>08503073458</span>
</a>
</div>
</div>
</div>
</section>
<footer class="eka-footer footer-section font-3">
<div class="eka-footer-top">
<div class="container">
<div class="eka-footer-grid">
<section class="eka-footer-company">
<a href="https://www.ekasunucu.com/de/home" class="eka-footer-logo" aria-label="Eka Sunucu Startseite">
<img src="https://www.ekasunucu.com/resources/uploads/logo/2025-01-31/ekasunucu-turkiye-nin-dijital-hizmetler-otomasyonu-lideri-2.webp" width="176" height="56" alt="Eka Sunucu" loading="lazy" decoding="async">
</a>
<div class="eka-footer-contact-list">
<div class="eka-footer-contact-item">
<i class="far fa-envelope" aria-hidden="true"></i>
<a href="mailto:info@ekasunucu.com">info@ekasunucu.com</a>
</div>
<div class="eka-footer-contact-item">
<i class="fas fa-phone-alt" aria-hidden="true"></i>
<a href="tel:08503073458">08503073458</a>
</div>
<div class="eka-footer-contact-item">
<i class="fas fa-map-marker-alt" aria-hidden="true"></i>
<div>Halkali Merkez, Fatih Str. ozgur Wohnung Nr. 45 Innentuer Nr: 3, 34303 Kucukcekmece/Istanbul</div>
</div>
</div>
<div class="eka-footer-certifications" aria-label="Unternehmensregistrierungen und Konformitätsnachweise">
<span class="eka-footer-certification">
<img src="https://www.ekasunucu.com/templates/website/EkaSunucu/images/gdpr.webp" alt="DSGVO-konform" width="76" height="27" loading="lazy" decoding="async">
</span>
<a href="https://www.eticaret.gov.tr/siteprofil/8410688568215063/ekasunucucom" target="_blank" rel="nofollow noopener" class="eka-footer-certification">
<img src="https://www.ekasunucu.com/templates/website/EkaSunucu/images/etbis.webp" alt="ETBIS-registriertes Unternehmen" width="76" height="27" loading="lazy" decoding="async">
</a>
<a href="https://www.btk.gov.tr/ticari-amacli-hizmet-verenler-yer-saglayici-listesi?page=1&q=eka%20yazilim%20bilgisayar%20bili%C5%9Fim%20reklam%20hizmetleri%20limited%20%C5%9F%C4%B0rketi" target="_blank" rel="nofollow noopener" class="eka-footer-certification">
<img src="https://www.ekasunucu.com/templates/website/EkaSunucu/images/btk.webp" alt="BTK-zugelassener Hostinganbieter" width="76" height="27" loading="lazy" decoding="async">
</a>
</div>
<div class="eka-footer-legal">
<p>EKA SUNUCU ist ein von der BTK im Rahmen des Gesetzes Nr. 5651 zugelassener Hostinganbieter.</p>
<p>Sie können Meldungen über rechtswidrige Inhalte über unsere Kommunikationskanäle senden.</p>
</div>
</section>
<div class="eka-footer-menus">
<section class="eka-footer-menu-column"><h3 class="eka-footer-heading">Other Links</h3><ul class="eka-footer-menu"><li><a href="https://www.ekasunucu.com/de/contact"><span>Contact Us</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/news"><span>News from Us</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/articles"><span>Articles from Blog</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/knowledgebase"><span>Knowledge Base</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/license-verification"><span>License Verification</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/personal-data-and-general-privacy-agreement"><span>Privacy Policy</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/service-and-use-agreement"><span>Service Agreement</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/en/site-ici-baglantilar"><span>Internal Links</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li></ul></section><section class="eka-footer-menu-column"><h3 class="eka-footer-heading">Webhosting</h3><ul class="eka-footer-menu"><li><a href="https://www.ekasunucu.com/de/category/hosting"><span>Unlimited Webhosting</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/category"><span>SEO Hosting</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/category/cheap-ssd-hosting"><span>Wordpress Hosting</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/category/plesk-web-hosting-paketleri"><span>Plesk Webhosting Pakete</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/category/professional-ssd-hosting"><span>Individual Packages</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/category/reseller-hosting"><span>Business Packages</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/knowledgebase/reseller-hosting"><span>WordPress Hosting</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li></ul></section><section class="eka-footer-menu-column"><h3 class="eka-footer-heading">Server Services</h3><ul class="eka-footer-menu"><li><a href="https://www.ekasunucu.com/de/category/server-with-graphics-card"><span>GPU-Server</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/category/turkey-location-dedicated-servers"><span>Turkey Dedicated Servers</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="#"><span>Germany VPS / VDS Server</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/category/france-location-vds-vps"><span>France VPS / VDS Server</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="#"><span>Turkey VPS / VDS Server</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/category/ssd-virtual-servers-vds-vps"><span>US VPS / VDS Server</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li></ul></section><section class="eka-footer-menu-column"><h3 class="eka-footer-heading">Domain Name Registry</h3><ul class="eka-footer-menu"><li><a href="https://www.ekasunucu.com/whois"><span>Whois</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/web-tasarim"><span>Web Design</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/seo"><span>Seo</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/kurumsal-kimlik"><span>Corporate Identity</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/google-adwords"><span>Google Adwords</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/sosyal-medya-hesap-yonetimi"><span>Social Media Account Management</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/de/e-ticaret-yazilimi"><span>Special E-Commerce Solutions</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/ip-adresim-nedir"><span>IP Address Query</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/idn-cevirme"><span>IDN / Punycode Çeviri Aracı</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li><li><a href="https://www.ekasunucu.com/dns-cache-problemi"><span>DNS Cache Problems</span><i class="fas fa-arrow-right" aria-hidden="true"></i></a></li></ul></section> </div>
</div>
<section class="eka-footer-subscribe-area">
<div class="eka-footer-subscribe-grid">
<div class="eka-footer-subscribe-copy">
<h3>Abonnieren Sie den Newsletter</h3>
<p>Bleiben Sie über neue Dienste, Kampagnen und wichtige Systemankündigungen informiert.</p>
</div>
<form action="https://www.ekasunucu.com/de/newsletter/reg" method="post" id="ekaFooterNewsletter">
<input type="hidden" name="token" value="15312fcc6aa1732dfe903a93e5901d0d823df8cca01a78532f5b34fea7160d82">
<div class="eka-footer-newsletter-form">
<div class="eka-footer-newsletter-input">
<i class="far fa-envelope" aria-hidden="true"></i>
<input name="email" type="email" autocomplete="email" placeholder="Melden Sie sich an, um über unsere Kampagnen und Ankündigungen informiert zu werden." aria-label="E-Mail-Adresse" required>
</div>
<button type="submit" id="ekaFooterNewsletterSubmit" class="eka-footer-newsletter-button" disabled>
Anmelden </button>
</div>
<div class="eka-footer-newsletter-gdpr">
<input type="checkbox" value="1" id="ekaFooterNewsletterContract">
<label for="ekaFooterNewsletterContract">
I have read and understood the <a target="_blank" href="https://www.ekasunucu.com/de/personal-data-and-general-privacy-agreement"><strong>Privacy Policy</strong></a>. I authorize the storage and processing of my data in accordance with GDPR. </label>
</div>
</form>
</div>
</section>
<div class="eka-footer-social-row">
<div class="eka-footer-social-copy">
<strong>Folgen Sie uns</strong>
<span>Unsere Social-Media-Kanäle für Ankündigungen und neue Dienste.</span>
</div>
<div class="eka-footer-social-links">
<a href="https://www.facebook.com/ekayazilimcom" target="_blank" rel="nofollow noopener" aria-label="Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
<a href="https://www.twitter.com/ekasunucu" target="_blank" rel="nofollow noopener" aria-label="X"><i class="fab fa-twitter" aria-hidden="true"></i></a>
<a href="https://www.instagram.com/ekayazilim" target="_blank" rel="nofollow noopener" aria-label="Instagram"><i class="fab fa-instagram" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/company/eka-software-limited/" target="_blank" rel="nofollow noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a>
<a href="https://play.google.com/store/apps/details?id=com.ekayazilim.sunucubilisim" target="_blank" rel="nofollow noopener" aria-label="Google Play"><i class="fab fa-google-play" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="eka-footer-bottom">
<div class="container">
<div class="eka-footer-bottom-row">
<p class="eka-footer-copyright">Copyright © 2013 - 2026 Wisecp Germany Alle Rechte vorbehalten.</p>
<ul class="eka-footer-payment-list" aria-label="Unterstützte Zahlungsmethoden">
<li><img src="https://www.ekasunucu.com/templates/website/EkaSunucu/eka/tema/img/payment-amex.svg" alt="American Express" width="39" height="18" loading="lazy" decoding="async"></li>
<li><img src="https://www.ekasunucu.com/templates/website/EkaSunucu/eka/tema/img/payment-visa.svg" alt="Visa" width="39" height="18" loading="lazy" decoding="async"></li>
<li><img src="https://www.ekasunucu.com/templates/website/EkaSunucu/eka/tema/img/payment-mastercard.svg" alt="Mastercard" width="39" height="18" loading="lazy" decoding="async"></li>
<li><img src="https://www.ekasunucu.com/templates/website/EkaSunucu/eka/tema/img/payment-paypal.svg" alt="PayPal" width="39" height="18" loading="lazy" decoding="async"></li>
<li><img src="https://www.ekasunucu.com/templates/website/EkaSunucu/eka/tema/img/payment-bitcoin.svg" alt="Bitcoin" width="39" height="18" loading="lazy" decoding="async"></li>
</ul>
</div>
</div>
</div>
</footer>
<button type="button" class="eka-footer-scroll-top" aria-label="Zum Seitenanfang zurückkehren">
<i class="fa-solid fa-angles-up" aria-hidden="true"></i>
</button>
<script>
(function(){
var footer = document.querySelector('.eka-footer');
if(!footer){
return;
}
var scrollButton = document.querySelector('.eka-footer-scroll-top');
var ticking = false;
function scrollDurumunuGuncelle(){
if(scrollButton){
scrollButton.classList.toggle('open', window.pageYOffset > 600);
}
ticking = false;
}
window.addEventListener('scroll', function(){
if(!ticking){
window.requestAnimationFrame(scrollDurumunuGuncelle);
ticking = true;
}
}, {passive:true});
if(scrollButton){
scrollButton.addEventListener('click', function(){
window.scrollTo({
top:0,
behavior:'smooth'
});
});
}
var eskiUsteCik = document.querySelector('.cd-top');
if(eskiUsteCik){
eskiUsteCik.style.display = 'none';
}
var newsletterForm = document.getElementById('ekaFooterNewsletter');
var newsletterSubmit = document.getElementById('ekaFooterNewsletterSubmit');
var newsletterContract = document.getElementById('ekaFooterNewsletterContract');
if(newsletterContract && newsletterSubmit){
newsletterContract.addEventListener('change', function(){
newsletterSubmit.disabled = !newsletterContract.checked;
});
}
if(newsletterForm && newsletterSubmit){
newsletterForm.addEventListener('submit', function(event){
event.preventDefault();
if(!newsletterForm.checkValidity()){
newsletterForm.reportValidity();
return;
}
if(typeof window.MioAjaxElement === 'function' && window.jQuery){
MioAjaxElement(window.jQuery(newsletterSubmit), {
waiting_text:"Bitte Warten...",
result:'ekaFooterNewsletterResult'
});
}
});
}
window.ekaFooterNewsletterResult = function(result){
if(result === '' || typeof window.getJson !== 'function'){
return;
}
var solve = getJson(result);
if(solve === false || solve === undefined || typeof solve !== 'object'){
return;
}
if(solve.status === 'error'){
if(typeof window.swal === 'function'){
swal({
type:'error',
title:"Fehler!",
text:solve.message,
timer:2500,
confirmButtonText:"Bestätigen" });
}
return;
}
if(solve.status === 'successful'){
if(typeof window.swal === 'function'){
swal(
"Gespeichert!",
"Ihr Newsletter Abonnement wurde registriert.",
'success'
);
}
var emailInput = newsletterForm ? newsletterForm.querySelector('input[name="email"]') : null;
if(emailInput){
emailInput.value = '';
}
}
};
})();
</script>
<!-- Support Code START -->
<script src="//code.jivosite.com/widget/k4vXux3o9p" async></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M4CK690BC6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-M4CK690BC6');
</script>
<!-- Support Code END -->
<script src="https://www.ekasunucu.com/templates/website/EkaSunucu/js/aos.js"></script>
<script type="text/javascript">
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>
<a href="#0" class="cd-top">Top</a>
</body>
</html>