Kitap, dergi vb. kaynaklarda yazının okunurluğu için paragraflar kullanıldığı gibi web sayfalarında da paragraflar daha rahat okumayı sağlaması açışından önemlidir. Web sayfalarında paragraflar html p etiketi ile yazılmaktadır. Html pre etiketi ile de genelde alıntı metinler yazılmaktadır.
Html P Etiketi
Paragraflar genel olarak html p etiketi ile yazılır. Kullanımı ise aşağıdaki gibidir:
<p> Örnek Metin Yazısı </p>Html p etiketi, yukarıda örnekte görüldüğü gibi bir paragraf olmasını istediğimiz yazının başına başlangıç etiketi ve yazının bitimine bitiş etiketini yazarız. Uzun yazılarda yani giriş, gelişme ve sonuç kısımlarını içeren yazılarda her bölümü bir html <p> etiketi içine alarak yazının okunurluğu daha kolay hale getirmiş oluruz. Örnek olarak uzun bir metni tek bir etiketi daha sonra da metni üç parçaya ayırarak üç kez etiket içine alalım ve bir yazının okunurluğunun ne kadar artığını görelim.
Örnek 1- Uzun metni tek <p> etiketi içine yazdığımızda sonucu görelim. Önce kod kısmını sonra sonucunu görelim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde ipsam sunt dolorum id in ab optio eos, ullam, qui a, temporibus at quae autem adipisci est. Numquam quisquam debitis, minima modi esse, quo sed illo rem beatae eveniet quidem repellat eum quasi eligendi consequatur, recusandae ipsam voluptas dolorum commodi officia! Eius doloribus facere earum ipsa expedita quibusdam molestias fugiat, enim saepe quam aspernatur! Blanditiis itaque quisquam impedit iure placeat nam maxime asperiores id, dolores necessitatibus veniam? Temporibus recusandae numquam qui, unde a dolores! Fuga dolorum dolor delectus asperiores molestias voluptate odio ad optio, corrupti culpa temporibus placeat saepe nesciunt eos.
</p>
</body>
</html>Sonucu :
Örnek 2- Bu kez aynı uzunluktaki metni üç tane <p> etiketi içine alarak yapalım.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia omnis, aliquam tenetur amet cupiditate voluptatem consectetur animi illum quam doloremque. Fugit ipsam beatae blanditiis voluptatum eius sapiente mollitia repellendus hic?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora eligendi doloribus optio dicta maiores debitis saepe, delectus minima neque. Voluptas eaque minima commodi aliquam! Deleniti aliquid nihil perferendis illum eligendi et magni fugiat. Minima ad corporis eveniet reiciendis et.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil consequatur cum, aperiam quaerat iste asperiores iusto eaque vel voluptatibus saepe perspiciatis cumque quasi fugiat! Nam, asperiores atque? Nobis, incidunt eos!</p>
</body>
</html>Sonucu:
Görüldüğü gibi daha kolay bir şekilde okunurluğu olan bir yazı haline gelmiş oldu. Burada paragraflarda ilk satır biraz içeriden başlatma vb.. paragraf ayarlarını yaptığımızda daha da güzel olacaktır. Bu işlemlerin konusu CSS de olduğu için, Css derslerimizde anlatacağız.
Html Pre Etiketi
Html pre etiketi, önceden biçimlendirilmiş metin tanımlar. Yani kod kısmında yaptığınız satır sonlarını dikkate alır. P etiketinde her cümleyi alt alt yazsak bile bunları ayrı paragraf olarak dikkate almıyor ama html pre etiketi burada biz nasıl yazmışsak onları dikkate alarak olduğu gibi web sayfalarına yansıtıyor. Bir örnek ile pre ve p etiketi arasındaki farkı görelim.
Örnek : İlk olarak pre etiketi ile yapalım.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<pre>
Korkma, sönmez bu şafaklarda yüzen al sancak;
Sönmeden yurdumun üstünde tüten en son ocak.
O benim milletimin yıldızıdır, parlayacak;
O benimdir, o benim milletimindir ancak.
M.Akif Ersoy
</pre>
</body>
</html>Sonucu:
Aynı örneği birde Html <p> etiketi ile yapalım:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>
Korkma, sönmez bu şafaklarda yüzen al sancak;
Sönmeden yurdumun üstünde tüten en son ocak.
O benim milletimin yıldızıdır, parlayacak;
O benimdir, o benim milletimindir ancak.
M.Akif Ersoy
</p>
</body>
</html>Sonucu aşağıda gördüğünüz gibi satırı doldurduktan sonra bir alt satıra devam ederek gidiyor p etiketinde. Pre etiketinde kod tarafında yazı nasıl ise aynı şekilde web sayfasında da gözüküyor.
Başka bir yazımızda görüşmek üzere…
