0 gün Seviye 1 Avar Teknolojileri

Boşluklar ve Satırlar

Ders 6/45 · 5 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda tarayıcının boşlukları nasıl okuduğunu bilecek ve satır bölmek için doğru etiketi seçebileceksiniz.

Varsayılan tarayıcı düzeni

Buradan sonra yazacağımız kodlar HTML’in varsayılan düzenini içerecek. VS Code üzerinden ! yazarak otomatik olarak kodu yazabilirsiniz.

Tarayıcı boşlukları birleştirir

Kodda art arda yazdığınız boşluklar ve satır sonları, sayfada tek bir boşluğa dönüşür.

<!--En yeni versiyon olan HTML5 kullanılsın, 
dili türkçe olsun, 
UTF-8 karakterleri kullanılsın 
ve 1.0x boyutunda cihaz genişliği kadar bir alan ayrılsın.
İsmi de "Boşluklar" olsun.
--->
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Boşluklar</title>
</head>
<body>
  Bu     cümlede     çok fazla boşluk var.
  Bu ise
  üç satıra
  bölünmüş bir cümle.
</body>
</html>

Hepsinin tek satırda ve tek boşlukla göründüğüne dikkat edin.

Bu kural işinize yarar: Kodunuzu okunaklı olsun diye girintileyebilirsiniz, sayfanın görünümü değişmez.

Paragraf: p

Bir metni paragraflara bölmek için her paragrafı p etiketiyle yazın. Tarayıcı paragrafların arasına kendiliğinden boşluk bırakır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paragraflar</title>
</head>
<body>
  <p>Hadise Açıkgöz (d. 22 Ekim 1985, Mol), Türk ve Belçikalı şarkıcıdır. Belçika'nın Mol şehrinde Sivaslı bir ailenin kızı olarak doğup büyüdü. 2003 yılında Idool 2003 yarışmasına katıldıktan sonra albüm teklifi alınca ilk albümünün hazırlıklarına başladı.[2] 2005 yılında yayınlanan ilk stüdyo albümü Sweat'te yer alan "Stir Me Up" şarkısıyla Belçika'da ve Türkiye'de tanınmaya başladı.[3] Türk basınının kendisiyle ilgilenmesinden sonra kariyerini Türkiye'ye taşıdı..</p>
  <p>2009 Eurovision Şarkı Yarışması veya 54. Eurovision Şarkı Yarışması, 12-14-16 Mayıs 2009 tarihlerinde Rusya'nın başkenti Moskova'da düzenlenen, Norveç'in 387 puanla birinci olduğu yarışmadır. Yarışmanın birinci yarı finali 12 Mayıs, ikinci yarı finali ise 14 Mayıs tarihlerinde düzenlenmiştir.[2] Yarışmaya 42 ülke katılmıştır.</p>
</body>
</html>

Satır sonu: br

br, paragrafı bölmeden yeni bir satıra geçer. Adres veya şiir gibi satır sonlarının metnin bir parçası olduğu yerlerde kullanılır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Satır sonu</title>
</head>
<body>
  <p>Adana Sivas Mersin<br>Akşama yemeğimi yersin<br>Allah seni ıslah etsin</p>
</body>
</html>

Konu ayracı: hr

hr, içerikte konu değiştiğini gösterir. Tarayıcılar bunu yatay bir çizgi olarak çizer.

Biçimi koruyan metin: pre

pre etiketinin içindeki boşluklar ve satır sonları olduğu gibi korunur. Metin de genellikle eş aralıklı bir yazı tipiyle görünür.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pre</title>
</head>
<body>
  <p>Sana karşı mektuplarım</p>
  <hr>
  <pre>
  Ayşe yedi kaşe.
     Yüzümde  dolu neşe.
    
  </pre>
</body>
</html>
Sık yapılan hatalar

Boşluk bırakmak için üst üste br yazmak. İki paragrafın arasını açmak br etiketinin görevi değildir. Boşlukları CSS ile ayarlamayı ileride öğreneceğiz.

Paragrafları br ile ayırmak. Ayrı paragraflar için ayrı p etiketleri kullanın.

Soru 1

Kodda “MerhabaㅤㅤㅤㅤㅤㅤDünya” yazıyor. Sayfada nasıl görünür?

  • Yazıldığı gibi, on boşlukla :: Tarayıcı art arda gelen boşlukları birleştirir.
  • Merhaba Dünya :: Doğru. Art arda gelen boşluklar tek boşluğa dönüşür.
  • MerhabaDünya :: Bir boşluk korunur.
Soru 2

Bir adresi üç satır halinde tek paragraf içinde yazmak istiyorsunuz. Hangisini kullanırsınız?

  • hr :: hr konu değişimini gösterir.
  • br :: Doğru.
  • Kodda Enter’a basmak yeterlidir :: Tarayıcı satır sonlarını boşluğa çevirir.
Adres kartı

Hedefteki sonucu elde edin. Yalnızca body içine yazılacak kodu yazın (body hariç). Adres üç satırlı tek bir paragraf olsun, ardından bir hr, ardından Teşekkürler! yazan bir paragraf gelsin.

<p>Hapkod Okulu<br>Kodlama Sokak No: 1<br>İstanbul</p>
<hr>
<p>Teşekkürler!</p>

Bu derste öğrendikleriniz

  • Tarayıcı art arda gelen boşlukları ve satır sonlarını tek boşluğa çevirir.
  • Paragraflar için p, paragraf içinde satır sonu için br kullanılır.
  • hr konu değişimini gösterir, pre metnin biçimini korur.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.