Si të përdorni HTML dhe CSS për të krijuar skeda dhe hapësirë

Një vështrim se si hapësira e bardhë në HTML trajtohet nga shfletuesit

Nëse jeni një inxhinier i fillimit të uebit, një nga shumë gjëra që do t'ju duhet të kuptoni herët është mënyra se hapësira e bardhë në kodin e një faqeje trajtohet nga shfletuesit e uebit.

Për fat të keq, mënyra se si shfletuesit trajtojnë hapësirë ​​të bardhë nuk është shumë intuitiv në fillim, veçanërisht nëse hyni në HTML dhe krahasoni atë me atë se sa hapësirë ​​e bardhë trajtohet në programet e përpunimit të fjalëve, të cilat mund të jeni më të njohur me to.

Në softuerin e përpunimit të fjalëve, mund të shtoni shumë hapësirë ​​ose skeda në dokument dhe se ndarja do të pasqyrohet në shfaqjen e përmbajtjes së dokumentit. Ky nuk është rasti me HTML ose me faqet e internetit. Si e tillë, të mësuarit se sa hapësirë ​​e bardhë është, me të vërtetë, trajtohet nga shfletuesit e internetit është shumë e rëndësishme.

Hapësira në Print

Në softuerin e përpunimit të tekstit, tre karakteret kryesore të hapësirës së bardhë janë hapësira, tab, dhe kthimi i topi. Secili prej tyre vepron në një mënyrë të veçantë, por në HTML, shfletuesit i bëjnë ato të gjitha në thelb të njëjta. Nëse vendosni një hapësirë ​​ose 100 hapësira në HTML-in tuaj, ose përzieni hapësirën tuaj me skeda dhe kthime karroce, të gjitha këto do të kondensohen poshtë në një hapësirë ​​kur faqja të kryhet nga shfletuesi. Në terminologjinë e dizajnit të internetit, kjo njihet si kolapsi i hapësirës së bardhë. Ju nuk mund t'i përdorni këto çelësa tipikë të hapësirës për të shtuar hapësirën e bardhë në një faqe interneti, sepse shfletuesi bie hapësirat e shumta në vetëm një hapësirë ​​kur del në shfletues,

Pse përdor dikush skedarë?

Në mënyrë tipike, kur njerëzit përdorin skeda në një dokument teksti, ata po i përdorin ato për arsye të paraqitjes ose për të marrë tekstin për të kaluar në një vend të caktuar ose për të qenë një distancë e caktuar nga një element tjetër. Në web design, ju nuk mund të përdorni ato karaktere hapësinore të lartpërmendura për të arritur ato stilet vizuale ose nevojat e paraqitjes.

Në web design, përdorimi i karaktereve spacing shtesë në kodin do të jetë thjesht për lehtësinë e leximit të atij kodi. Web designers dhe zhvilluesit shpesh përdorin tabs të kodit indent në mënyrë që ata mund të shohin se cilat elemente janë fëmijë të elementeve të tjera - por ato indents nuk ndikojnë në paraqitjen vizuale të faqes vetë. Për ata që kanë nevojë për ndryshime të pamjes vizuale, do të duhet të ktheheni te CSS (fletët e stilit Cascading).

Përdorimi i CSS për të krijuar skedarë HTML dhe hapësirë

Websites sot janë ndërtuar me një ndarje të strukturës dhe stilit. Struktura e një faqe është trajtuar nga HTML ndërsa stili është i diktuar nga CSS. Kjo do të thotë që për të krijuar hapësira ose për të arritur një plan urbanistik të caktuar, duhet të kthehesh te CSS dhe të mos përpiqesh të shtosh thjesht karaktere spacing në kodin HTML.

Nëse jeni duke u përpjekur të përdorni skeda për të krijuar kolona të tekstit, ju mund të përdorni elementet

të cilat janë të pozicionuara me CSS për të marrë atë paraqitje kolone. Ky pozicionim mund të bëhet përmes lëvizjeve CSS, pozicionimit absolut dhe relative, ose teknikave më të reja të paraqitjes së CSS si Flexbox ose CSS Grid.

Nëse të dhënat që po nxjerrni janë të dhëna tabelare, mund të përdorni tabela për të lidhur ato të dhëna sa të dëshironi. Tabelat shpesh marrin një rap të keq në dizajnin e web sepse janë abuzuar si mjete të pastra për paraqitjen e tyre për kaq shumë vite, por tabelat janë akoma të përkryera në mënyrë të përkryer nëse përmbajtja juaj përmban të dhënat tabelare të lartpërmendura.

Margins, Padding, dhe Text-Indent

Mënyrat më të zakonshme për të krijuar ndarje me CSS është duke përdorur një nga stilet e mëposhtme CSS:

Për shembull, mund të fusësh vijën e parë të një paragrafi si një skedë me CSS-në e mëposhtme (vini re se kjo supozon që paragrafi juaj ka një atribut të klasës së "parë" që i është bashkangjitur):

p.first {
tekst-indent: 5em;
}

Ky paragraf tani do të ishte i prerë rreth 5 karaktere.

Gjithashtu mund të përdorni pronat e diferencialit ose mbushjes në CSS për të shtuar distancën në krye, në fund, në të majtë ose në të djathtë (ose kombinime të atyre anëve) të një elementi. Në fund të fundit, mund të arrini çfarëdo hapësira të nevojshme duke u kthyer tek CSS.

Lëvizja e tekstit më shumë se një hapësirë ​​pa CSS

Nëse gjithçka që dëshironi është që teksti juaj të zhvendoset më shumë se një hapësirë ​​larg nga elementi i mëparshëm, mund të përdorni hapësirën që nuk thyhet.

Për të përdorur hapësirën jo të thyer, thjesht shto & nbsp; sa herë që ju nevojitet në HTML-in tuaj.

Për shembull, nëse dëshironi të zhvendosni pesë hapësira për fjalën tuaj, mund të shtoni më poshtë fjalën.

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

HTML i respekton këto dhe nuk do t'i rrëzojë ato në një hapësirë ​​të vetme. Megjithatë, kjo konsiderohet një praktikë shumë e varfër pasi që shton HTML shtesë në një dokument vetëm për të arritur nevojat e paraqitjes. Duke iu referuar kësaj ndarjeje të strukturës dhe stilit, duhet të shmangni shtimin e hapësirave jo të thyer thjesht për të arritur një efekt të dëshiruar të faqosjes dhe duhet të përdorni kufijtë dhe mbushje CSS në vend.