Paragraf, boşluk, HTML bloğu ve paragrafı tanımlayan etiketler

ayrıntılı olarak düşünelim HTML blokları ve paragrafları bir web sayfasının öğeleri olarak.

• HTML paragrafı etiketlerle tanımlanır.
• HTML paragrafları genellikle metin, biçimlendirme etiketleri, resimler içerir.
• HTML paragrafı başlıklar gibi blok öğeleri içeremez
  

  -

  , engellemek
  ve diğer paragraflar.
• HTML bloğu etiketlerle tanımlanmış
  .
• HTML bloğu bir web sayfasının herhangi bir öğesini herhangi bir miktarda içerebilir.
• HTML blokları web sayfaları için harikadır ve işlenmesi kolaydır.

Aşağıdaki kodu göz önünde bulundurun:

Sonuç:

bunu görebiliriz HTML paragrafları dikey girintilidir - etiketlerin özelliği budur. HTML blokları

bu tür boşluklar yaratmazlar, çünkü herhangi bir yük taşımazlar, sadece konteynerlerdir.

Etiketler başka veya

... Doğrusal öğeler, örneğin metnin biçimlendirilmesinden sorumlu etiketler gibi veya içine yerleştirilebilir.

Etiketler ve prensip olarak aynı şey, ancak W3C konsorsiyumu küçük harflerin kullanılmasını önerdi. V Yeni sürüm HTML, modern XHTML'de olduğu gibi, etiket yazarken büyük harflerin kullanılması yasaktır.

Engellemek

gerektiği kadar kendi içinde içerebilir ve diğer unsurlar HTML belge. Mizanpaj için mükemmeldir, ancak daha sonra CSS eğitiminde daha fazlası.

Özel karakter tablosundan HTML alanı

HTML alanı kelimeler ve karakterler arasındaki boşluğu artırmanıza olanak tanır.

Sözcükler arasındaki boşluklara gelince, Notepad'de yani kaynak kodunda kaç tane olursa olsun, web sayfasında sadece bir tanesi görüntülenecektir. Mesafeyi artırmanız gerekiyorsa, sembol tablosundaki boşluk karakterini kullanın. Soruyorsunuz: Neden sıradan karakterlerin bu kodlanmış değerlerine ihtiyacımız var? - Cevap vereceğim: Örneğin, bu tür parantezleri görüntülemeleri gerekiyor< >... Başka bir deyişle, etiketleri görüntülemek için editörümde şunu yazıyorum: ... Etiketler , hatırladığımız gibi, metni monospaced'e (daktiloyla yazılmış) dönüştürün.

Bir HTML paragrafını görüntülemenin yolları

Paragraf çıktısı örnekleri.

Merhaba! Web sitesi programlamanın temellerine bakmaya devam edelim. Kodlarında paragraf etiketi olmadan herhangi birini hayal etmek zor. Bugün, nasıl doğru yazılacağını ve metinle birlikte birkaç ek eylemin tanımını ele alacağız.

Örnek

HTML kodunda nasıl paragraf yapılacağına bir örnek verelim.

Bir veya daha fazla cümle.

Önkoşul bir açılış ve kapanış etiketinin varlığıdır. Bu arada, her şey doğrudan not defterinde yapılabilir, tam o zaman dosyayı uygun biçimde kaydetmeniz gerekir.

biçimlendirme

Oldukça sık insanların nasıl kırmızı bir çizgi çizileceğiyle ilgilendiğini fark ettim. Belirli bir paragraf için yapmak çok kolaydır.

Bu seçeneklerin etkinleştirilmesi, ilk satırı soldan 15 piksel girintileyecektir. Bu tür değişiklikler tüm P etiketlerine uygulanacaksa, CSS dosyası, sitenin sayfalarına bağlanan, aşağıda gösterilen kodu yazabilirsiniz.

Şahsen, not defterinde veya başka bir düzenleyicide kod düzenlerken genellikle kırmızı çizgiler yapmam.

Ben sadece metin blokları arasına dolgu ekliyorum. Bunu yapmak için, CSS'ye yazmanız gerekir. özel parametreler.

p (alt kenar boşluğu: 25 piksel;)

Bu yapıyı kullanırsanız, her paragraftan sonra 25 piksellik bir girinti olacaktır.

Aslında, HTML ve çeşitli stiller ile çalışmak için birçok seçenek var. Ben sadece birkaç tanesini anlattım, hepsini tek bir yazıda anlatmak çok zor.

Daha fazlasını öğrenmek ister misin? Belki aşağıdaki konulardaki geçmiş yazılarım yardımcı olabilir:

Makaleyi burada bitireceğim ve sanırım artık HTML'de paragraflar yapmak ve onları özel etiketler yardımıyla güzelce biçimlendirmek zor olmayacak.

Programlama konusunda size büyük başarılar diliyorum. Bu arada, ticari olmayan bilgilendirici sitelerden para kazanmayı hiç düşündünüz mü? İçinde okuyucuları için özel olarak sağlanan sadece muhteşem bilgiler.

Çevrimiçi ticaret ve finans, bu blogun ana konularıdır. Şu anda yayınlanan materyallerden ağdaki bireysel potansiyel müşteriler hakkında bilgi sahibi olabilirsiniz. Yeni ve en önemlisi gerçekten faydalı içerikler hazırlayıp yayınlamaya devam ediyorum. Workip güncellemelerine abone olun. e-posta... Bir sonrakine kadar.

- Bir web sitesi oluşturma sürecinde, metin blokları veya metin ifadeleri ile çok çalışmamız gerekiyor. Bir keresinde, bir metin ifadesi eklemem gerekiyordu, böylece bu metin ifadesinden önce bazı html kenarından metin girintisi verilen metnin eklendiği blok.

Yani, ilk yöntem en doğal ve basittir. Metnin önüne girinti yapmak için metnin önüne ekleyin HTML Kodu boşluklar - Herhangi bir html düzenleyicide html boşluk kodu ekleyebilirsiniz.

Boşluk kodunu kullanarak metin için girintiyi ayarlamak için çalışan bir kod örneği:

HTML metni sola girinti, boşluk kodunu kullan

Bu örnekte, seçtiğimiz metinden önce boşluk kodu -& nbsp; dört kez eklendi, sonuç olarak ihtiyacımız olan girintiyi alıyoruz.

Boşluk kodunun herhangi bir tarayıcı tarafından işlendiğini biliyoruz. Bu nedenle, metinden önce gerekli sayıda boşluk ekleyerek metin için gerekli girintiyi elde edebilirsiniz.

Bu yöntemin iyi yanı, herhangi bir tarayıcıda çalışmasının garanti edilmesidir.

Ama var Bu methodönemli bir dezavantaj var. Metnin girintisini yeterince uzun yapmak için, html kodunda metinden önce eklemeniz gerekir. çok sayıda güzel görünmeyebilecek, hantal ve profesyonel olmayan boşluk karakterleri.

Bu sorunu çözmek için seçeneklerden biri sonraki yol girintiyi ayarlayın.

HTML metin girintisi, ikinci yöntem - bu yöntem blok alıntı etiketinin özelliklerine dayanır. Bu etiket, içine yerleştirilen metin için sola ve sağa yaklaşık 40 piksellik bir girinti ayarlar. Ek olarak, dolgu üstte ve altta ayarlanır. HTML örneği Bu yöntemi kullanmak için kod aşağıda verilmiştir:

soldaki etiketi kullanın blok alıntı

Gördüğünüz gibi, bu metin girintisini ayarlama yönteminin kullanımı çok kolaydır, ancak bu yöntemin de önemli bir dezavantajı vardır. Etiketin ayarladığı girinti blok alıntı, sabittir ve her zaman aynı değerdedir - 40 piksel.

Durumu düzeltmek için ve eklerken html girintisi ve için Metin herhangi bir değer ayarlayabilmek için üçüncü yöntemi kullanacağız.

HTML metin girintisi, yöntem üç.

Burada CSS Basamaklı Stil Sayfalarının text-indent özelliğini kullanacağız.

CSS referansını açarsak, text-indent özelliklerinin açıklamasının olduğu sayfada, text-indent yardımıyla herhangi bir satırın veya ilk paragrafın girinti miktarını ayarlayabildiğimizi göreceğiz. metin bloğu.

Kısa metin bloklu bir örnek düşünüyoruz, bu nedenle metin girintisi özellikleri bizim durumumuz için uygundur.

Metin girintisini kullanarak metni girintileyen html kodu aşağıdadır. Örnekten, metin girintisi için farklı argüman değerleri ayarlayarak metin girinti miktarını değiştirebileceğimizi görebilirsiniz:

HTMLgirintiMetin, İşler CSS stili - metin girintisi

Benim düşünceme göre, metin için girintiyi bu şekilde ayarlama en uygun yoldur, ancak yine de, resimleri kullanarak girintiyi ayarlamanın başka bir yolunu düşünün.

HTML metin girintisi, dördüncü yöntem - burada girintiyi ayarlamak için bir resim kullanacağız.

Çalışan bir örnek olarak, bu yöntemin nasıl çalıştığını gösteren html koduna bir göz atalım:

soldaki resmi kullan

Verilen örnekten, görüntünün genişliğini değiştirerek metnin konumunu değiştirebileceğimiz, yani metin için gerekli girintiyi ayarlayabileceğimiz açıkça görülmektedir.

Görüntü olarak, genişliği ve yüksekliği bir piksele eşit olan bir görüntü kullanabilirsiniz. Kullandığımız görüntünün sayfada görünmemesi için, rengini site sayfasının arka planıyla tamamen aynı şekilde ayarlayın.

Bence, yukarıdaki metin girintilerini ayarlama yöntemleri, sitelerinizin sayfasına içerik eklerken her durumda ihtiyacınız olan girintiyi düzenlemek için oldukça yeterlidir.

Herhangi bir metnin kendine özgü bir yapısı vardır: kitaplar bölümlere, bölümlere ve bölümlere ayrılır, gazeteler ve dergiler ayrı başlıklara ve alt başlıklara sahiptir, bunlar da kendi yapılarına sahip metin parçalarını içerir: paragraflar, girintiler, vb.

Web sayfalarına yerleştirilen metin bir istisna değildir; ayrıca her kullanıcının anlayabileceği mantıksal bir yapıya sahip olmalıdır. Sonuçta, çoğu, sayfadaki metnin ne kadar kullanışlı ve basit algılanacağına bağlıdır: her şeyden önce, ziyaretçinin siteniz hakkında ne gibi bir izlenimi olacaktır.

Paragraflar gibi yapısal metin birimleri oluşturmak için HTML belgeleri şu etiketi kullanır:

metin pasajlarını dikey girinti ile ayıran (paragraftan önce ve sonra boş bir satır eklenir).

Not: Varsayılan olarak, paragraflar arasındaki boşluk 1em'dir (em, yazı tipi yüksekliğine eşit bir ölçü birimidir), yani paragraflar arasındaki boşluk doğrudan yazı tipi boyutuna bağlıdır.

Yazı tipi boyutunu değiştirmeden paragraflar arasındaki girintileri değiştirmek için şunu kullanabilirsiniz: CSS özelliği marj.

Bitiş etiketini unutma

Çoğu tarayıcı, bitiş etiketini unutsanız bile, HTML belgelerini doğru şekilde oluşturacaktır.

Paragraf

Başka bir paragraf

Bu kod çoğu tarayıcıda çalışır, ancak ona güvenmeyin. Unutulan bir bitiş etiketi, beklenmeyen sonuçlara veya hatalara yol açabilir.

kırmızı cizgi

Kırmızı çizgi nedir? Tanım olarak, bu, daha önce kırmızıyla vurgulanmış bir paragrafın açılış satırıdır (dolayısıyla başlık). Tipografi icat edilmeden önce kitaplar elle yazılırdı - bir metnin bir bölümü veya bir kısmı, ilk kelime veya harf kırmızı boyayla yazılmıştır. "Kırmızı çizgiden yazma" kavramı böyle ortaya çıktı - bu, yeni bir düşüncenin, bölümün veya bölümün başlangıcı anlamına gelir.

Bununla birlikte, web sayfaları oluştururken, geleneksel okuyucu için oldukça önemli olan metni görsel olarak görsel olarak algılamanıza izin vermesine rağmen, kırmızı çizginin tasarımı nadiren kullanılır - herkes elektronik okuma rahat değildir metnin versiyonu.

Paragraflarınıza kırmızı bir çizgi eklemek için, ilk cümleyi girintilemenizi sağlayan text-indent CSS özelliğini kullanmanız gerekir:

Denemek "

Yukarıdaki örnekte, sayfadaki her paragrafın ilk satırı 25 piksel girinti ile başlayacaktır. Aşağıdaki örnek, bir sayfada yalnızca belirli bir paragraf için nasıl kırmızı bir çizgi ayarlayabileceğinizi gösterir.

Herhangi bir gerçek sanatta olduğu gibi, iyi metinlerde, kullanımının çok önemli olmadığına inanarak bazılarının kırmızı çizgiyi içerdiği önemsiz şeyler yoktur. Bununla birlikte, herhangi bir virgülün hem estetik hem de anlamsal bir yük taşıdığını ve yalnızca dilbilgisi kurallarına bir övgü olmadığını anlamanız gerekir - bu aynı zamanda biçimlendirme için de geçerlidir.

Denemek "

Not: Dolguyu 25 piksele ayarlamak gerekli değildir, seçebilirsiniz optimal boyut girintilerin kendileri, ayrıca text-indent özelliğini kullanarak metnin geri kalanının üzerinde çıkıntı yapan bir çizgi yapmak mümkündür, bunun için özellik için negatif bir değer ayarlamanız gerekir (örneğin: -30px).

Görev

Her paragrafın ilk satırını girintileyin.

Çözüm

Kırmızı çizgi olarak da adlandırılan bir paragraf girintisi ayarlamanız gerektiğinde, text-indent style özelliğini kullanmak en iyisidir. Değeri, ilk satırın metninin ne kadar sağa kaydırılacağını belirler. başlangıç ​​pozisyonu... Bu durumda, metin bloğunun genişliği değişmez ve başlangıçta ayarlanmış olarak kalır. Girinti miktarı piksel, yüzde veya diğer kullanılabilir birimler olarak belirtilebilir (örnek 1).

Örnek 1. İlk satırı girintileme

HTML5 CSS 2.1 IE Cr Op Sa Fx

Babil pandemoniumu, İncil geleneğine göre, Kral Nemrut'un Babil'de gökyüzüne kadar bir sütun inşa etme konusundaki başarısız girişimidir. İnsanlara pervasız arzuları için kızan Tanrı, inşaatçıları cezalandırmaya karar verdi: dillerini karıştırdı, böylece anlamayı bıraktılar. herbiri, inşaatı durdurmak zorunda kaldılar ve yavaş yavaş dünyaya dağıldılar. Dolayısıyla, eskilerin açıkladığı gibi, dillerdeki farklılık ortaya çıktı.

Genel anlamda, Babil pandemonisi düzensizlik, büyük bir insan kalabalığı ile karışıklık anlamına gelir.

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1.