Nola erabili HTML eta CSS fitxak eta tartea sortzeko

Arakatzaileek HTML zuriuneak nola tratatzen duten begirada bat

Hastapeneko web diseinatzailea bazara, hasiera batean ulertu behar duzun gauza askoren artean web nabigatzaile batek kudeatzen duen gunearen kode zuria da.

Zoritxarrez, espazio zuria kudeatzen duten arakatzaileek ez dute oso intuitiboa lehenbailehen, batez ere HTMLra sartu eta konparatu espazio zuria testu prozesatzeko programetan nola kudeatzen den, zein ezagunagoa izan daitekeen.

Hitz-prozesatzeko softwaretan, dokumentuan tarte edo fitxak asko gehi ditzakezu eta tarte hori dokumentuko edukien pantailan islatuko da. Hau ez da HTML edo web orriekin gertatzen den kasua. Horrela, nabigatzaileek kudeatzen duten espazio zuria hain garrantzitsua den ikastea oso garrantzitsua da.

Inprimatzeko tartea

Hitzen prozesatzeko softwarea, hiru espazio zuri nagusi espazio, fitxa eta orga itzulera dira. Horietako bakoitzak era desberdin batean jarduten du, baina HTML-an, nabigatzaileek funtsean gauza bera egiten dute. Espazio bat edo 100 espazio zure markatze HTMLan edo zure tartea fitxekin eta orga itzulkinekin konbinatzen badituzu, horiek guztiak espazio berean kondentsatu egingo dira orrialdea arakatzaileak errendatzen denean. Web diseinu terminologian, espazio zuriaren kolapsoa da. Ezin duzu tarte tarte tipiko hau erabili zuriuneak web orri batean gehitzeko, arakatzaileak espazio bat baino gutxiago tolestu egiten du arakatzailean ateratako leku bakar batean.

Zergatik norbaitek erabiltzen du fitxak?

Normalean, testuko dokumentuan fitxak erabiltzen dituztenean, diseinu-arrazoiengatik erabiltzen dituzte edo testu bat leku jakin batera joateko edo beste elementu batetik bestera joateko. Web diseinuan, ezin dituzu aipatutako espazioko karaktereak erabili ikusizko diseinu edo estilo horiek lortzeko.

Web diseinuan, kodearen estandar gehigarrien karaktereak kode hori irakurtzeko erraztasun hutsa izango litzateke. Webguneetako diseinatzaile eta garatzaileek sarritan erabiltzen dituzte fitxak kodearen indentziora, elementu horiek beste elementu batzuetako seme-alabak diren ikusteko, baina koska horiek ez dute orriaren diseinu bisualik eragiten. Beharrezko ikusizko diseinu aldaketak egiteko, CSS (katearen estilo-orriak) behar duzu.

CSS-a HTML Tabulak eta Tarteak sortzeko

Webguneak gaur egun egitura eta estilo bereizketarekin eraikitzen dira. Orrialde baten egitura HTML bidez maneiatzen da, estiloaren arabera CSSk agindutakoa. Horrek esan nahi du espazioa sortzea edo diseinu jakin bat lortzeko, CSSra bueltatu beharko zenuke eta ez duzu tarte-karaktere bat HTML kodea eransteko besterik.

Testuko zutabeak sortzeko fitxak erabiltzen saiatzen ari bazara, zutabe-diseinua lortzeko CSS-rekin kokatutako elementuak

erabil ditzakezu. Kokapen hau CSS karroza, kokapen absolutua eta erlatiboa erabilita egin daiteke, edo CSS formatu berriagoak erabiliz Flexbox edo CSS Grid bezalako teknikak.

Datuak hornitzen ari zaren datuak datu tabularrak badaude, taulak erabil ditzakezu nahi dituzun datuak lerrokatzeko. Taulak sarritan txarra izaten dute web diseinuan, hainbeste urte daramatzaten diseinu-tresna hutsez baliatu ziren, baina mahaiak oraindik ezin hobeak dira zure edukia aipatutako datu tabularretan.

Marjinak, betegarria eta testu-koska

CSSren arteko tartea sortzeko modu ohikoenak CSS estilo hauetako bat erabiliz daude:

Adibidez, paragrafo baten lehen lerroa zentzu honetan CSS (CSS) bezalakoa izan daiteke (kontuan hartu hau zure paragrafoak bere gain hartzen duen "first" atributuaren atributu bat dauka).

p.first {
testu-koska: 5em;
}

Paragrafo hau orain 5 karaktere koska egongo litzateke.

Ere erabil dezakezu marjina edo betegarriaren propietateak CSS atalean goialdean, behealdean, ezkerrean edo eskuinean (edo alderantzizko konbinazioak) elementu bat gehitzeko. Azken finean, CSS-tik biratzeko beharrezkoak diren espazio mota guztiak lor ditzakezu.

Testu mugitu CSS gabe espazio bat baino gehiago

Nahi duzun guztia zure testua aurreko zatian dagoen leku bat baino gehiagotan eramanez gero, hautsi gabeko espazioa erabil dezakezu.

Ez-haustura gunea erabiltzeko, gehitu & nbsp; zure HTML markupean behar duzun moduan.

Adibidez, hitza bost espazio baino gehiago mugitu nahi baduzu, gehitu hurrengoa aurretik.

& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTMLek errespetatzen ditu eta ez du espazio bakar batean kolapsatuko. Hala ere, praktika oso txarra dela uste dut, HTML dokumentu gehigarri bat dokumentu batera gehitzen delako diseinuaren beharrak lortzeko. Estiloa eta estiloa bereizteko erreferentziatzat hartuta, nahi ez diren diseinu-efektua lortzeko nahikoa izango ez zenez, CSS marjinak eta estalkiak erabili beharko lirateke.