HTML Nasıl Oluşturulur? İlk Dosyanızı Hazırlayın
İlk HTML sayfanız için bir metin düzenleyici ve tarayıcı yeterlidir. Dosyayı index.html adıyla kaydedip temel şablonu yazdıktan sonra tarayıcıda açabilirsiniz.
Bu yazıda neler var?
HTML oluşturmak için bir metin düzenleyicide index.html dosyası açın, temel sayfa yapısını yazın ve dosyayı tarayıcıda görüntüleyin. İlk denemenizde 1 başlık ve 1 paragraf eklemek, dosyanın doğru çalıştığını görmeniz için yeterlidir.
HTML Dosyası Nedir?
HTML dosyası, tarayıcının okuyacağı sayfa yapısını içeren düz metin dosyasıdır. Dosya adının sonundaki .html uzantısı, onu bir HTML belgesi olarak tanımlar. Başlangıç için dosyanıza index.html adını verin; böylece sonraki adımlarda hangi dosyayı açacağınız açık olur.
Dosyayı oluşturmak için ayrı bir yayın hizmetine veya sunucuya ihtiyacınız yoktur. Yerel dosyayı tarayıcıda açıp yazdıklarınızı kontrol edin. Başlık, paragraf ve bağlantı gibi içerikleri HTML ile kurarsınız; renk ve yerleşim gibi görsel düzenlemeleri CSS ile yaparsınız.
İlk Dosya Nasıl Kaydedilir?
Yeni başlayanlar için temel bir metin düzenleyici yeterlidir. Düzenleyicide yeni ve boş bir belge açın. Kaydederken dosya adını tam olarak index.html yazın; düzenleyiciniz dosyaya ayrıca .txt ekliyorsa bu uzantıyı kaldırın.
- Metin düzenleyicide yeni bir dosya oluşturun.
- Dosyayı kolay bulacağınız bir klasöre kaydedin.
- Adını index.html olarak belirleyin.
- Dosyayı yeniden açıp içeriğini düzenleyebildiğinizi kontrol edin.
Dosya adında 1 nokta ve onun ardından html uzantısı bulunmalıdır. İçeriği değiştirdikçe dosyayı tekrar kaydedin. Tarayıcı, kaydedilmemiş düzenlemeleri göstermez; bu ayrımı ilk denemenizde kontrol etmeniz işinizi kolaylaştırır.
Başlangıç HTML Şablonu Nasıl Yazılır?
Aşağıdaki satırları dosyanıza sırasıyla yazın. Görünür içeriği body bölümüne, sayfayla ilgili bilgileri head bölümüne yerleştirin. Şablondaki h1 sayfa başlığını, p ise paragrafı oluşturur.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>İlk Sayfam</title>
</head>
<body>
<h1>Merhaba!</h1>
<p>İlk HTML sayfam.</p>
</body>
</html>
İlk satır tarayıcıya belgeyi HTML olarak işlemesini bildirir. lang="tr" sayfa dilini, UTF-8 ise Türkçe karakterleri doğru yorumlamak için kullanılan karakter kodlamasını belirtir. Viewport satırı, sayfanın cihaz genişliğine uygun açılmasını sağlar.
| Bölüm | İçerik | Kontrol yeri |
|---|---|---|
| head | Sayfa bilgileri ve title | Tarayıcı sekmesi |
| body | h1 ve p gibi görünür içerik | Tarayıcı penceresi |
Dosya Tarayıcıda Nasıl Açılır?
Dosyayı kaydettikten sonra index.html dosyasını tarayıcı penceresine sürükleyin. İsterseniz tarayıcının dosya açma seçeneğiyle aynı dosyayı seçin. Sayfada Merhaba! başlığını ve hemen altında İlk HTML sayfam. paragrafını görmelisiniz.
- Dosyadaki h1 metnini kendi başlığınızla değiştirin.
- p etiketinin içindeki cümleyi düzenleyin ve dosyayı kaydedin.
- Tarayıcı sekmesini yenileyip 2 değişikliği kontrol edin.
title metnini sayfa içindeki başlıkla karıştırmayın. Şablondaki title, tarayıcı sekmesinde görünür; body içindeki h1 ise sayfanın üzerinde yer alır. İkisini ayrı ayrı düzenleyerek aradaki farkı doğrudan görebilirsiniz.
Sık Yapılan Hatalar ve Çözümleri
Dosya tarayıcıda beklediğiniz gibi açılmıyorsa önce adını ve uzantısını kontrol edin. index.html.txt adıyla kaydedilen bir dosya, amaçladığınız HTML dosyası değildir. Dosyanın gerçek adını görmek için dosya yöneticinizde uzantıların görünümünü açın.
- Etiketler sayfada yazı olarak görünüyor: Dosyanın .html uzantısıyla kaydedildiğini kontrol edin.
- Türkçe karakterler bozuk görünüyor: Şablondaki UTF-8 satırını kontrol edin ve dosyayı UTF-8 kodlamasıyla kaydedin.
- Eski metin görünmeye devam ediyor: Düzenlemeyi kaydedin, ardından tarayıcı sekmesini yenileyin.
- Başlık beklenen yerde değil: h1 etiketini body bölümünün içinde tuttuğunuzu kontrol edin.
Her kontrolde önce 1 sorunu düzeltin ve dosyayı yeniden açın. Böylece hangi değişikliğin işe yaradığını görürsünüz. Açılış ve kapanış etiketlerini de eşleştirin: paragraf <p> ile başlar, </p> ile biter.
HTML, CSS ve JavaScript Ne İçin Kullanılır?
HTML ile sayfanın içeriğini ve yapısını kurun. Başlık için h1, paragraf için p kullanmanız bu ayrımın ilk örneğidir. CSS, bu öğelerin renklerini, boşluklarını ve yerleşimini düzenler; JavaScript ise kullanıcı etkileşimlerine yanıt veren davranışlar ekler.
İlk dosyanızda yalnızca HTML kullanmanız yeterlidir. Örneğin body bölümüne 1 yeni p etiketi ekleyip ikinci bir paragraf oluşturun. Ardından dosyayı kaydedip tarayıcıda yenileyin. Bu adım, sayfanın yapısını değiştirmeyi görsel düzenleme ve etkileşim ekleme işlerinden ayrı tutar.