HTML'de Paragraflar

by trustix


Eklenme Tarihi : 15 Aralık 2020 10:35 Views:     516



Paragraf yapıları bir metnin ya da metin bloğunun biraz içeriden başladığı ve kalan metnin bir blok halinde bulunduğu yapılardır. Chrome, Opera gibi internet tarayıcıları ise bir web sayfasında paragraf etiketi ile karşılaştıklarından otomatik olarak bu etiketin başına ve sonuna bir miktar boşluk eklemektedirler.

HTML'de Paragraf Yapısı İle İlgili Genel Bilgiler

  • HTML'de paragraf yapısı <p> etiketi ile oluşturulur.
  • Her HTML etiketinde olduğu gibi <p> etiketinin de birtakım öznitelikleri vardır.
  • Paragraf içerisinde boşluklar mutlak boşluk değildir. Birden fazla boşluk bırakıldığında web sayfasının açıldığı cihaza ve tarayıcıya göre kısmen farklı görünmesi muhtemeldir.
  • Varsayılan olarak paragraf yapılarında ekran boyunca metinler yan yana yazılır.
  • Metinlerin bir alt satıra opsiyonel olarak geçmesi için <br> etiketi kullanılır.
  • Alt alta yazılan metinlerin yazıldığı gibi görünmesini sağlamak için <pre> etiketi 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>Html - Paragraflar</title>
</head>
<body>

    <!-- Paragraf İçerisindeki  Metin-->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem omnis eius suscipit facilis, magnam itaque neque et temporibus ex quasi sunt cumque architecto doloribus. Non reiciendis adipisci dicta eveniet fugiat.
    Quaerat fugit veniam itaque accusamus animi, numquam distinctio eos? Distinctio ad molestias facere soluta saepe praesentium, ex modi eveniet voluptatibus non voluptatem facilis. Vitae, fugiat dolores? Eius mollitia vel nihil?
    Error, alias! Autem impedit, voluptas sequi accusamus, dolorum harum deserunt vero iste neque labore reiciendis tempore aperiam repellendus delectus porro ab perspiciatis velit nulla ipsam voluptates voluptatem! Ab, recusandae obcaecati.
    Quam, et. Laudantium exercitationem atque odio aperiam possimus aliquid beatae rerum nisi nihil vero sint tempore saepe delectus minus itaque, quod ratione voluptatum? Odit rem, obcaecati ipsam voluptatibus illum minima!
    Illo nobis tempore quisquam repellendus placeat incidunt saepe. Quia fugiat omnis molestiae repellat rem exercitationem autem laudantium ullam consequuntur, labore impedit porro totam laboriosam, minima amet quis corporis fuga sint?
    </p>

</body>
</html>

 

 

Alt Alta Yazılan Metinlerin Yazıldığı Gibi Görünmesini Sağlamak

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html - Paragraflar - pre Etiketi </title>
</head>
<body>

    <!-- 
        Paragraf içerindeki metnin yazıldığı gibi
        çıktılanması
        ya da alt alta örnekteki gibi
        yazılan metnin yine web sayfasından
        bu şekilde görünmesini sağlamak için 
        ya paragraf etiketleri içerisinde
        <pre> etiketi kullanılır.
        Ya da paragraf yapısı olmadan direkt <pre>
        etiketi kullanılır.
    -->
    <p>
        <pre>
            Tohum saç, bitmezse toprak utansın!
            Hedefe varmayan mızrak utansın!

            Hey gidi Küheylan, koşmana bak sen!
            Çatlarsan, doğuran kısrak utansın! 
        </pre>
    </p>

</body>
</html>

 

 

Paragrafların style Özniteliği İle Şekillendirilmesi

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html - Paragraflar - CSS </title>
</head>
<body>

    <!-- 
        Paragrafların style özniteliği kullanılarak CSS ile şekillendirilmesi
    -->
    <p style="margin:20px; padding:20px; line-height:20px; letter-spacing:1px; color: #de6769;  font-size:16px;  background-color: #464646;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos modi odio perspiciatis voluptas, vero, culpa nesciunt ipsa nostrum consequuntur placeat sint maxime velit et ipsum? Eos cumque atque reprehenderit molestiae?
        Assumenda ipsam neque eaque porro ad alias, doloribus corrupti aspernatur voluptatibus inventore hic laborum recusandae adipisci labore commodi praesentium, consequatur esse repudiandae! Delectus natus mollitia in aspernatur cum illo doloremque.
        Est quam aut harum dolorum soluta sapiente nam molestias at, cum voluptas ut incidunt itaque rem odit consequatur placeat assumenda provident, rerum unde omnis delectus. Fugit commodi voluptates modi quae.
        Alias omnis cumque quo harum neque exercitationem ex mollitia, eveniet natus autem nam fuga dignissimos suscipit asperiores repellat sequi amet aspernatur labore magnam excepturi rerum odit eaque quisquam eum. Consectetur.
        Sed quo placeat accusantium similique repellendus corporis. Labore quas neque dolores vero molestias. Qui, nam ducimus ipsum minima sapiente veniam. Deleniti enim dolorum vitae nostrum laborum necessitatibus eos eum odit.
    </p>

</body>
</html>




Önceki İçerik

Sonraki İçerik


0

Yorum Formu

vikikod.com    © 2019