İnternette bulduğumuz ve kullandığımız hemen hemen her web sitesinin yapısı, metin dosyalarını kategorilere ayırmaya yönelik standart bir sistem olan HTML kullanılarak oluşturulmuştur. Sayfa sonları, paragraflar, güçlü harfler, italik yazılar ve diğer özelliklerin tümü HTML kullanılarak eklenir. HTML, tarayıcılara içeriğin nasıl işleneceği talimatını veren etiketleri kullanarak bu yapının oluşturulmasına yardımcı olur.

Örneğin, kalın görünmesini sağlamak için güçlü>kalın/güçlü> etiketleri arasına bir kelime yerleştiririz. Açılış etiketi (/) kalın yazının nerede bitmesini istediğimizi belirtirken, ilk etiket (/) kalın yazının nerede başlamasını istediğimizi belirtir. Web sayfalarının çoğunun temelini oluşturur. Kodlamayı öğreniyorsanız başlayacağınız yer burasıdır.

HTML'de Boşluk Nasıl Eklenir?

Kelimeler arasında tek bir boşluk dışında, HTML metninde tarayıcıda görüntülemek için girdiğimiz tüm boşluklar dikkate alınmaz. Sonuç olarak belgemizde istediğimiz boş alanları programlamalıyız. HTML'de herhangi bir metin satırına boşluk eklenebilir. Örneğin, HTML nesnesini kullanarak tablo ve paragraf içeriğine boşluklar ekleyebiliriz. HTML'de boş alan için klavye harfi bulunmadığından, her alanı eklemek için varlığı girmeliyiz.

Basit görünebilir ancak HTML'mize alan eklemek zor olabilir. Bununla ilgilenmenin en az beş farklı yaklaşımı var.

Bu eğitim boyunca birçok örnek göreceğiz. Aynı zamanda daha ayrıntılı alan biçimlerinin nasıl kullanılacağını da gösterecek.

in.next java

Bunların hepsi CSS kullanılmadan düz HTML'de mümkündür. Ancak HTML'nize alan eklemenin en iyi şekilde CSS aracılığıyla yapıldığını unutmayın.

ASCII Uzayı Neye benziyor?

Uzay, ASCII sembolü 20 ile temsil edilir. Ancak bu yalnızca kabul edilen uygulamadır.

HTML'de kullanabileceğiniz beş farklı alan türü vardır. Biraz farklı işlevlere sahip olmalarına rağmen, eğitimsiz bir gözle aynı görünürler.

Klavyede sekme tuşuna basmayı simüle eden sekme karakteri başka bir seçenektir. Klavyede enter tuşuna basmayı simüle eden satırbaşı karakteri de başka bir örnektir.

Kırılmaz alan:

Boşlukta:  

Em alanı:  

İnce alan:

Standart alan:

Yeni Hat (Dönüş):

Sekme Karakteri:

Sol taraf temsil ediyor karakter ve sağ taraf şunu temsil eder: HTML Kodu.

Bir Karakter Uzayda Ne Kadar Geniştir?

Boşluk karakterleri için dört standart genişlik vardır:

Standart genişlikte alan:Satır sonuyla sonuçlanmayacağı için (satır başı olarak da bilinir), bu aynı zamanda 'satır sonu olmayan alan' olarak da bilinir.Em Alanı:Buna 'Em' adı verilmiştir çünkü kullandığınız yazı tipi ne olursa olsun, M harfiyle aynı genişliktedir. (Eğer 'uzun çizgi' ifadesini duyduysak neyden bahsettiğimizi anlamış oluruz.)Boşlukta:Bu 'En' olarak bilinir çünkü yazı tipinizdeki n harfiyle aynı genişliğe sahiptir.İnce Alan:Tüm mekanların en darı son seçenek olan 'ince alan'dır.

HTML'deki Boşluk İşareti Ne Anlama Gelir?

en yaygın kullanılan HTML varlığıdır.

dizici java

Bu metnin bir alanı doldurmasını sağlamak için onu atmayı deneyin.

Örneğin, bir ifadeden sonra iki boşluk eklemek istediğimizi, ancak web sitesi oluşturma motorunun boşluklardan birini tek başına ortadan kaldırdığını varsayalım. İki boşluk eklemek için şunu girebiliriz:

Boşluk: Bu nedir?

Görünmeyen karakterlere boşluk adı verilir. Bunlar şunlardan oluşur:

1. boşluklar,
2. sekmeler ve
3. satır sonları (satır başı, satır besleme veya her ikisi),

Bu Neden Önemli?

Örneğin bu harfler bir kelime işlemcide görünmez ancak metnin alanını ve formatını etkiler. Tarayıcı, diğer işaretleme dillerinden farklı olarak, HTML'de çok sayıda boşluk karakterini tek bir alana yoğunlaştırır.

Bu HTML'de kelimeler arasında birkaç boşluk vardır ve her satır CRLF (satır başı, satır besleme) karakterleriyle biter. Tüm boşluk karakterleri tarayıcı tarafından daraltılacaktır.

Örnek

İyi şeyler daha fazla zaman alır.

Çıktı:

Boşluk Ekleme

1. Daha fazla boşluk sağlamak için metnin bölünemez boşluk işaretini ( ) kullanın.
2. CSS padding özelliği, farklı durumlarda bir öğenin içindeki alanı artırmak için kullanılabilir.
3. CSS kenar boşluğu özelliği, bir öğenin etrafına ekstra alan eklenmesine olanak tanır.

Bölünmeyen boşluklar yararlı olsa da aşırı derecede kullanılmamalıdır çünkü bu, materyalin tarayıcılarda görüntülenme biçimini etkileyebilir. Ayrıca, bir web sayfasındaki bir öğeyi girintilemek veya ortalamak gibi stil amaçları için bölünemez boşluklar kullanmaktan kaçının; stilistik talepler bunun yerine CSS aracılığıyla ele alınmalıdır.

Varlığa ek olarak HTML, çok sayıda bitişik boş alan için aşağıdaki ek varlıkları da destekler:

  karakter varlığı bir alanı temsil etmek için kullanılır. En, 8 piksele veya bir em'in (16 piksel) genişliğinin yarısına eşdeğer olan bir ölçü birimidir.

İçerik arasında bir boşluk için sözdizimi şöyledir:   HTML &ensp varlığının nasıl kullanılacağına ilişkin bir örnek:

İşte uzay varlığı için bir örnek.

Çıktı:

  varlığı yukarıdaki örnekte HTML'ye boşluk eklemek için kullanılmıştır ve genişliği 8 pikseldir. Ayrıca birkaç komşu lokasyonda da kullanılabilirler.

Biçimlendirmeyi ve Aralığı Koruma

Belirlenen biçimlendirme ve aralıkları korumak istiyorsanız iki seçeneğiniz vardır:

1. HTML biçimlendirmesi ve alanı ekleme
2. Bir kullanarak

    tag.

'Ön' etiketi kullanma

Bu sonuçlar,

için etiket

 tag:

Örnek

 pre> Good things take more time 

Çıktı:

Evet

 tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn&apos;t always the best option. HTML spacing is a more popular method.</pre>

c programlamada dize dizisi

HTML Biçimlendirmesi ve Boşluk Ekleme

Alternatif olarak aşağıdaki gibi HTML öğelerini ve sembollerini dahil edebiliriz:

İyi şeyler olacak

daha fazla zaman ayırın.

Çıktı:

Satır sonu gerekli
eleman.

Kırılmaz alan:

Tarayıcı, bölünemez boşluk karakteri () ile eklenen boşlukları daraltmaz.

Ayrıca adından da anlaşılacağı gibi tarayıcının orada iki kelimeyi parçalamasını engeller.

İyi şeyler daha fazla zaman alır.

Çıktı:

Bu modelde metnin başına doğru 10 boşluk eklenir. Arasına bir tane daha konur almak ' alan sınırlamaları nedeniyle cümle sarıldığında izole edilmeyecektir.

Dolgu Özelliği

Bir öğenin iç alanı CSS dolgu özelliğiyle artırılır.

Üstten, sağdan, alttan ve sağ taraftan başlayarak birden dörde kadar değerler alır.

'böl' öğenin her tarafında 20 piksellik bir dolgu vardır.

 Inner spacing is 20px with a div attribute 

Çıktı:

1nf 2nf 3nf

Marj Özelliği

1. CSS kenar boşluğu özelliği ile öğenin çevresine ekstra boşluk eklenir.
2. Üstten, sağdan, alttan ve sağ taraftan başlayarak birden dörde kadar değerler alır.

'böl' öğenin her tarafında 40 piksellik bir kenar boşluğu vardır.

 Outer spacing is 20px using the div and margin attribute 

Çıktı:

Dolgu ve Kenar Boşluğu

1. Dolgu ve kenar boşluğunun her ikisi de bir öğenin alanını artırır.
2. Dolgu, elemanın bir bileşeni olarak kabul edilen bir boşluk bırakır.
3. Kenar boşluğuyla oluşturulan alanın, öğenin sınırları dışında var olduğu kabul edilir.
4. Tıklama bölgesi, arka plan renkleri ve web sitesinin diğer özellikleri bu değişiklikten etkilenir.

HTML'de boşluk eklemenin sürekli olarak boşluk çubuğuna basmak kadar basit olduğuna inanılabilir. Ama işler böyle yürümüyor. Boşluk çubuğuna bir kereden fazla basmak, bir metin belgesinde olduğu gibi yakınlara daha fazla boş alan eklemeyecektir. Bunu HTML'de yaparsak, tarayıcı yakındaki tüm boş alanları tek bir yerde birleştirecektir. HTML'de birden fazla boşluk kullandığımızda ne olacağını göstermek için bir örneğe bakalım:

Yani boşluk çubuğunu birçok kez kullandıktan sonra daha fazla boşluk ekleyemiyoruz

Çıktı:

Yukarıdaki örnekte görüldüğü gibi HTML'de boşluk çubuğuna tekrar tekrar basarak bir web sayfasına ardı ardına çok sayıda boşluk eklemeye çalışıyoruz. Bununla birlikte, tarayıcılar birden fazla bitişik boş alanı tek bir boşluk olarak işler ve bileşenlerin öncesindeki, sonrasındaki ve dışındaki boşlukları dikkate almaz. Bu olaya boşluk çökmesi adı veriliyor. Her ne kadar boşlukların daraltılması bazen can sıkıcı olsa da, hem HTML'de hem de CSS'de (basamaklı stil sayfaları) daha fazla boşluk eklemek için çeşitli teknikler vardır.

&

  karakter varlığı em alanını temsil etmek için kullanılır. Bir em'in 16 piksellik genişliği bir emsp'ye eşdeğerdir.

Metindeki em boşluklarının sözdizimi şöyledir:   Aşağıda HTML &emsp varlığının nasıl kullanılacağına ilişkin bir örnek verilmiştir:

İşte onlar için uzay varlığına bir örnek.

Çıktı

  varlığı yukarıdaki örnekte HTML'ye boşluk eklemek için kullanılmıştır ve genişliği 16 pikseldir. Ayrıca birkaç bitişik alanda da kullanılabilirler.

&incesp

Karakter varlığı, genellikle dar alan olarak bilinen İnce alanı temsil etmek için kullanılır. Bir em'in altıda biri &'nin genişliğidir

İnce alan, söz diziminde içerik arasında yer alan olarak yazılır. Burada HTML varlığının nasıl kullanılacağına ilişkin bir örnek verilmiştir ''

Bu, ince uzay varlığının bir örneğidir.

Çıktı

Varlık, yukarıdaki örnekte HTML'ye ince boşluklar eklemek için kullanılmıştır ve genişliği bir em'in altıda biri kadardır. Ayrıca birkaç bitişik alanda da kullanılırlar.

Aşağıda bir ASCII 'Merhaba' sanatı bulunmaktadır. # # ##### # # # ##### # # # # # # # # # #####

Çıktı:

Boşluk Kullanmanın Avantajları

Genişletilmiş İçerik Anlaşılırlığı:Müşteriler sitemizdeyken, okumaya devam etme motivasyonunun sağlanması için nereye gittiklerini görme seçeneğine sahip olmaları gerekir. Dürüst olmak gerekirse, pasajlar arasındaki ve metin ve resim bloklarının etrafındaki boşluklar, bireylerin ne okuduklarını anlamalarına yardımcı olur ve genel olarak üstün bir müşteri deneyimine katkıda bulunur.Daha Fazla İşbirliği:Gerçekçi olabilir miyiz, Konuklar yerel ayarları incelerken güvenilir bir şekilde acele ederler ve çok fazla boşluk olması, konukları yavaşlatan kesintileri önleyerek bağlantıyı artıracaktır. Gerçekten de eşyaların etrafındaki hafif bir yastıklama bile sitemizde belirli bir bölgeyi fark etmemize neden olacaktır. Human Elements Worldwide liderliğindeki araştırmaya göre, beyaz alan farkındalığı neredeyse %20 artırıyor.Harekete Geçirici Mesajları (CTA'lar) Özelleştirme Kapasitesi:Bazen bir şeyi diğerlerinden farklı kılmanın en açık yöntemi, onu daha büyük kılmaktır. Resimleri büyütebilir veya düğmeleri büyütebiliriz. Bununla birlikte, nesneyi boşlukla çevrelemek de benzer şekilde geçerli olabilir.Temiz Bir Site Dikkate Değer Bir Siteye Eşdeğerdir:Sitemizin başlangıçtaki hissi çok önemlidir. Bir ton olağanüstü güçlü tasarım, çok çeşitli planlar; bu kadar çok sayıda bileşen, bir sitenin yarattığı izlenimi artırır; ancak boşluk özellikle önemlidir çünkü ustalık ve beceriklilik gösterir. Boşluk, sitenizi görünür veya orta hale getirmez. Ne kadar uzun boşluklar doğru şekilde kullanılırsa kullanılsın sitenize şıklık ve yaygınlık hissi katacaktır.Dengenin Sağlanması:Çok az boşluk, kargaşaya, düzensizliğe ve sarsıntıya yol açar; bunlar, sitenizin görseliyle ilgili olarak ihtiyaç duymadığınız özelliklerdir. Öte yandan, pek çok boşlukta içerik eksikliği ve müşteri yönlendirme eksikliği bulunabilir. Önemli olan, planlarınızı ayarlamak ve boşlukların, basit açıklık ve daha gelişmiş bir müşteri deneyimi için içerik yığınlarını izole etmek için inanılmaz bir araç olarak kullanılmasına izin vermektir.Bir ayırıcı olarak gider:Boşluk, plandaki alakasız bileşenleri izole eder. Resimleri veya tasarımları birbirinden ayırmak için kullanılır ve genel görsel formatınız üzerinde çalışır. Meşru boşlukların kullanılması, düşüncelerin ve ilgi çekici planların daha net bir şekilde örtüşmesini sağlar.

Boşluk Neden Önemlidir?

Bir tasarımcı olarak bana göre boşluk, iyi tasarımın temel yapı taşıdır. Tasarımcılar 'boşluk' terimini kullandıklarında negatif boşluktan veya bir kompozisyondaki parçalar arasındaki boşluktan bahsediyorlar. Herhangi bir şeyle işaretlenmemiş bir sayfadaki grafikler, kenar boşlukları ve oluklar arasındaki boş alandır. Sütunlar, metin satırları ve şekiller arasındaki boşluklar göze görsel bir nefes alma alanı kazandırır.

Beyaz alanın tasarımın çok önemli bir bileşeni olmasının zorlayıcı bir nedeni var. Web sitemizin tasarımında devrim yaratabilir ve doğru şekilde uygulandığında ona çeşitli faydalar sağlayabilir. Göze hoş gelen ve okuyucuları devam etmeye teşvik eden düzenler üretmeli ve yaratmalıyız. Web için tasarım yaparken önceliğimizin müşterilerimize harika bir ürün sunmanın olduğunu sürekli akılda tutmak çok önemlidir.

ciltli vs kağıt kapaklı

Boşluk, okuyucuyu bir öğeden diğerine yönlendirmek, uyum ve denge oluşturmak ve tasarımın markalaşmasına yardımcı olmak için kullanılabilir. Temel hedeflerimiz, web sitesinin basit ve anlaşılır görünmesini sağlamak ve kullanıcılarımızın beğeneceği ve değer vereceği içerik sağlamaktır. Boşluk yalnızca 'boş' bir alan değildir; sayfadaki öğelerin var olmasını mümkün kılan bir tasarım özelliğidir. Alan bir denge kuruyor ve güzel tasarımların var olduğunu sürekli hatırlatıyor. Net bir mesaj iletmek için metin ve grafiklerle aşırı yüklü bir düzen oluşturmamıza gerek yok.