Web geliştirme, günümüzün dijital dünyasında olmazsa olmaz bir beceri haline gelmiştir. HTML, CSS ve JavaScript, dinamik ve etkileşimli web sitelerinin temel yapı taşlarıdır. Bu üçlü sayesinde, statik bir metin yığınından çok daha fazlasını sunan, kullanıcıların aktif olarak katılabileceği web deneyimleri yaratabiliriz.
- Bu dersin sonunda HTML ile web sitelerinin temel yapısını oluşturmayı öğreneceksiniz.
- Bu dersin sonunda CSS ile web sitenizin görünümünü profesyonelce tasarlayabileceksiniz.
- Bu dersin sonunda JavaScript ile web sitenize dinamik özellikler ekleyebileceksiniz.
- Bu dersin sonunda responsive tasarım prensiplerini anlayarak, sitenizin farklı cihazlarda sorunsuz çalışmasını sağlayabileceksiniz.
- HTML: Web sitelerinin iskeletini oluşturur.
- CSS: Web sitelerinin stilini ve görünümünü tanımlar.
- JavaScript: Web sitelerine etkileşim ve dinamik özellikler kazandırır.
- Dinamik Siteler: Kullanıcı etkileşimine göre içeriği değişen sitelerdir.
HTML ile Web Sitelerinin Temelini Oluşturma
HTML (HyperText Markup Language), web sayfalarının yapısını tanımlamak için kullanılan standart bir işaretleme dilidir. Etiketler (tags) kullanarak içeriği yapılandırır ve tarayıcıya nasıl görüntülemesi gerektiğini söyler. Bir HTML belgesi, temel olarak bir dizi iç içe geçmiş etiketten oluşur.
HTML Etiketleri: HTML etiketleri, içeriği tanımlayan ve yapılandıran temel yapı taşlarıdır. <p> etiketi bir paragrafı, <h1> etiketi bir başlığı, <img> etiketi bir resmi temsil eder.
<!DOCTYPE html> <html> <head> <title>Web Sitem</title> </head> <body> <h1>Merhaba Dünya!</h1> <p>Bu benim ilk web sayfam.</p> </body> </html>
Bu kod, basit bir HTML belgesinin temel yapısını gösterir. <!DOCTYPE html> bildirimi, belgenin HTML5 olduğunu belirtir. <html> etiketi, belgenin kök elementidir. <head> etiketi, başlık (<title>) ve diğer meta verileri içerir. <body> etiketi ise web sayfasında görüntülenecek olan içeriği içerir.
📚 İlginizi çekebilir: SQL Veri Tabanı Oluşturma ve Yönetme
HTML Elementleri ve Özellikleri
HTML elementleri, başlangıç etiketi, içerik ve bitiş etiketinden oluşur. Örneğin, <p>Bu bir paragraftır.</p> bir paragraf elementidir. Elementlere özellikler (attributes) ekleyerek davranışlarını ve görünümlerini değiştirebiliriz. Örneğin, <img src=”resim.jpg” alt=”Açıklama”> örneğinde, src özelliği resmin kaynağını, alt özelliği ise resim görüntülenemediğinde gösterilecek metni belirtir.
<a href=”https://www.dersmerkezi.net.tr”>Ders Merkezi</a> örneğinde, <a> etiketi bir bağlantı oluşturur. href özelliği, bağlantının gideceği adresi belirtir.
CSS ile Web Sitelerine Stil Verme
CSS (Cascading Style Sheets), HTML elementlerinin nasıl görüntüleneceğini tanımlayan bir stil dilidir. Renkler, yazı tipleri, boyutlar, düzen ve daha birçok görsel özelliği CSS ile kontrol edebiliriz. CSS, HTML’den ayrılarak daha düzenli ve yönetilebilir bir kod yapısı sağlar.
CSS Seçiciler: CSS seçiciler, stil uygulanacak HTML elementlerini belirlemek için kullanılır. Element adı (örneğin, p), sınıf adı (örneğin, .paragraf) veya ID (örneğin, #baslik) kullanarak seçim yapabiliriz.
p {
color: blue;
font-size: 16px;
}
Bu CSS kodu, tüm <p> etiketlerinin metin rengini mavi, yazı boyutunu ise 16 piksel olarak ayarlar.
CSS’i HTML’e Uygulama Yöntemleri
CSS’i HTML’e uygulamanın üç temel yolu vardır:
📚 Devamını öğrenin: Kodlamaya Giriş: Algoritma Nedir? Nasıl Oluşturulur?
- Satır İçi (Inline) CSS: Doğrudan HTML elementinin içinde style özelliği kullanılarak uygulanır.
- Dahili (Internal) CSS: <style> etiketi içinde, <head> bölümünde tanımlanır.
- Harici (External) CSS: Ayrı bir .css dosyası oluşturularak HTML belgesine bağlanır.
Harici CSS, en çok tercih edilen yöntemdir çünkü kodu daha düzenli ve yönetilebilir hale getirir. Ayrıca, aynı CSS dosyasını birden fazla HTML sayfasında kullanarak tutarlılık sağlayabiliriz.
JavaScript ile Web Sitelerine Etkileşim Ekleme
JavaScript, web sitelerine dinamik özellikler ve etkileşim eklemek için kullanılan bir programlama dilidir. Kullanıcı etkileşimlerine yanıt verme, içeriği dinamik olarak değiştirme, animasyonlar oluşturma ve daha birçok işlemi JavaScript ile yapabiliriz.
JavaScript Sözdizimi: JavaScript, C-tabanlı bir sözdizimine sahiptir. Değişkenler, fonksiyonlar, döngüler ve koşullu ifadeler gibi temel programlama kavramlarını içerir.
function showAlert() {
alert("Merhaba Dünya!");
}
<button onclick="showAlert()">Tıkla</button>
Bu JavaScript kodu, showAlert() adlı bir fonksiyon tanımlar. Bu fonksiyon, bir uyarı mesajı görüntüler. <button> etiketi, onclick özelliği ile bu fonksiyonu çağırır.
JavaScript ile DOM Manipülasyonu
DOM (Document Object Model), HTML belgesinin bir ağaç yapısı olarak temsilidir. JavaScript, DOM’u kullanarak HTML elementlerine erişebilir, değiştirebilir, ekleyebilir veya silebilir. Bu sayede, kullanıcı etkileşimine göre web sayfasının içeriğini dinamik olarak değiştirebiliriz.
document.getElementById(“baslik”).innerHTML = “Yeni Başlık”; kodu, id’si “baslik” olan elementin içeriğini “Yeni Başlık” olarak değiştirir.
Responsive Tasarım: Her Cihazda Mükemmel Görünüm
Responsive tasarım, web sitelerinin farklı ekran boyutlarına ve cihazlara uyum sağlamasını sağlayan bir yaklaşımdır. Mobil cihazlardan masaüstü bilgisayarlara kadar her platformda kullanıcı dostu bir deneyim sunar.
Media Queries: Media queries, CSS içinde kullanılan koşullu ifadelerdir. Ekran boyutuna, çözünürlüğe veya diğer cihaz özelliklerine göre farklı stil kuralları uygulamamızı sağlar.
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
Bu CSS kodu, ekran genişliği 768 pikselden küçük olan cihazlarda body elementinin yazı boyutunu 14 piksel olarak ayarlar.
| Teknoloji | Açıklama | Kullanım Alanı |
|---|---|---|
| HTML | Web sitelerinin yapısını tanımlar. | İçerik oluşturma, formlar, tablolar. |
| CSS | Web sitelerinin görünümünü tasarlar. | Renkler, yazı tipleri, düzen. |
| JavaScript | Web sitelerine etkileşim ekler. | Animasyonlar, kullanıcı etkileşimi. |
Web Geliştirme Araçları ve Kaynakları
Web geliştirme sürecini kolaylaştırmak için birçok araç ve kaynak mevcuttur. Kod editörleri, tarayıcı geliştirme araçları, CSS framework’leri ve JavaScript kütüphaneleri, geliştiricilerin verimliliğini artırır ve daha iyi web siteleri oluşturmalarına yardımcı olur.
- Kod Editörleri: Visual Studio Code, Sublime Text, Atom gibi kod editörleri, kod yazmayı kolaylaştıran özellikler sunar.
- Tarayıcı Geliştirme Araçları: Chrome DevTools, Firefox Developer Tools gibi tarayıcı geliştirme araçları, web sayfalarını inceleme, hata ayıklama ve performans analizi yapma imkanı sağlar.
- CSS Framework’leri: Bootstrap, Tailwind CSS gibi CSS framework’leri, hazır stil bileşenleri ve düzen sistemleri sunarak tasarım sürecini hızlandırır.
- JavaScript Kütüphaneleri: React, Angular, Vue.js gibi JavaScript kütüphaneleri, karmaşık web uygulamaları geliştirmeyi kolaylaştıran araçlar sunar.
Öğrendiklerinizi Pekiştirin
Web geliştirme, sürekli öğrenmeyi ve pratik yapmayı gerektiren bir alandır. Temel kavramları öğrendikten sonra, kendi projelerinizi oluşturarak ve farklı teknolojileri deneyerek becerilerinizi geliştirebilirsiniz. Unutmayın, her başarılı web geliştirici, bir zamanlar yeni başlayan biriydi.
- HTML, CSS ve JavaScript’in web geliştirme sürecindeki rolleri nelerdir?
- Responsive tasarım neden önemlidir ve nasıl uygulanır?
- DOM manipülasyonu nedir ve JavaScript ile nasıl kullanılır?
- CSS seçiciler ne işe yarar ve hangi türleri vardır?
- HTML: Web sitelerinin temel yapısını oluşturur. Etiketler aracılığıyla içeriği yapılandırır.
- CSS: Web sitelerinin stilini ve görünümünü tanımlar. Renkler, yazı tipleri ve düzen gibi özellikleri kontrol eder.
- JavaScript: Web sitelerine etkileşim ve dinamik özellikler ekler. Kullanıcı etkileşimlerine yanıt verme ve içeriği değiştirme gibi işlemleri gerçekleştirir.
- Responsive Tasarım: Web sitelerinin farklı cihazlara uyum sağlamasını sağlar. Media queries kullanarak farklı ekran boyutlarına göre stil kuralları uygular.
Bir Sonraki Adım
Bu makalede, web geliştirmenin temellerini öğrendiniz. Şimdi, öğrendiklerinizi pratiğe dökmek ve kendi web sitelerinizi oluşturmaya başlamak için harika bir zaman. Daha karmaşık projeler üzerinde çalışarak, farklı teknolojileri deneyerek ve web geliştirme topluluğuna katılarak becerilerinizi daha da geliştirebilirsiniz. Unutmayın, sürekli öğrenme ve pratik yapma, başarılı bir web geliştirici olmanın anahtarıdır.
