Halkalı merkez mahallesi fatih cd ozgur apt no 46 , Küçükçekmece , İstanbul , 34303 , TR
Kapsamlı Yazılım Bilgi Bankamız ile web geliştirmenin temellerini öğrenin. HTML temellerinden ileri PHP tekniklerine kadar tüm ihtiyaçlarınızı karşılıyoruz.
Adım adım rehberlerimiz, kod örneklerimiz ve en iyi uygulamalarımız, web geliştirme becerilerinizi geliştirmenize ve profesyonel web siteleri oluşturmanıza yardımcı olacaktır.
HTML ile web içeriğini nasıl yapılandıracağınızı öğrenin
CSS ile çekici web siteleri tasarlayın
PHP kullanarak dinamik web siteleri oluşturun
Sayfalarınıza etkileşim ekleyin
Web geliştirmenin temel yapı taşlarını öğrenin
HTML (Köprü Metni İşaretleme Dili), web sayfaları oluşturmak için standart işaretleme dilidir. HTML, bir web sayfasının yapısını anlamsal olarak tanımlar ve başlangıçta belgenin görünümü için ipuçları içeriyordu.
Türkiye (Türkçe)
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>Açıklama:
<!DOCTYPE html>: Belge türünü ve HTML sürümünü bildirir<html>: Bir HTML sayfasının kök öğesidir<head>: Belge hakkında meta bilgileri içerir<title>: Belge için bir başlık belirtir<meta charset="utf-8">: Belgenin karakter kodlamasını belirtir<body>: Görünür sayfa içeriğini içerir<h1>: Büyük bir başlık tanımlar<p>: Bir paragraf tanımlarHTML öğeleri etiketlerle temsil edilir. Etiketler, açılı parantezlerle çevrili öğe adından oluşur.
<h1>Bu bir başlıktır</h1>
<h2>Bu ikinci seviye bir başlıktır</h2>
<h3>Bu üçüncü seviye bir başlıktır</h3>
<p>Bu bir paragraftır.</p>
<a href="https://www.example.com">Bu bir bağlantıdır</a>
<img src="resim.jpg" alt="Açıklama metni">Yaygın HTML Etiketleri:
<h1> - <h6>: Başlıklar (h1 en önemlisi, h6 en az önemlisi)<p>: Paragraf<a>: Bağlantı<img>: Resim<div>: Bölüm<span>: Satır içi kapsayıcı<ul>, <ol>, <li>: Sırasız liste, sıralı liste, liste öğesi<table>, <tr>, <td>: Tablo, tablo satırı, tablo verisi<form>, <input>, <button>: Form öğeleriHTML öznitelikleri, HTML öğeleri hakkında ek bilgi sağlar. Öznitelikler her zaman başlangıç etiketinde belirtilir ve genellikle ad="değer" gibi ad/değer çiftleri şeklinde gelir.
<a href="https://www.example.com" target="_blank">Yeni sekmede aç</a>
<img src="logo.png" alt="Logo" width="100" height="50">
<div class="container" id="main">
İçerik burada
</div>Yaygın HTML Öznitelikleri:
href: Bağlantının gittiği sayfanın URL'sini belirtirsrc: Görüntülenecek resmin yolunu belirtiralt: Bir resim için alternatif metin belirtirid: Bir öğe için benzersiz bir kimlik belirtirclass: Bir öğe için bir veya daha fazla sınıf adı belirtirstyle: Bir öğe için satır içi CSS stili belirtirtitle: Bir öğe hakkında ekstra bilgi belirtir (araç ipucu olarak görüntülenir)PHP (Köprü Metni Önişlemcisi), web geliştirme için tasarlanmış bir sunucu taraflı betik dilidir. PHP kodu sunucuda çalıştırılır ve ardından istemciye gönderilen HTML oluşturulur. PHP ile dinamik web sayfaları oluşturabilir ve veritabanlarıyla etkileşim kurabilirsiniz.
PHP kodu, "PHP moduna" girmenize ve çıkmanıza izin veren özel başlangıç ve bitiş işleme talimatları <?php ve ?> içinde yer alır.
<!DOCTYPE html>
<html>
<head>
<title>PHP Örneği</title>
</head>
<body>
<h1>Merhaba PHP</h1>
<?php
// PHP kodu burada
$mesaj = "Merhaba, Dünya!";
echo "<p>$mesaj</p>";
$sayi1 = 10;
$sayi2 = 5;
$toplam = $sayi1 + $sayi2;
echo "<p>$sayi1 + $sayi2 = $toplam</p>";
?>
</body>
</html>Açıklama:
<?php ve ?>: PHP kodu bu etiketler arasında yer alır//: Tek satırlık yorum$mesaj: PHP'de değişkenler dolar işareti ($) ile başlarecho: Tarayıcıya metin çıktısı verirPHP'de değişkenler, değişkenin adının önünde bir dolar işareti ($) ile başlar. PHP, gevşek tipli bir dildir, yani bir değişkenin veri türünü beyan etmeniz gerekmez.
<?php
// String (Metin)
$ad = "Ahmet";
$soyad = 'Yılmaz';
// Integer (Tamsayı)
$yas = 25;
// Float (Ondalıklı sayı)
$boy = 1.78;
// Boolean (Mantıksal)
$aktif = true;
// Array (Dizi)
$renkler = array("Kırmızı", "Mavi", "Yeşil");
$meyveler = ["Elma", "Armut", "Muz"]; // PHP 5.4+ sözdizimi
// Değişken içeriğini görüntüleme
echo "<p>Merhaba, $ad $soyad</p>";
echo "<p>Yaş: $yas, Boy: $boy metre</p>";
echo "<p>Durum: " . ($aktif ? "Aktif" : "Pasif") . "</p>";
// Dizi içeriğini yazdırma
echo "<p>İlk renk: " . $renkler[0] . "</p>";
echo "<p>İkinci meyve: " . $meyveler[1] . "</p>";
?>Koşullu ifadeler, farklı koşullara bağlı olarak farklı işlemler gerçekleştirmek için kullanılır.
<?php
$saat = date("H"); // Mevcut saat (0-23)
if ($saat < 12) {
echo "<p>Günaydın!</p>";
} elseif ($saat < 18) {
echo "<p>İyi günler!</p>";
} else {
echo "<p>İyi akşamlar!</p>";
}
// Switch-case kullanımı
$gun = date("N"); // Haftanın günü (1-7)
switch ($gun) {
case 1:
echo "<p>Bugün Pazartesi</p>";
break;
case 2:
echo "<p>Bugün Salı</p>";
break;
case 3:
echo "<p>Bugün Çarşamba</p>";
break;
case 4:
echo "<p>Bugün Perşembe</p>";
break;
case 5:
echo "<p>Bugün Cuma</p>";
break;
default:
echo "<p>Bugün hafta sonu</p>";
}
?>Döngüler, belirli bir koşul karşılanana kadar aynı kod bloğunu tekrar tekrar yürütmek için kullanılır.
<?php
// For döngüsü
echo "<h4>For Döngüsü</h4>";
echo "<ul>";
for ($i = 1; $i <= 5; $i++) {
echo "<li>Öğe $i</li>";
}
echo "</ul>";
// While döngüsü
echo "<h4>While Döngüsü</h4>";
echo "<ul>";
$j = 1;
while ($j <= 5) {
echo "<li>Öğe $j</li>";
$j++;
}
echo "</ul>";
// Foreach döngüsü (diziler için)
$meyveler = ["Elma", "Portakal", "Muz", "Çilek", "Kivi"];
echo "<h4>Foreach Döngüsü</h4>";
echo "<ul>";
foreach ($meyveler as $meyve) {
echo "<li>$meyve</li>";
}
echo "</ul>";
// Anahtarlı dizi ile foreach
$kisi = [
"ad" => "Ahmet",
"soyad" => "Yılmaz",
"yas" => 25,
"sehir" => "İstanbul"
];
echo "<h4>Kişi Bilgileri</h4>";
echo "<ul>";
foreach ($kisi as $anahtar => $deger) {
echo "<li><strong>" . ucfirst($anahtar) . "</strong>: $deger</li>";
}
echo "</ul>";
?>CSS (Basamaklı Stil Sayfaları), HTML ile yazılmış bir belgenin sunumunu tanımlamak için kullanılan bir stil sayfası dilidir. CSS, öğelerin ekranda, kağıtta, konuşmada veya diğer ortamlarda nasıl işlenmesi gerektiğini tanımlar.
CSS, bir seçici ve bir bildirim bloğundan oluşur. Seçici, stillemek istediğiniz HTML öğesini işaret eder ve bildirim bloğu, noktalı virgüllerle ayrılmış bir veya daha fazla bildirim içerir.
/* Temel CSS sözdizimi */
selector {
property: value;
property: value;
}
/* Örnek */
h1 {
color: #333333;
font-size: 24px;
font-family: Arial, sans-serif;
text-align: center;
}
p {
color: #666666;
font-size: 16px;
line-height: 1.5;
margin-bottom: 15px;
}Açıklama:
selector: Stillemek istediğiniz HTML öğesini işaret eder (h1, p, div, vb. gibi)property: Değiştirmek istediğiniz stil özelliği (renk, yazı tipi boyutu, vb. gibi)value: Özellik için değer (mavi, 20px, vb. gibi)CSS seçicileri, stillemek istediğiniz HTML öğelerini "bulmak" (veya seçmek) için kullanılır.
/* Element Seçici */
h1 {
color: blue;
}
/* ID Seçici */
#header {
background-color: #f0f0f0;
padding: 10px;
}
/* Sınıf Seçici */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border-radius: 4px;
}
/* Çocuk Seçici */
ul > li {
margin-bottom: 5px;
}
/* Pseudo-class Seçici */
a:hover {
color: red;
text-decoration: underline;
}CSS kutu modeli, esasen her HTML öğesinin etrafını saran bir kutudur. Kenar boşlukları, kenarlıklar, dolgu ve gerçek içerikten oluşur.
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid #333;
margin: 30px;
background-color: #f0f0f0;
}
/* Box-sizing özelliği */
* {
box-sizing: border-box; /* Genişlik ve yükseklik, padding ve border'ı içerir */
}CSS, duyarlı ve esnek web sayfaları tasarlamak için çeşitli düzen teknikleri sağlar.
/* Flexbox Layout */
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.item {
flex: 1 0 200px; /* grow shrink basis */
margin: 10px;
}
/* Grid Layout */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
/* Responsive Design with Media Queries */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr;
}
}JavaScript, etkileşimli web sayfalarını mümkün kılan bir programlama dilidir. Web uygulamalarının önemli bir parçasıdır ve web sitelerinin büyük çoğunluğu, istemci tarafı sayfa davranışı için onu kullanır.
JavaScript, doğrudan HTML içine veya harici .js dosyalarına eklenebilir. JavaScript'i web sayfalarınıza eklemenin yolu:
<!-- HTML içinde JavaScript -->
<script>
// İşte basit bir JavaScript kodu
document.getElementById('demo').innerHTML = 'Merhaba, JavaScript!';
// Değişkenler tanımlama
let isim = 'Ahmet';
const YAS = 30;
var aktif = true;
// Fonksiyon tanımlama
function selamVer(ad) {
return 'Merhaba, ' + ad + '!';
}
// Fonksiyonu çağırma
console.log(selamVer(isim));
</script>
<!-- Harici JavaScript dosyası -->
<script src="script.js"></script>Belge Nesne Modeli (DOM), web belgeleri için bir programlama arayüzüdür. JavaScript, sayfadaki tüm HTML öğelerini, özniteliklerini ve CSS stillerini değiştirebilir.
// HTML öğelerini seçme
const baslik = document.getElementById('baslik');
const paragraflar = document.getElementsByTagName('p');
const butonlar = document.getElementsByClassName('btn');
const ilkButon = document.querySelector('.btn');
const tumButonlar = document.querySelectorAll('.btn');
// İçerik değiştirme
baslik.textContent = 'Yeni Başlık';
baslik.innerHTML = '<em>Vurgulu</em> Başlık';
// Stil değiştirme
baslik.style.color = 'blue';
baslik.style.fontSize = '24px';
// Sınıf ekleme ve kaldırma
baslik.classList.add('vurgulu');
baslik.classList.remove('gizli');
baslik.classList.toggle('aktif');
// Yeni öğe oluşturma ve ekleme
const yeniParagraf = document.createElement('p');
yeniParagraf.textContent = 'Bu yeni bir paragraftır.';
document.body.appendChild(yeniParagraf);JavaScript, bir kullanıcı bir HTML öğesine tıkladığında olduğu gibi bir olay gerçekleştiğinde yürütülebilir.
// HTML öğesine olay dinleyici ekleme
const buton = document.getElementById('buton');
buton.addEventListener('click', function() {
alert('Butona tıklandı!');
});
// Alternatif olarak, ok fonksiyonu kullanabilirsiniz
buton.addEventListener('click', () => {
console.log('Butona tıklandı!');
});
// Yaygın olay türleri
// click: Kullanıcı öğeye tıkladığında
// dblclick: Kullanıcı öğeye çift tıkladığında
// mouseenter: Fare öğenin üzerine geldiğinde
// mouseleave: Fare öğenin üzerinden ayrıldığında
// keydown: Klavye tuşuna basıldığında
// keyup: Klavye tuşu bırakıldığında
// submit: Form gönderildiğinde
// load: Sayfa veya resim yüklendiğinde
// resize: Pencere boyutu değiştiğinde
// scroll: Kullanıcı sayfayı kaydırdığında
// Form olayını işleme
const form = document.getElementById('iletisim-formu');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Formun normal gönderimini engelle
const ad = document.getElementById('ad').value;
const email = document.getElementById('email').value;
console.log('Form gönderildi: ', ad, email);
// Burada AJAX ile form verileri gönderilebilir
});Web siteniz için uygun fiyatlı Ucuz Hosting Paketleri ile yüksek performanslı barındırma hizmeti sunuyoruz.
Dijital varlığınızı güçlendirmek için profesyonel Sosyal Medya Hesap Yönetimi hizmeti sağlıyoruz.
Görsellerinizi sıkıştırmak için kullanışlı PNG to WebP dönüştürücümüzü deneyin.
Resim boyutlarını küçültmek isteyenler için JPG to WebP aracı idealdir.
SEO uyumu için Robots.txt Oluşturucu aracımızı kullanabilirsiniz.
Htaccess Oluşturucu ile yönlendirme ve erişim ayarlarınızı kolayca yapın.
Kullanıcı deneyimini artırmak için özgün UI/UX Tasarım çözümleri sunuyoruz.
Hızlı ve güvenli kurulum için WordPress hizmetimizden faydalanın.
Sitenizi arama motorlarında yükseltmek için Google Optimizasyon hizmeti sunuyoruz.
Markanızı tanıtmak için Tanıtım Yazısı içerikleri üretiyoruz.
UGC ile içerik gücünüzü artırın: UGC İçerik.
Profesyonel Yazılım Kurulum hizmetleri sunuyoruz.
Kaliteli içerik arayanlara özel Hazır Makale & İçerik Satışları.
Sıra Bulucu ile arama motoru sıralamanızı takip edin.
Google Haritalara Kayıt ile konumunuzu haritada gösterin.
Alan adı otoritenizi öğrenin: DA PA Sorgula.
Dış bağlantılarınızı analiz edin: Dış Link Aracı.
Dahili link yapınızı inceleyin: İç Link Aracı.
Arama motoru başarınızı artırmak için SEO Danışmanlığı alın.
Organik trafiğinizi artırmak için SEO çözümleri geliştirin.
Özel çözümler için Mobil Uygulama geliştirme hizmeti sunuyoruz.
Markanız için Logo tasarlıyoruz.
İşinize özel Web Yazılım çözümleri sunuyoruz.
Kurumsal imajınızı yansıtan Kurumsal Web Tasarım hizmeti.
Süreçlerinizi hızlandırmak için Bot Program geliştiriyoruz.
Online satışlarınız için Sanal POS sistemleri sunuyoruz.
Entegrasyonlar için Pazaryeri ve Kargo Entegrasyonu.
Kullanıcı deneyimi testleri için Son Kullanıcı Testleri.
İçerik indirimi için TikTok Video İndir aracı.
Görsellerinizi kolayca küçültün: Resim Boyutlandırma.
Yararlı kod örnekleri için Site Kodları rehberine göz atın.
Kodları online inceleyin: HTML Viewer.
IP adresinizi öğrenmek için IP Adresim Nedir aracını kullanın.
Bağlantı hızınızı test etmek için Hız Testi.
DNS önbellek sorunları için DNS Cache Problemi sayfasını inceleyin.
DNS değişikliklerini görmek için DNS Önizleme aracı.
IDN dönüştürme için IDN Çevirme kullanın.
Sunuculara ping atmak için Ping Gönder özelliğini deneyin.
Web sitenizin yanıt süresini test etmek için Web Site Ping aracımızı kullanın.