- Katılım
- 7 Nis 2025
- Konular
- 367
- Mesajlar
- 780
- Çözümler
- 1
- Tepkime puanı
- 121
- Puan
- 93
- Konum
- İstanbul
- Web sitesi
- forumagel.com
Hazır Kod Bankası - Konu 1: HTML Temelleri
Hazır Kod Bankası Serimizin İlk Konusu: HTML!
Merhaba sevgili arkadaşlar, "Hazır Kod Bankası" serimizin ilk adımı ile karşınızdayım! Yazılıma ve özellikle web geliştirmeye merak salan herkesin ilk öğrenmesi gereken dillerden biri olan HTML (HyperText Markup Language) ile başlıyoruz.
HTML, web sayfalarının iskeletini oluşturan, içeriği yapılandıran işaretleme dilidir. Bir web sayfasında gördüğünüz tüm başlıklar, paragraflar, resimler, linkler, tablolar ve diğer içerik elemanları HTML etiketleri (tag) ile tanımlanır. HTML tek başına bir programlama dili değildir, daha çok içeriği organize etmeye yarayan bir yapıdır.
Bu ilk konuda HTML'in en temel yapısını ve sık kullanılan bazı etiketleri göreceğiz.
1. Temel HTML Belge Yapısı
Her HTML sayfası belirli bir temel şablona uyar. İşte en basit ve modern (HTML5) belge yapısı:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sayfanın Başlığı Buraya Gelir</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>Açıklama:
- `<!DOCTYPE html>`: Belgenin HTML5 standardında olduğunu belirtir. Tarayıcıya sayfayı nasıl yorumlaması gerektiğini söyler.
- `<html>...</html>`: Tüm HTML içeriğini kapsayan kök etikettir. Sayfanın başlangıcını ve sonunu işaretler.
- `<head>...<;/head>`: Sayfa hakkında meta bilgilerini (karakter kodlaması, başlık, SEO bilgileri, CSS ve JavaScript dosyalarının bağlantıları vb.) içerir. Bu kısım doğrudan tarayıcı penceresinde görünmez, ancak sayfanın nasıl çalıştığını ve görüntülendiğini etkiler.
- `<meta charset="UTF-8">`: Karakter kodlamasını belirtir. Türkçe karakterler dahil olmak üzere çoğu dili desteklemek için UTF-8 kullanılması önerilir.
- `<title>...</title>`: Tarayıcı sekmesinde veya pencere başlığında görünen sayfa başlığını belirler.
- `<body>...</body>`: Web sayfasının asıl görünen içeriğinin (metinler, resimler, linkler, tablolar vb.) yer aldığı kısımdır. Kullanıcılar tarayıcılarında bu bölümü görür.
2. Sık Kullanılan Temel Etiketler
Şimdi gelelim sayfalarımıza içerik eklemek için en sık kullandığımız bazı etiketlere:
Başlık Etiketleri (`<h1>`'den `<h6>`'ya): Farklı büyüklükte başlıklar tanımlamak için kullanılır. `<h1>` en büyük, `<h6>` en küçük başlık seviyesidir. Sayfa içindeki başlık hiyerarşisini belirlemek için önemlidirler.
HTML:
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<h3>Biraz Daha Küçük Başlık</h3>
<h4>Dördüncü Seviye Başlık</h4>
<h5>Beşinci Seviye Başlık</h5>
<h6>En Küçük Başlık</h6>Paragraf Etiketi (`<p>`): Metin blokları (paragraflar) oluşturmak için kullanılır. Her `<p>` etiketi genellikle tarayıcı tarafından otomatik olarak üstünden ve altından boşluk verilerek yeni bir satırda başlatılır.
HTML:
<p>Bu bir metin paragrafıdır. Web sayfalarındaki yazıların büyük çoğunluğu paragraf etiketleri içine yazılır.</p>
<p>İkinci bir paragraf. Okunabilirliği artırmak için metinleri paragraflara bölmek önemlidir.</p>Link Etiketi (`<a>`): Başka bir sayfaya veya siteye bağlantı (köprü) oluşturmak için kullanılır. `href` (Hypertext Reference) özelliği, bağlantının gideceği adresi belirtir.
HTML:
<a href="https://www.google.com.tr">Google'a Gitmek İçin Tıklayın</a>
<a href="/hakkimizda.html">Sitemizin Hakkımızda Sayfasına Git</a>Resim Etiketi (`<img>`): Web sayfasına resim eklemek için kullanılır. Kendi kapanan bir etikettir (yani `</img>` şeklinde bir kapanış etiketi yoktur). `src` (Source) özelliği resim dosyasının yolunu, `alt` (Alternative Text) özelliği ise resim yüklenemezse görünecek veya ekran okuyucular tarafından okunacak alternatif metni belirtir (SEO ve erişilebilirlik için önemlidir).
HTML:
<img src="/resimler/logo.png" alt="Sitemizin Logosu">
<img src="https://via.placeholder.com/200x100" alt="Yer Tutucu Görsel">3. Basit Bir Örnek Sayfa (Birleştirilmiş)
Şimdi öğrendiğimiz temel etiketleri kullanarak basit bir örnek HTML sayfası oluşturalım:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hazır Kod Bankası - HTML İlk Sayfam</title>
</head>
<body>
<h1>Hazır Kod Bankası Serisinin İlk Sayfası</h1>
<p>Bu sayfa, HTML temellerini anlattığımız ilk konumuz için hazırlanmıştır.</p>
<p>Aşağıda basit bir link ve bir resim örneği görebilirsiniz.</p>
<h2>Faydalı Bir Link</h2>
<p>
Daha detaylı bilgi için W3Schools HTML Sayfasına göz atabilirsiniz:
<a href="https://www.w3schools.com/html/" target="_blank">W3Schools HTML Rehberi</a>
</p>
[I]('target="_blank"' linkin yeni sekmede açılmasını sağlar.)[/I]
<h2>Bir Resim Örneği</h2>
<img src="https://via.placeholder.com/400x150?text=HTML+Temelleri+Ornegi" alt="HTML Temelleri Görseli">
<p>Umarım bu ilk konu HTML'e güzel bir başlangıç yapmanızı sağlar!</p>
</body>
</html>Bu kodu kopyalayıp bilgisayarınızda bir metin düzenleyiciye (Notepad, VS Code, Sublime Text vb.) yapıştırın ve "index.html" gibi ".html" uzantısıyla kaydedin. Daha sonra bu dosyayı çift tıklayarak herhangi bir web tarayıcısında açabilir ve sayfanın çıktısını görebilirsiniz. Kod üzerinde değişiklikler yaparak farklı başlıklar, paragraflar veya linkler eklemeyi deneyin!
Sıra Sizde!
HTML temelleri hakkında aklınıza takılan her türlü soruyu bu konu altında sormaktan çekinmeyin. Paylaştığım kodları mutlaka kendi başınıza deneyin. Kod yazarak öğrenmek en etkili yoldur!
Yorumlarınızı, denemelerinizi ve geri bildirimlerinizi bekliyorum.
Sırada Ne Var?
HTML ile sayfamızın iskeletini oluşturduk. Ancak şu an sayfamız oldukça sade görünüyor. Bir sonraki konuda bu iskeleti güzelleştirecek, sayfamıza renk, düzen ve stil katacak olan CSS Temelleri'ne giriş yapacağız!
Takipte kalın, seriyi kaçırmayın!
Bu konu, "Hazır Kod Bankası" serisinin ilk parçasıdır ve "Yazılım Bilgi ve Yeni Başlayanlar İçin" kategorisi altında paylaşılmıştır.