Skip to content

Sekmeler ve Aralık Oluşturmak için HTML ve CSS Nasıl Kullanılır?

17 de Mayıs de 2021

Tarayıcıların beyaz alanı işleme biçimi ilk başta çok sezgisel değildir, özellikle de Köprü Metni Biçimlendirme Dili’nin beyaz alanı kelime işlem programlarına göre nasıl işlediğini karşılaştırırsanız. Kelime işlem yazılımında, belgeye çok sayıda boşluk veya sekme ekleyebilirsiniz ve bu boşluk, belge içeriğinin görüntüsüne yansıtılacaktır. Bu WYSIWYG tasarımı HTML veya web sayfalarında geçerli değildir.

Baskıda Aralık

Kelime işlem yazılımında, üç ana boşluk karakteri, Uzay, sekme, ve satırbaşı. Bu karakterlerin her biri farklı bir şekilde hareket eder, ancak HTML’de tarayıcılar hepsini temelde aynı şekilde işler. İster HTML biçimlendirmenize bir boşluk veya 100 boşluk koyun, ister aralıklarınızı sekmeler ve satır başları ile karıştırın, sayfa tarayıcı tarafından oluşturulduğunda bunların tümü tek bir alana sıkıştırılacaktır. Web tasarımı terminolojisinde bu, beyaz boşluk çökmesi. Bir web sayfasına boşluk eklemek için bu tipik boşluk tuşlarını kullanamazsınız çünkü tarayıcı, tarayıcıda görüntülendiğinde tekrarlanan boşlukları tek bir alana daraltır,

HTML Sekmeleri ve Aralık Oluşturmak için CSS Kullanma

Günümüzde web siteleri, yapı ve stil ayrımı ile oluşturulmuştur. Bir sayfanın yapısı HTML tarafından, stil ise Basamaklı Stil Sayfaları tarafından belirlenir. Aralık oluşturmak veya belirli bir düzen elde etmek için HTML koduna boşluk karakterleri eklemek yerine CSS’ye dönün. Metin sütunları oluşturmak için sekmeleri kullanmaya çalışıyorsanız, bunun yerine sütun düzenini elde etmek için CSS ile konumlandırılmış

öğeleri kullanın. Bu konumlandırma, CSS kaymaları, mutlak ve göreceli konumlandırma veya Flexbox veya CSS Grid gibi daha yeni CSS mizanpaj teknikleri aracılığıyla yapılabilir. Düzenlediğiniz veriler tablo verileriyse, bu verileri istediğiniz gibi hizalamak için tabloları kullanın. Tablolar genellikle web tasarımında kötü bir şöhrete sahiptir çünkü uzun yıllar saf düzen araçları olarak kötüye kullanıldıkları için, ancak içeriğiniz gerçekten tablo şeklinde veriler içeriyorsa, tablolar yine de mükemmel şekilde 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:

  • marj
  • dolgu malzemesi
  • metin girintisi

Örneğin, aşağıdaki CSS ile bir paragrafın ilk satırını bir sekme gibi girintileyin (bunun, paragrafınızın kendisine eklenen “ilk” sınıf özniteliğine sahip olduğunu varsaydığını unutmayın): p.first {
metin girintisi: 5em;
}

Bu paragraf yaklaşık beş karakter girintiler. Bir öğenin üstüne, altına, soluna veya sağına (veya bu kenarların kombinasyonlarına) boşluk eklemek için CSS’deki kenar boşluğu veya dolgu özelliklerini kullanın. CSS’ye çevirerek ihtiyaç duyulan her türlü boşluğu elde edin.

CSS Olmadan Metni Birden Fazla Boşluğa Taşıma

İstediğiniz tek şey metninizin önceki öğeden birden fazla boşluk uzağa taşınmasıysa, bölünemez boşluğu kullanın. Bölünemez boşluğu kullanmak için şunu eklersiniz: & nbsp; HTML biçimlendirmenizde ihtiyacınız olduğu kadar. HTML, bu bölünmeyen boşluklara saygı duyar ve bunları tek bir alana daraltmaz. Bununla birlikte, bu yaklaşım, yalnızca düzen ihtiyaçlarını karşılamak için bir belgeye fazladan HTML işaretlemesi eklediğinden kötü bir uygulama olarak kabul edilir. Uygulanabilir olduğunda, yalnızca istenen mizanpaj efektini elde etmek için bölünmeyen boşluklar eklemekten kaçının ve bunun yerine CSS kenar boşlukları ve dolgusu kullanın.

Biçim mla apa chicago Alıntıınız

Kyrnin, Jennifer. “Sekmeler ve Boşluk Oluşturmak için HTML ve CSS Nasıl Kullanılır.” ThoughtCo, Mayıs. 14, 2021, thinkco.com/html-css-tabs-spacing-3468784.
Kyrnin, Jennifer. (2021, 14 Mayıs). Sekmeler ve Aralık Oluşturmak için HTML ve CSS Nasıl Kullanılır. Https://www.thoughtco.com/html-css-tabs-spacing-3468784 adresinden erişildi
Kyrnin, Jennifer. “Sekmeler ve Boşluk Oluşturmak için HTML ve CSS Nasıl Kullanılır.” ThoughtCo. https://www.thoughtco.com/html-css-tabs-spacing-3468784 (17 Mayıs 2021’de erişildi).