Kiel Uzi HTML kaj CSS Krei Tabs kaj Spacing

Rigardu kiel blanka spaco en HTML estas traktita de retumiloj

Se vi estas komenco retejo-desegnisto, unu el la multaj aferoj, kiujn vi devos kompreni frue, estas la maniero, kiun blanka spaco en la kodo de la retejo manipulas retumiloj.

Bedaŭrinde, la maniero, kiun la retumiloj manipulis blankan spacon ne estas tre intuicia komence, precipe se vi eniras en HTML kaj komparas ĝin al kiel blanka spaco estas manipulita en programprogramoj, kiujn vi povas esti pli konata.

En programprograma programaro, vi povas aldoni multe da interspaco aŭ pestañas en la dokumento kaj tiu interspaco reflektiĝos en la ekrano de la enhavo de la dokumento. Ĉi tio ne okazas kun HTML aŭ kun retpaĝoj. Kiel tia, lernante, kiel blanka spaco, efektive, manipulita de retumiloj estas tre grava.

Spacado en Print

En programprograma programaro, la tri primaraj blankaj spacaj karakteroj estas la spaco, pestaĵo kaj kaleŝo. Ĉiu el ĉi tiuj agas klare, sed en HTML, retumiloj redonu ilin ĉiuj esence la samaj. Ĉu vi lokas unu spacon aŭ 100 spacojn en via HTML-marko aŭ miksas vian interspacon per pestañas kaj kaleŝaj revenoj, ĉiuj ĉi tiuj estos kondensitaj malsupren al unu spaco kiam la retumilo de la paĝo. En teĥnologia terminologio, ĉi tio estas konata kiel blanka spaca kolapso. Vi ne povas uzi ĉi tiujn tipajn interspacajn klavojn por aldoni spacon en retpaĝaro ĉar la retumilo kolapsas multajn spacojn en nur unu spacon, kiam oni enmetas en la retumilon,

Kial Iu uzas Uzajn Tabojn?

Kutime, kiam homoj uzas pestaĵojn en teksta dokumento, ili uzas ilin por aranĝaj kialoj aŭ por ke la teksto movu al certa loko aŭ esti certa distanco de alia elemento. En retpaĝo, vi ne povas uzi tiujn menciitajn spacajn signojn por atingi tiujn vidajn stilojn aŭ aranĝajn bezonojn.

En dezajno retejo, la uzo de ekstraj interspacaj signoj en la kodo estus simple por facile legi tiun kodon. Retejaj diseñistoj kaj programistoj ofte uzas pestaĵojn por indent-kodo por ke ili povu vidi, kiuj elementoj estas infanoj de aliaj elementoj - sed tiuj indentoj ne influas la vidan aranĝon de la paĝo mem. Por tiuj bezonataj vidaj aranĝoj, vi devos turni sin al CSS (akvoforaj folioj).

Uzante CSS por Krei HTML-Tabojn kaj Spacadon

Retejoj hodiaŭ estas konstruitaj kun apartigo de strukturo kaj stilo. La strukturo de paĝo estas manipulita de la HTML dum la stilo diktas la CSS. Ĉi tio signifas, ke krei interspacon aŭ atingi certan aranĝon, vi devus turni al CSS kaj ne provante simple aldoni interspacajn signojn al la HTML-kodo.

Se vi provas uzi pestaĵojn por krei kolumnojn de teksto, vi povas anstataŭe uzi elementojn

, kiuj situas CSS por akiri tiun kolumnon. Ĉi tiu pozicio povus esti farita per CSS-kaleŝegoj, absoluta kaj relativa pozicio, aŭ pli novaj CSS-aranĝaj teknikoj kiel Flexbox aŭ CSS Grid.

Se la datumoj, kiujn vi elŝaltas, estas tabulaj datumoj, vi povas uzi tabulojn por aliĝi tiujn datumojn kiel vi volas. Tabloj ofte ricevas malbonan reton en dezajno retejo ĉar ili estis trouzitaj kiel puraj aranĝaj iloj dum tiom da jaroj, sed tabloj ankoraŭ perfekte validas, se via enhavo enhavas tiujn menciitajn tabulojn.

Margins, Plenigado kaj Teksto-Indento

La plej komunaj manieroj krei interspacon kun CSS estas per unu el la sekvaj CSS-stiloj:

Ekzemple, vi povas enmeti la unuan linion de alineo kiel langeto kun la sekva CSS (notu, ke tio supozas, ke via alineo havas klasan atributon de "unua" alfiksita al ĝi):

p.first {
teksto-indento: 5em;
}

Ĉi tiu alineo nun estus dentita ĉirkaŭ 5 karakteroj.

Vi povas ankaŭ uzi la rando aŭ kompletigado en CSS por aldoni interspacon al la supro, malsupro, maldekstre aŭ dekstra (aŭ kombinaĵoj de tiuj flankoj) de elemento. Finfine, vi povas atingi iun specon de interspaco necesa de turnado al CSS.

Movanta Tekston Pli ol Unu Spaco Sen CSS

Se ĉio, kion vi deziras, estas, ke via teksto moviĝos pli ol unu spaco for de la antaŭa artikolo, vi povas uzi la ne-rompan spacon.

Por uzi la ne-rompanta spacon, vi simple aldonu & nbsp; tiom da fojoj kiel vi bezonas ĝin en via HTML-marko.

Ekzemple, se vi volis movi vian vorton kvin spacojn, vi povus aldoni la jenajn vortojn antaŭ la vorto.

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

HTML respektas ĉi tiujn kaj ne kolapsos ilin al sola spaco. Tamen, ĉi tio estas konsiderata tre malriĉa praktiko pro tio ke ĝi aldonas kroman HTML-markon al dokumento nur por atingi aranĝajn bezonojn. Referencante al tiu disiĝo de strukturo kaj stilo, vi devus eviti aldoni ne-rompantajn spacojn simple por atingi deziritan aranĝan efikon kaj devus uzi CSS-randojn kaj kompletigon anstataŭe.