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.
Turkey (Türkçe)
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>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
});