HTML’de veya bir web sayfasında fazladan alan nasıl oluşturulur

0
7

HTML’de veya bir web sayfasında fazladan alan nasıl oluşturulur

Bir web sayfasında HTML’nizde fazladan boşluk oluşturmak, oluşturmak istediğiniz alanın türüne bağlı olarak birçok şekilde gerçekleştirilebilir. Aşağıdaki bölümler, hem HTML hem de CSS kullanarak fazladan alan oluşturmanın birçok farklı yolunu içerir.

Metinden önce veya sonra fazladan boşluk oluşturma

Kırılmaz alan

Bir web sayfası oluşturan yeni kullanıcılar için en kafa karıştırıcı şeylerden biri, boşluk çubuğu ek boşluklar yapmak için birden çok kez. Metninizden önce, sonra veya arasında fazladan boşluk oluşturmak için   (bölünemez boşluk) genişletilmiş HTML karakteri.

Örneğin, çift boşluk kullanan “fazladan boşluk” ifadesiyle, HTML’mizde aşağıdaki kod var.

extra    space
Not

Yukarıdaki kodu girmek için bir WYSIWYG düzenleyici kullanıyorsanız, HTML sekmesinde olmanız veya HTML kodunu düzenlemeniz gerekir.

Genişletilmiş özel HTML karakterlerinin listesi için bkz.: Genişletilmiş özel HTML karakterlerinin tam listesi.

Sayfaya yapıştırılan metinde boşluk bırakma

Fazladan boşluklu veya sekmeli metin yapıştırıyorsanız, metni biçimlendirilmiş tutmak için HTML

 etiketini kullanabilirsiniz.  Aşağıda, 
 etiketini kullanarak fazladan boşluklarla metnin nasıl yapıştırılacağına ilişkin bir örnek verilmiştir.

This    text   has    lots of     spaces

Yukarıdaki örnek, aşağıdaki HTML kodu kullanılarak yapılmıştır.

<pre class="tab">This    text      has    lots of     spaces</pre>
  • Bu etiket hakkında daha fazla bilgi için HTML
     etiket sayfamıza bakın.
Not

Yukarıdaki kodu girmek için bir WYSIWYG düzenleyici kullanıyorsanız, HTML sekmesinde olmanız veya HTML kodunu düzenlemeniz gerekir.

Bir öğenin veya nesnenin etrafında fazladan boşluk oluşturma

Herhangi bir HTML öğesinin üstüne, sağına, altına veya soluna ek boşluk eklenebilir. Ancak, öğenin veya nesnenin etrafına eklemek istediğiniz boşluk türüne karar vermeden önce kenar boşluğu ve dolgu arasındaki farkı anladığınızdan emin olun. Aşağıdaki resimde görüldüğü gibi, dolgu elemanı kenarlık içinde, kenar boşluğu ise kenarlığın dışında çevreler.

Dolgu malzemesi

Aşağıdaki örnek, bir kenarlıkla çevrili, bir kenar boşluğuyla girintili ve sağda ve altta boşluk bulunan paragrafımızı göstermektedir.

Kenar boşluğu ve dolgu içeren bir paragraf örneği.

Yukarıdaki örnek aşağıdaki kod kullanılarak oluşturulmuştur.

<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Example of a paragraph with margin and padding.</p>

Kodun ilk bölümünde, "sol kenar boşluğu: 2.5em;" 2,5 cm'lik bir sol kenar boşluğu ekler, bu da girintili metin görünümü verir. Örnekte gösterildiği gibi, bu boşluk sınırın dışındadır. Bir sonraki bölümde, "dolgu: 0 7em 2em 0;" üst, sağ, alt ve sol (saat yönünde) dolguyu tanımlar. "0" üst dolgu, "7em" sağ dolgu, "2em" alt dolgu ve 0 sol dolgu vardır. Bu örneğin geri kalanı, sınırın nasıl görünmesi gerektiğini tanımlamaktır.

CSS ve HTML kullanarak sekme oluşturma

Bir öğenin sol kenar boşluğunu ayarlayarak HTML'de bir sekme oluşturulabilir. Örneğin, bu paragraf, metni içeren öğeden 2,5 cm'lik bir sol kenar boşluğuna sahiptir. Bu sol kenar boşluğunu oluşturmak için CSS aşağıda gösterilmiştir.

.tab {
 margin-left: 2.5em
}

Bu kodu CSS dosyamıza yerleştirdikten sonra, sekme görünümünü oluşturmak için herhangi bir metne "tab" sınıfını uygulayabiliriz. Sol marjın değeri ihtiyaçlarınıza göre arttırılabilir veya azaltılabilir.

Yukarıdaki yöntemi önermemize rağmen, aşağıdaki örnekte gösterildiği gibi, sol kenar boşluğu CSS'si satır içi olarak da eklenebilir.

<p style="margin-left:2.5em">An example of a 5em left margin.</p>

5em sol kenar boşluğu örneği.

  • Web sayfamdaki veya HTML'deki metni nasıl girintilendiririm veya sekmelerim?

Metnin bir satırının veya paragrafının altına boşluk ekleyin

Bir metin satırının veya paragrafının altına fazladan boşluk eklemeniz gerekiyorsa ve bunu yalnızca bir kez yapmanız gerekiyorsa,
etiketini kullanabilirsiniz. Aşağıda bu tekniğin nasıl uygulanabileceğine dair bir örnek verilmiştir.

<p>This sentence contains  example text.<br>
<br>
As you can see, two breaks add the space above.</p>

Yukarıdaki kod, aşağıda gösterilen metni oluşturur.

Bu cümle örnek metin içermektedir.

Gördüğünüz gibi, iki ara yukarıdaki boşluğu ekler.

Gerekirse ek molalar eklenebilir. Ancak, bir sayfada birden çok yerde yapılıyorsa, metninizin etrafına dolgu ve boşluk eklemek için daha önce bahsedilen CSS yöntemini kullanmanızı öneririz.

Metin satırları arasına satır aralığı ekleyin

Metin satırları arasındaki boşluk, metnin okunmasını kolaylaştırmak için CSS kullanılarak satır yüksekliğini artırıp azaltarak ayarlanabilir. Aşağıda, bir metin paragrafına eklenen fazladan satır aralığının bir örneği verilmiştir.

<p style="line-height:3.5em;">Text shown below with extra spacing</p>

Yukarıdaki kod, aşağıda gösterilen metni oluşturur.

Bu örnek metin, metne satırlar arasına nasıl fazladan boşluk eklenebileceğinin bir örneğidir. Ancak, okumayı zorlaştırdığı için bu kadar fazla satır aralığı kullanmanızı önermeyiz. Bu kadar satır aralığını sadece örnek olarak kullanıyoruz.

Yukarıdaki örneğimizde, satırlar arasındaki boşluğu vurgulamak için satır yüksekliği olarak 3.5 em kullandık. Ancak, okunabilirlik için yaklaşık 1,7em kullanmanızı öneririz. Satırların arasına biraz boşluk eklemek, metninizin okunabilirliğini her zaman artırır. Ancak çok fazla eklemek, takip etmeyi ve taramayı zorlaştırabilir.

LEAVE A REPLY

Please enter your comment!
Please enter your name here