PARAGRAFLAR

bu etiket paragraf oluşturmak için kullanılır. bir yazıyı nasıl paragraflara ayırarak yazıyor isek html sayfasında da aynı işi <p> etiketi ile yaparız.

<p>paragrafın içine yazılacak yazılar</p>

şeklinde kullanılır. açılış etiketi paragrafın başladığı yeri, kapanış etiketi de bittiği yeri belirtir. ikinci bir paragraf yazmak istediğimizde yeni bir p etiketi açarız.

şimdi burada ilk defa html yazan arkadaşların karşısına çıkan bir durum var. kod yazdığınız programda enter tuşuna basıp alt satıra geçtiğinizde, tarayıcıda da yazının alt satıra geçmesini bekleyebilirsiniz. fakat normal html metninde işler bu şekilde yürümüyor. tarayıcı kaynak koddaki bu satır sonlarını genellikle bir boşluk gibi değerlendirir.

birinci satırdaki yazı
ikinci satırdaki yazı

<p>birinci paragraftaki yazı</p>
<p>ikinci paragraftaki yazı</p>

üstteki iki satırın tarayıcıda yan yana geldiğini, p etiketleri içine yazılanların ise ayrı paragraflar olduğunu göreceksiniz. yani kodlarımızı okunaklı olsun diye satırlara ayırmamız ile sayfada paragraf oluşturmamız aynı işlem değildir.

p etiketi satırı nasıl kullanır?

başlık etiketlerinde olduğu gibi p etiketi de varsayılan olarak blok halinde gösterilir. CSS ile bu davranışı değiştirmediysek yeni satırdan başlar ve içinde bulunduğu alanın kullanılabilir genişliğini kaplar. yazı kısa olsa bile arkasından gelen normal metin aynı satırda devam etmez.

burada bütün ekranı kaplar diye düşünmeyin. paragrafı dar bir kutunun içine koyduysanız kaplayacağı genişlik de o kutuya göre olur. paragrafların üstünde ve altında gördüğünüz boşluklar da tarayıcının varsayılan stillerinden gelir, bunları CSS ile değiştirebilirsiniz.

açıklama kodlarımız

<!DOCTYPE HTML>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Paragraf etiketi örneği</title>
</head>
<body>
paragraf dışı bir yazı
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
paragraf dışı bir yazı
paragraf dışı bir yazı
</body>
</html>

kodlarımızın tarayıcı çıktısı

Paragrafların ve paragraf dışındaki yazıların tarayıcıdaki görünümü

örnekte uzun metinleri özellikle iki ayrı p etiketi içine aldık. en altta ise iki satırlık yazıyı paragraf etiketi kullanmadan yazdık. tarayıcıda bu son iki satırın birleştiğine dikkat edin. üstte anlattığımız enter tuşu meselesini burada da görebilirsiniz.

paragraf ile satır sonu arasındaki fark

bir paragrafın içinde alt satıra geçmek istersek <br> kullanabiliriz. mesela bir adresin sokak ve ilçe bilgisini ayrı satırlara yazacağız ama ikisi de aynı paragrafın içinde kalacak.

<p>Örnek sokak, No: 10<br>Merkez / Ankara</p>

br burada yeni bir paragraf oluşturmaz, sadece satırı böler. ayrı bir konuya yada yeni bir düşünceye geçtiğimizde ise yeni p etiketi açmamız daha uygundur. sırf arada boşluk oluşsun diye peş peşe br yazmak yerine boşlukları CSS ile ayarlayabiliriz.

bir de p etiketinin içine başka bir p, div, başlık yada liste etiketi koymayın. tarayıcı böyle bir durumda paragrafı beklediğiniz yerden önce kapatabilir. paragraf içinde bir kelimeyi vurgulamak için strong, başka bir sayfaya bağlantı vermek için a etiketi kullanabilirsiniz. bağlantının nasıl yazıldığını da link etiketi yazımda anlattım.

örneği denedikten sonra iki paragraftan birinin kapanış etiketini kontrol edin, sonra metinlerin yerlerini değiştirip tekrar açın. hangi yazının hangi paragrafın içinde kaldığını kod ile ekran görüntüsünü karşılaştırarak daha rahat görebilirsiniz.