Tablar və aralık yaratmaq üçün HTML və CSS-dən istifadə etmək

HTML-də ağ məkanın brauzerlər tərəfindən necə təmizləndiyinə bir nəzər

Bir başlanğıc web dizayneriyseniz, erkən anlamaq üçün bir çox şeydən biri saytın kodundakı ağ boşluqların veb brauzerləri tərəfindən idarə olunma üsuludur.

Təəssüf ki, brauzerlərin ağ məkanı idarə etdiyinin ilk növbədə ilk növbədə çox asan deyil, xüsusilə də HTML halına gəlincə və ağ məkanın necə işlədildiyini müqayisə etsəniz, daha çox tanış ola bilərsiniz.

Sözü emal proqramında, sənəddə bir çox boşluq və ya nişanı əlavə edə bilərsiniz və aralıq sənədin məzmununun ekranında əks olunacaq. Bu, HTML və ya veb səhifələrə aid deyildir. Beləliklə, ağ məkanın həqiqətən, veb-brauzerlər tərəfindən idarə olunmasının öyrənilməsi çox vacibdir.

Printdə aralıqlıq

Söz emal proqramında, üç əsas ağ kosmik simvol boşluq, nişan və daşıyıcının qaytarılmasıdır. Bu hərəkətlərin hər biri ayrı bir şəkildə, ancaq HTML-də, brauzerlər onları hamısını eyni şəkildə göstərir. HTML düzəlişinizdə bir boşluq və ya 100 boşluq yerləşdirməyiniz və ya boşluqlarınızı nişanlar və daşıyıcıların qaytarılması ilə qarışdırın, hamısı brauzer tərəfindən göstərildikdə bütün bunlar bir yerə qədər yoğunlaşacaqdır. Veb dizayn terminologiyasında, bu ağ boşluq çökməsi kimi tanınır. Brauzer brauzerinizdə göstərildikdə birdən çox boşluğun aşağı düşdüyündən, bir web page boşluq əlavə etmək üçün bu tipik boşluq düymələrini istifadə edə bilməzsiniz,

Niyə Biri Sekmeleri İstifadə edir?

Tipik olaraq, insanlar bir mətn sənədində sekmeleri istifadə edərkən, düzəltmə səbəbləri üçün istifadə edirlər və ya mətni müəyyən bir yerə daşımaq və ya başqa bir elementdən müəyyən bir məsafə olmaq üçün istifadə edirlər. Veb dizaynında, bu vizual üslublara və ya layout ehtiyaclarına nail olmaq üçün yuxarıda göstərilən kosmik simvollardan istifadə edə bilməzsiniz.

Veb dizaynında kodda əlavə aralıq simvolların istifadəsi həmin kodu oxumaq asanlığı üçün ola bilər. Web dizaynerləri və inkişaf etdiriciləri, elementləri digər elementlərin övladları olduğunu görə biləcəklər, ancaq indentlər səhifənin vizual düzülüşünə təsir göstərməyəcəklər. Lazım olan əyani düzəliş dəyişiklikləri üçün, CSS-yə (basamaklı stillərə) dönmək lazımdır.

HTML Tabları və Spacing yaratmaq üçün CSS istifadə

Veb saytlar bu gün struktur və stilin ayrılması ilə qurulur. Stil CSS tərəfindən diktə edildiyi zaman bir səhifə strukturu HTML tərəfindən işlənir. Bu, boşluq yaratmaq və ya müəyyən bir düzəliş əldə etmək deməkdir ki, CSS-ə çevrilməlidir və sadəcə HTML koduna aralıq simvol əlavə etməyə çalışmırsınız.

Mətn sütunları yaratmaq üçün sekmeleri istifadə etməyə çalışırsanız, bunun yerine sütun düzəltmək üçün CSS ilə yerləşdirilən elementləri istifadə edə bilərsiniz. Bu mövqe CSS-lərin, mütləq və nisbi yerləşdirmənin və ya Flexbox və ya CSS Grid kimi daha yeni CSS yerləşdirmə üsulları vasitəsilə həyata keçirilə bilər.

Siz çıxardığınız məlumatlar cədvəlli məlumatdırsa, siz istədiyiniz məlumatları uyğunlaşdırmaq üçün masalardan istifadə edə bilərsiniz. Masalar tez-tez veb dizaynında pis bir rap alırlar, çünki onlar uzun illərdir saf düzəltmə vasitələri kimi sui-istifadə olunurdu, lakin məzmununuzda yuxarıda göstərilən cədvəlli məlumatlar varsa, masalar hələ də etibarlıdır.

Margins, Padding və Text-Indent

CSS ilə aralık yaratmaq üçün ən ümumi üsullardan biri aşağıdakı CSS üslublarından birini istifadə etməkdir:

Məsələn, bir paraqrafın birinci xəttini aşağıdakı CSS ilə bir sekmə kimi indentasiya edə bilərsiniz (bu sizin paraqrafınızın "birinci" bir sinif öznitəsinə malik olduğunu qeyd edin):

p.first {
mətn indent: 5em;
}

Bu paraqraf indi təxminən 5 simvol indented olardı.

Üstün, alt, sola və ya sağa (və ya bu tərəflərin birləşmələrinə) aralıq boşluq əlavə etmək üçün CSS-də margin və ya padding xüsusiyyətlərini də istifadə edə bilərsiniz. Nəticədə, CSS-ə keçərək lazım olan hər hansı bir boşluqa nail ola bilərsiniz.

CSS olmadan birdən çox məkanı hərəkət etdirmək

İstədiyiniz hər şey mətniniz üçün əvvəlki maddənin birdən çox hissəsi uzaqlaşdırılsa, qeyri-pozulmayan yerdən istifadə edə bilərsiniz.

Qeyri-pozan yerdən istifadə etmək üçün sadəcə & nbsp; HTML formatında lazım olduğunuz kimi bir çox dəfə.

Məsələn, sözünüzü beş boşluğun üzərində hərəkət etmək istəyirsinizsə, sözündən əvvəl aşağıdakıları əlavə edə bilərsiniz.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTML bunlara hörmət edir və onları tək bir məkana endirəcək. Ancaq bu, layout ehtiyaclarına nail olmaq üçün bir sənədə əlavə HTML formatlaşdırma əlavə olduğundan çox pis bir tətbiqdir . Struktura və üsluba bölünməyinizə toxunaraq, istənilən layout effektinə nail olmaq üçün sadəcə qırılmayan boşluqlardan qaçınmalısınız və bunun əvəzinə CSS kənarlarını və padding istifadə etməlisiniz.