HTML Paragraf Etiketi: “<p>”
HTML belgelerinde paragraf oluşturmak için <p> etiketinden yararlanılır. Her bir paragraf yeni bir satır başını kullanacağı için her zaman yeni bir satırda başlar. Tıpkı başlık etiketlerinde olduğu gibi her bir paragraf etiketinden sonra da kendiliğinden bir satır atlanır:
<!doctype html>
<html>
<head>
<title>Html Başlık Etiketleri</title>
<meta charset="utf-8" />
</head>
<body>
<h1> H1 Başlık Etiketi </h1>
<h2> H2 Başlık Etiketi </h2>
<h3> H3 Başlık Etiketi </h3>
<h4> H4 Başlık Etiketi </h4>
<h5> H5 Başlık Etiketi </h5>
<h6> H6 Başlık Etiketi </h6>
<p> Bu bir paragraf </p>
<p> Bu da bir paragraf </p>
</body>
</html>
HTML kodlarına fazladan boşluk veya fazladan satır ekleyerek web tarayıcılarında gözükecek görüntü değiştirilemez. Bilakis bu fazladan boşluk ve satırlar tarayıcılar tarafından sayfa görüntülendiğinde otomatik olarak kaldıracaktır:
<!DOCTYPE html>
<html>
<body>
<p>
Bu paragraf
kaynak kodunda
çok sayıda satır içeriyor, ancak
tarayıcı bunu
yok sayıyor.
</p>
<p>
Bu paragraf kaynak kod ise
çok fazla boşluk içeriyor,
ancak tarayıcı bunu
yok sayıyor.
</p>
<p>
Bir paragraftaki satır sayısı tarayıcı penceresinin boyutuna bağlıdır. Tarayıcı penceresini yeniden boyutlandırırsanız, bu paragraftaki satır sayısı değişecektir.
</p>
</body>
</html>
HTML’de yeni bir paragraf başlatmadan bir satır sonu oluşturmak için <br/> etiketi kullanılır. Yukarıdaki yazdığınız kodu olduğu gibi boşlukları atlamasın istiyorsanız <pre> etiketini kullanabilirsiniz.
Paragraf Etiketinin Öznitelikleri
align(HTML4, modern kullanımda önerilmez): Paragraf içeriğini hizalamak için kullanılır. Değerler:left,right,center,justify. Modern HTML’de CSS ile hizalama yapılması tavsiye edilir.id: Paragrafa benzersiz bir kimlik atar, özellikle CSS ve JavaScript ile işlem yapmak için kullanılır.class: Paragrafa bir veya birden fazla CSS sınıfı atar.style: Paragrafın doğrudan stillendirilmesi için kullanılır.title: Paragrafa ek açıklama sağlar, fare imleci üzerine geldiğinde bu açıklama görüntülenir.dir: Metnin okuma yönünü belirtir (ltr– soldan sağa,rtl– sağdan sola).lang: Paragrafın dilini belirtir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Paragraf Öznitelikleri</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
.blue-text {
color: blue;
}
</style>
</head>
<body>
<h1>HTML Paragraf Etiketi ve Öznitelikleri</h1>
<!-- Basit Paragraf -->
<p>Bu, bir basit paragraf örneğidir. Öznitelik içermez.</p>
<!-- align Özniteliği -->
<p align="center">Bu paragraf ortalanmıştır. (align özniteliği kullanıldı, ancak modern HTML'de önerilmez.)</p>
<!-- id Özniteliği -->
<p id="unique-paragraph">Bu paragrafa "id" özniteliği verilmiştir. CSS ve JavaScript ile özel işlemler yapılabilir.</p>
<!-- class Özniteliği -->
<p class="highlight">Bu paragraf, "highlight" sınıfıyla sarı arka plan ve kalın yazı stiline sahiptir.</p>
<!-- style Özniteliği -->
<p style="color: red; font-size: 18px;">Bu paragraf, style özniteliği ile kırmızı renge ve 18px yazı boyutuna sahip.</p>
<!-- title Özniteliği -->
<p title="Bu, bir açıklamalı paragraf.">Fareyle üzerine geldiğinizde bu paragrafın açıklaması görünecek.</p>
<!-- dir Özniteliği -->
<p dir="rtl">Bu paragraf sağdan sola yazılmıştır. (Örnek: Arapça veya İbranice gibi diller)</p>
<!-- lang Özniteliği -->
<p lang="en">This paragraph is marked as English. (Dil İngilizce olarak belirtilmiştir.)</p>
</body>
</html>