HTML'deki beyaz alanın tarayıcılar tarafından nasıl ele alındığına bir bakış
Bir başlangıç web tasarımcısıysanız, erken anlamanız gereken pek çok şeyden biri, bir sitenin kodundaki beyaz alanın web tarayıcıları tarafından ele alınmasıdır.
Ne yazık ki, tarayıcıların beyaz alanı ele alma biçimleri ilk başta çok kullanışlı değil, özellikle de HTML’ye geliyorsanız ve bunu daha fazla tanıdığınız kelime işleme programlarında beyaz alanın nasıl ele aldığına göre karşılaştırıyorsanız.
Kelime işlem yazılımında, belgeye çok sayıda boşluk veya sekme ekleyebilirsiniz ve bu aralık, belgenin içeriğinin ekranına yansıtılacaktır. HTML veya web sayfaları ile durum böyle değil. Aslında, web tarayıcıları tarafından nasıl beyaz alanın işlendiğini öğrenmek çok önemlidir.
Baskıda Boşluk
Kelime işlem yazılımında, üç temel boşluk karakteri, boşluk, sekme ve satır başı dönüşüdür. Bunların her biri ayrı bir şekilde hareket eder, ancak HTML'de, tarayıcılar bunların tümünü esas olarak aynı hale getirir. HTML işaretlemenize bir boşluk veya 100 boşluk koymalı ya da sekmeler ve satırbaşı iadeleriyle aralıklarınızı karıştırın, bunlar tarayıcı tarafından sayfa oluşturulduğunda yoğunlaştırılır. Web tasarım terminolojisinde, bu, beyaz boşluk çökmesi olarak bilinir. Bir web sayfasındaki boşlukları eklemek için bu tipik boşluk tuşlarını kullanamazsınız, çünkü tarayıcı tarayıcıda işlendiğinde birden fazla alanı aşağıya indirir.
Neden Birisi Sekmeleri Kullanıyor?
Genellikle, insanlar bir metin belgesinde sekmeler kullandıklarında, bunları mizanpaj nedenleriyle veya metnin belirli bir yere taşınmasını veya başka bir öğeden belirli bir mesafeye ulaşmasını sağlar. Web tasarımında, bu görsel stillere veya mizanpaj gereksinimlerine ulaşmak için söz konusu alan karakterlerini kullanamazsınız.
Web tasarımında, kodda fazladan boşluk karakterlerinin kullanılması, yalnızca bu kodu okuma kolaylığı için olabilir. Web tasarımcıları ve geliştiricileri, genellikle kodun girintilemek için sekmeleri kullanırlar, böylece hangi öğelerin diğer elemanların çocukları olduğunu görebilirler - ancak bu girintiler sayfanın görsel düzenini etkilemez. Gerekli görsel düzen değişiklikleri için CSS'ye (basamaklı stil sayfaları) dönmeniz gerekir.
HTML Sekmeleri ve Aralık Oluşturmak için CSS Kullanımı
Günümüzde web siteleri, yapı ve stil ayrımı ile inşa edilmiştir. Stil, CSS tarafından dikte edilirken, bir sayfanın yapısı HTML tarafından işlenir. Bu, boşluk oluşturmak veya belirli bir düzeni elde etmek için, CSS'ye dönmeniz ve HTML koduna yalnızca boşluk karakterleri eklememeniz gerektiği anlamına gelir.
Metin sütunları oluşturmak için sekmeleri kullanmaya çalışıyorsanız, bu sütun düzenini elde etmek için CSS ile konumlandırılmış
Düzenlediğiniz veriler tablo verileri ise, bu verileri istediğiniz şekilde hizalamak için tabloları kullanabilirsiniz. Tablolar genellikle web tasarımında kötü bir rap yakalarlar, çünkü yıllar boyunca salt düzen araçları olarak istismar edildi, ancak içeriğiniz daha önce belirtilen tablo verilerini içeriyorsa, tablolar yine de geçerlidir.
Kenar boşlukları, Dolgu ve Metin Girintisi
CSS ile boşluk oluşturmanın en yaygın yolları, aşağıdaki CSS stillerinden birini kullanmaktır:
- kenar
- dolgu malzemesi
- text-indent
Örneğin, paragrafın ilk satırını aşağıdaki CSS'ye sahip bir sekme gibi girebilirsiniz (bunun paragrafınızın kendisine eklenmiş "ilk" bir sınıf özelliğine sahip olduğunu varsayalım):
p.first {
metin girintisi: 5em;
}
Bu paragraf şimdi yaklaşık 5 karakter girintili olacaktı.
Ayrıca, bir öğenin üstüne, altına, soluna veya sağına (veya bu kenarların birleşimlerine) boşluk eklemek için CSS'deki kenar boşluğu veya dolgu özelliklerini de kullanabilirsiniz. Nihayetinde, CSS'ye dönerek gereken her türlü aralığa ulaşabilirsiniz.
CSS Olmadan Metni Birden Fazla Alana Taşıma
İstediğiniz şey, metninizin bir önceki öğeden daha fazla bir yere taşınması için, kırılmayan alanı kullanabilirsiniz.
Kırılmaz alanı kullanmak için & nbsp; HTML biçimlendirmenizde ihtiyacınız olduğu kadar çok kez.
Örneğin, kelimenizi beş boşluk üzerinde hareket ettirmek isterseniz, sözcükten önce aşağıdakileri ekleyebilirsiniz.
Ve nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML bunlara saygı gösterir ve bunları tek bir alana daraltmayacaktır. Bununla birlikte, bu durum çok zayıf bir uygulama olarak kabul edilir, çünkü bir belgeye yalnızca mizanpaj ihtiyaçlarını elde etmek için ek HTML işaretlemesi ekliyor. Yapının ve stilin bu ayrılığına geri dönersek, yalnızca istenen bir düzen efekti elde etmek için kopmayan alanları eklemekten kaçınmalısınız ve bunun yerine CSS kenar boşluklarını ve dolgularını kullanmalısınız.