Hvernig á að nota HTML og CSS til að búa til flipa og bilun

Kíktu á hvernig hvítt rými í HTML er meðhöndlað af vöfrum

Ef þú ert byrjandi vefur hönnuður, einn af mörgum hlutum sem þú verður að skilja snemma á er leiðin að hvíta plássið í kóðanum á síðuna er meðhöndluð af vefur flettitæki.

Því miður, hvernig vafrar eru meðhöndlaðar hvítt rými er ekki mjög leiðandi í fyrstu, sérstaklega ef þú kemst í HTML og bera saman það með því hvernig hreint pláss er meðhöndlað í ritvinnsluforritum, sem þú gætir þekki.

Í ritvinnsluforriti er hægt að bæta við fullt af bilum eða flipum í skjalinu og þessi bili endurspeglast í birtingu innihalds skjalsins. Þetta á ekki við með HTML eða vefsíðum. Eins og svo er að læra hvernig hvítt pláss er reyndar meðhöndluð af vafra er mjög mikilvægt.

Dreifing í prenti

Í ritvinnsluforritinu eru þrjár aðal hvítar rýmiðáknin rúm, flipi og flutningur aftur. Hver þessara aðgerða er á mismunandi hátt, en í HTML, þá eru vafrar öll þau sömu. Hvort sem þú setur eitt bil eða 100 rými í HTML-merkinu þínu, eða blandaðu bilunum þínum upp með flipa og flutningsávöxtun, þá verður allt þetta þétt niður í eitt rými þegar blaðsíða birtist. Í hugtökum vefhönnunar er þetta þekkt sem hvítt rými hrun. Þú getur ekki notað þessar dæmigerðu dreifitakkana til að bæta við hvetja á vefsíðu þar sem vafrinn hrynur mörgum rými niður í aðeins eitt rými þegar það er gert í vafranum,

Afhverju notar einhver Tabs?

Venjulega, þegar fólk notar flipa í textaskjali, eru þau að nota þau af uppsetningargögnum eða til að fá texta til að flytja til ákveðins stað eða til að vera viss fjarlægð frá öðrum þáttum. Í vefhönnun er ekki hægt að nota þessi framangreind geimtákn til að ná þeim sjónrænum stílum eða útlitsþörfum.

Í vefhönnun, notkun á auka bili stafi í kóðanum væri eingöngu til vellíðan að lesa þessi kóða. Vefhönnuðir og forritarar nota oft flipa til innkóðunar kóða svo að þeir geti séð hvaða þættir eru börn annarra efnisþátta - en þessir atriðum hafa ekki áhrif á sjónræna skipulag síðunnar sjálfs. Fyrir þá sem þurfa breytingar á sjónrænum skipulagi þarftu að snúa sér að CSS (cascading style sheets).

Nota CSS til að búa til HTML flipa og bilun

Vefsíður í dag eru byggðar með aðskilnaði uppbyggingar og stíl. Uppbygging blaðsíðunnar er meðhöndluð af HTML en stíllinn er ráðinn af CSS. Þetta þýðir að til að búa til bil eða ná ákveðnu skipulagi ættirðu að snúa sér að CSS og ekki reyna að einfaldlega bæta við bilteinatáknum við HTML kóða.

Ef þú ert að reyna að nota flipa til að búa til textasúlur, getur þú notað

þætti sem eru staðsettar með CSS til að fá þá dálksetningu. Þessi staðsetning gæti verið með CSS flotum, algerri og hlutlægri staðsetningu, eða nýrri CSS skipulag tækni eins og Flexbox eða CSS Grid.

Ef gögnin sem þú leggur út eru töfluupplýsingar, getur þú notað töflur til að samræma þær upplýsingar sem þú vilt. Töflur fá oft slæmt rapp í vefhönnun vegna þess að þau voru misnotuð sem hreint skipulagningartæki í svo mörg ár, en töflur eru enn fullkomlega gild ef innihaldið inniheldur áðurnefndar töfluupplýsingar.

Margrannur, Padding og Texti-Indent

Algengustu leiðin til að búa til bil með CSS er með því að nota eina af eftirfarandi CSS stílum:

Til dæmis getur þú slegið inn fyrstu línan í málsgrein eins og flipi með eftirfarandi CSS (athugaðu að þetta geri ráð fyrir að liðið þitt hafi flokka eiginleika "fyrst" við það):

p.first {
textaritun: 5em;
}

Þessi málsgrein myndi nú vera innandyra um 5 stafir.

Þú getur einnig notað margfalda eða padding eiginleika í CSS til að bæta bili efst, neðst, vinstri eða hægri (eða samsetningar þessara hliða) frumefni. Að lokum geturðu náð hvers konar bili sem þarf til að snúa sér til CSS.

Að flytja texta í meira en eitt svæði án CSS

Ef allt sem þú vilt er að textinn þinn sé fluttur meira en eitt bil í burtu frá ofangreindum hlut, getur þú notað plássið sem ekki er brotið.

Til að nota non-brot plássið, bætaðu einfaldlega & nbsp; eins oft og þú þarft það í HTML-merkinu þínu.

Til dæmis, ef þú vildir færa orð þitt fimm rými yfir, gætirðu bætt eftirfarandi við fyrir orðið.

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

HTML virðir þetta og mun ekki henda þeim niður í eitt rými. Hins vegar er þetta talið mjög lélegt starf þar sem það er að bæta við auka HTML markup á skjal eingöngu til að ná skipulagi þörfum. Með tilvísun til þess að aðskilnaður uppbyggingar og stíl, ættir þú að forðast að bæta við bilum sem ekki eru brotnar einfaldlega til að ná tilætluðu skipulagi áhrifum og ætti að nota CSS margar og padding í staðinn.