Halkalı merkez mahallesi fatih cd ozgur apt no 46 , Küçükçekmece , İstanbul , 34303 , TR
Learn the fundamentals of web development with our comprehensive Web Development Knowledge Base. From HTML basics to advanced PHP techniques, we have you covered.
Our step-by-step guides, code examples, and best practices will help you build your web development skills and create professional websites.
Learn how to structure web content with HTML
Design attractive websites with CSS
Create dynamic websites using PHP
Add interactivity to your pages
Learn the fundamental building blocks of web development
HTML (Hypertext Markup Language) is the standard markup language for creating web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
Turkey (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>Explanation:
<!DOCTYPE html>: Declares the document type and HTML version<html>: The root element of an HTML page<head>: Contains meta information about the document<title>: Specifies a title for the document<meta charset="utf-8">: Specifies the character encoding for the document<body>: Contains the visible page content<h1>: Defines a large heading<p>: Defines a paragraphHTML elements are represented by tags. Tags consist of the element name surrounded by angle brackets.
<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">Common HTML Tags:
<h1> to <h6>: Headings (h1 is the most important, h6 is the least important)<p>: Paragraph<a>: Anchor (link)<img>: Image<div>: Division or section<span>: Inline container<ul>, <ol>, <li>: Unordered list, ordered list, list item<table>, <tr>, <td>: Table, table row, table data<form>, <input>, <button>: Form elementsHTML attributes provide additional information about HTML elements. Attributes are always specified in the start tag and usually come in name/value pairs like: name="value".
<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>Common HTML Attributes:
href: Specifies the URL of the page the link goes tosrc: Specifies the path to the image to be displayedalt: Specifies an alternate text for an imageid: Specifies a unique id for an elementclass: Specifies one or more class names for an elementstyle: Specifies an inline CSS style for an elementtitle: Specifies extra information about an element (displayed as a tooltip)PHP (Hypertext Preprocessor) is a server-side scripting language designed for web development. PHP code is executed on the server, generating HTML that is then sent to the client. With PHP, you can create dynamic web pages and interact with databases.
PHP code is enclosed within special start and end processing instructions <?php and ?> that allow you to jump into and out of "PHP mode".
<!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>Explanation:
<?php and ?>: PHP code is enclosed within these tags//: Single-line comment$mesaj: Variables in PHP start with a dollar sign ($)echo: Outputs text to the browserIn PHP, variables start with a dollar sign ($) followed by the name of the variable. PHP is a loosely typed language, which means you don't have to declare the data type of a variable.
<?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>";
?>Conditional statements are used to perform different actions based on different conditions.
<?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>";
}
?>Loops are used to execute the same block of code repeatedly until a certain condition is met.
<?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 (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
CSS consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons.
/* 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;
}Explanation:
selector: Points to the HTML element you want to style (like h1, p, div, etc.)property: The style property you want to change (like color, font-size, etc.)value: The value for the property (like blue, 20px, etc.)CSS selectors are used to "find" (or select) the HTML elements you want to style.
/* 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;
}The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.
.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 provides several layout techniques to design responsive and flexible web pages.
/* 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 is a programming language that enables interactive web pages. It is an essential part of web applications, and the vast majority of websites use it for client-side page behavior.
JavaScript can be added directly in HTML or in external .js files. Here's how to add JavaScript to your web pages:
<!-- 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>The Document Object Model (DOM) is a programming interface for web documents. JavaScript can change all the HTML elements, attributes, and CSS styles in the page.
// 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 can execute when an event occurs, like when a user clicks on an HTML element.
// 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.