Herkese Merhaba MC-TR Ailesi.
Yeni bir proje başlatıyorum. Her gün bir konu açacağım ve 30 günde sizle beraber Web Geliştirmeyi öğreneceğiz
HTML5 & CSS3 101 - Gün 1 (7 gün sürecek olan ilk bölüm)
HTML'e Giriş, Kurulum ve İlk Web Sayfanız
Merhaba!
Bu eğitim serisine hoş geldiniz.Bu seri boyunca HTML'i sıfırdan başlayarak detaylı bir şekilde öğreneceğiz. Serinin sonunda kendi web sitelerinizi oluşturabilecek seviyeye gelmiş olacaksınız.
Bu eğitim özellikle;
- Yazılıma yeni başlayanlar
- Web geliştirme öğrenmek isteyenler
- Minecraft sunucusu için web sitesi yapmak isteyenler
- Portfolyo sitesi hazırlamak isteyenler
Her derste yeni bilgiler öğrenecek, bol bol örnek inceleyecek ve küçük projeler yapacağız.
HTML Nedir?
HTML'in açılımı HyperText Markup Language'dir. Türkçe anlamı ise Hiper Metin İşaretleme Dili'dir. Burada dikkat edilmesi gereken önemli nokta şudur:HTML, web sayfalarının iskeletini oluşturan bir işaretleme dilidir.
Bir web sitesindeki;
- Başlıklar
- Paragraflar
- Resimler
- Videolar
- Butonlar
- Formlar
- Tablolar
HTML Tek Başına Yeterli mi?
Hayır.Modern bir web sitesi genellikle üç temel teknolojiden oluşur.
| Teknoloji | Görevi |
|---|---|
| HTML | Sayfanın iskeletini oluşturur. |
| CSS | Sayfanın görünümünü güzelleştirir. |
| JavaScript | Sayfaya etkileşim kazandırır. |
- HTML → Evin duvarları ve odaları
- CSS → Boya, dekorasyon ve mobilyalar
- JavaScript → Elektrikler, kapılar ve akıllı sistemler
HTML Nerelerde Kullanılır?
HTML neredeyse gördüğünüz tüm web sitelerinde kullanılır.Örneğin;
- Haber siteleri
- Forumlar
- E-ticaret siteleri
- Portfolyo siteleri
- Bloglar
- Şirket web siteleri
- Oyun tanıtım sayfaları
HTML Nasıl Çalışır?
Bir web sitesi açtığınızda aslında şu süreç gerçekleşir.- Tarayıcı bir web sitesine istek gönderir.
- Sunucu HTML dosyasını gönderir.
- Tarayıcı HTML dosyasını okur.
- HTML etiketlerini yorumlar.
- Sayfayı ekranda gösterir.
Örneğin:
<h1>Merhaba Dünya</h1>
Tarayıcı bunu ekranda büyük bir başlık olarak gösterir.
Gerekli Programlar
Bu seride kullanacağımız programlar:- Visual Studio Code
- Live Server eklentisi
- Google Chrome veya Microsoft Edge
İlk Projemizi Oluşturalım
Masaüstünde yeni bir klasör oluşturun.Örneğin:
* HTML101
* Bu klasörü VS Code ile açın.
* Daha sonra yeni bir dosya oluşturun.
Dosyanın adı:
index.html
İlk HTML Dosyamız
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
</body>
</html>Tarayıcıda açtığınızda büyük puntolu Merhaba Dünya! yazısını göreceksiniz.
Tebrikler!
İlk web sayfanızı oluşturdunuz.
Kodu Satır Satır İnceleyelim
<!DOCTYPE html>
Tarayıcıya bu dosyanın HTML5 standardında olduğunu söyler.Her HTML dosyasının en üstünde bulunmalıdır.
<html>
Tüm HTML sayfasını kapsayan ana etikettir.Sayfadaki bütün içerikler bunun içinde bulunur.
lang="tr"
Sayfanın dilini belirtir.Türkçe içerik için:
<html lang="tr">
İngilizce için:
<html lang="en">
SEO ve erişilebilirlik açısından önemlidir.
<head>
Kullanıcı tarafından görünmeyen bilgileri içerir.Örneğin;
- Sayfa başlığı
- Meta etiketleri
- CSS dosyaları
- Fontlar
<title>
Tarayıcı sekmesinde görünen başlığı belirler.<title>HTML 101</title>
<body>
Kullanıcının gördüğü tüm içerikler burada yer alır.Başlıklar, yazılar, resimler ve butonlar bu bölümde bulunur.
İlk Etiketimiz:
Başlık oluşturmak için kullanılır.<h1>Merhaba Dünya</h1>
HTML'de 6 farklı başlık etiketi vardır.
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>
h1 en büyük,
h6 ise en küçük başlıktır.
Bir sayfada genellikle yalnızca bir adet h1 kullanılması önerilir.
Paragraflar
Paragraf oluşturmak için <p> etiketi kullanılır.<p>Bu benim ilk web sayfam.</p>
Birden fazla paragraf oluşturabilirsiniz.
<p>Merhaba.</p>
<p>HTML öğreniyorum.</p>
<p>Bu çok eğlenceli.</p>
HTML Yorum Satırları
Yorumlar tarayıcıda görünmez.Kod yazarken açıklama eklemek için kullanılır.
<!-- Bu bir yorum satırıdır -->
Örnek:
<!-- Ana Başlık -->
<h1>HTML 101</h1>
<!-- İlk paragraf -->
<p>Merhaba Dünya</p>
İlk Mini Projemiz
Aşağıdaki kodu yazın.
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Hakkımda</title>
</head>
<body>
<h1>Merhaba!</h1>
<p>Ben web geliştirmeyi öğreniyorum.</p>
<p>En sevdiğim oyun Minecraft.</p>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>Sık Yapılan Hatalar
Dosyayı
Yanlış:index.txt
Doğru:
index.html
Etiketleri kapatmamak
Yanlış:<h1>Merhaba
Doğru:
<h1>Merhaba</h1>
Yanlış dosya adı
Ana sayfa dosyası mümkün olduğunca:index.html
olmalıdır.
Günün Özeti
Bugün şunları öğrendik:- HTML nedir?
- HTML ne işe yarar?
- HTML programlama dili midir?
- HTML nasıl çalışır?
- VS Code kurulumu
- İlk HTML dosyası
- HTML iskeleti
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- <body>
- <h1>
- <p>
- HTML yorum satırları
Alıştırmalar
Alıştırma 1
Aşağıdaki çıktıyı oluşturun.HTML 101
Bugün HTML öğrenmeye başladım.
Alıştırma 2
Kendinizi tanıtan küçük bir sayfa hazırlayın.İçerisinde;
- Adınız
- Yaşınız
- Hobileriniz
Alıştırma 3
En sevdiğiniz oyun hakkında kısa bir HTML sayfası hazırlayın.En az;
- 1 adet başlık
- 3 adet paragraf
Sonraki Ders
Bir sonraki derste;- Metin biçimlendirme
- <strong>
- <b>
- <i>
- <em>
- <mark>
- <small>
- <sup>
- <sub>
- <br>
- <hr>
Alıştırmaları gönderin ki yorumlayıp hatalarınıza yardımcı olmaya çalışalım.
