Kako koristiti HTML i CSS za kreiranje tabova i razmaka

Pogledajte kako se u HTML-u tretira bijeli prostor

Ako ste početni web dizajner, jedna od mnogih stvari koje ćete morati ranije shvatiti je način na koji se bijelom prostoru koda sajta obrađuje web pregledač.

Nažalost, način na koji su pretraživači obrađivali bijeli prostor nije u početku naročito intuitivan, pogotovo ako dođete u HTML i uporedite ga sa načinom na koji se obrađuje beli prostor u programima za obradu teksta, za koje možda znate više.

U softveru za obradu teksta možete dodati puno razmaka ili tabova u dokumentu i taj razmak će se odraziti na prikazu sadržaja dokumenta. Ovo nije slučaj sa HTML-om ili sa web stranicama. Kao takvo, saznanje o tome kako je bijeli prostor, zaista, rukovođen od strane web pretraživača je veoma važan.

Razmak u štampi

U softveru za obradu teksta, tri glavna karaktera belog prostora su vraćanje prostora, kartice i kretanja. Svaki od njih deluje na poseban način, ali u HTML-u, pretraživači ih sve u suštini isti. Bez obzira da li stavite jedan prostor ili 100 mesta u HTML oznaku ili miješate svoj razmak sa karticama i povratnim brojem karata, sve će se smanjiti na jedan prostor kada stranica pregleda pretraživač. U terminologiji web dizajna, ovo je poznato kao kolaps prostora. Ne možete da koristite ove tipične tastere razmaka da biste dodali prazninu na web stranici jer pregledač sruši više prostora u samo jedan prostor kada je prikazan u pregledaču,

Zašto neko koristi kartice?

Obično kada ljudi koriste jezičke u tekstualnom dokumentu, koriste ih zbog razloga postavljanja ili da se tekst prebaci na određeno mesto ili da bude određena udaljenost od drugog elementa. U web dizajnu ne možete koristiti navedene spomenute prostorske znakove da biste ostvarili te vizuelne stilove ili izglede.

U web dizajnu, korištenje dodatnih znakova razmaka u kodu bi bilo čisto zbog jednostavnosti čitanja tog koda. Web dizajneri i programeri često koriste tabulatore za kodove indentacije, tako da mogu videti koji su elementi deca drugih elemenata - ali te alinee ne utiču na vizuelni izgled stranice samog. Za one potrebne promene vizuelnog izgleda, moraćete da se okrenete na CSS (kaskadni listovi stilova).

Korišćenje CSS-a za kreiranje HTML kartica i razmaka

Web stranice danas su izgrađene uz razdvajanje strukture i stila. Strukturu stranice obrađuje HTML dok stila diktira CSS. To znači da za kreiranje razmaka ili postizanje određenog rasporeda, trebalo bi da se okrećete CSS-u i ne pokušavate jednostavno dodati razmak između razmaka u HTML kod.

Ako pokušavate da koristite tabove da biste kreirali stupce teksta, možete umjesto toga koristiti

elemente koji su pozicionirani sa CSS-om da biste dobili taj raspored kolone. Ovo pozicioniranje se može izvršiti kroz CSS float, apsolutno i relativno pozicioniranje ili nove tehnike CSS rasporeda kao što su Flexbox ili CSS Grid.

Ako su podaci koje postavljate tabelarni podaci, možete koristiti tablice da biste poravnali te podatke onako kako želite. Tabele često dobijaju loše mesto u web dizajnu jer su ih toliko godina zloupotrebljavali kao čist alat za izradu, ali tabele su i dalje sasvim validne ako vaš sadržaj sadrži gore pomenute tabelarne podatke.

Margine, Padding i Text-Indent

Najčešći načini za kreiranje razmaka sa CSS-om je korišćenje jednog od slijedećih CSS stilova:

Na primjer, možete odrediti prvu liniju paragrafa kao tab sa sljedećim CSS-om (obratite pažnju da to pretpostavlja da vaš pasus ima atribut klase "prvog" koji je pridružen njemu):

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

Ovaj pasus bi sada bio razdvojen oko 5 znakova.

Možete takođe koristiti i osobine margine ili paddinga u CSS-u da biste dodali razmake u gornjem, donjem, levom ili desnom (ili kombinacijama tih strana) elementa. Na kraju, možete postići bilo kakve razmake potrebne okretanjem na CSS.

Premeštanje teksta više od jednog prostora bez CSS-a

Ako želite da tekst premjestite više od jednog mjesta daleko od prethodne stavke, možete koristiti prostor koji ne rasklapa.

Da biste koristili prostor koji ne krši, jednostavno dodate & nbsp; koliko puta vam je potrebno u HTML oznakama.

Na primjer, ako želite premjestiti vašu riječ sa pet mjesta, možete dodati sljedeće riječi.

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

HTML ih poštuje i neće ih srušiti na jedan prostor. Međutim, ovo se smatra veoma lošom praksom, jer dodaju dodatni HTML markup u dokument samo radi postizanja potreba za postavljanje. Ako se vratimo na to razdvajanje strukture i stila, izbjegavajte dodavanje ne-rušenja prostih mjesta jednostavno za postizanje željenog rasporeda efekta i umjesto toga koristite CSS margine i padding.