Pogledajte kako se preglednik pregledava u bijelom prostoru u HTML-u
Ako ste početnik web dizajner, jedna od mnogih stvari koje ćete rano morati shvatiti jest način na koji web preglednici upravljaju bijelim prostorom u kodu web mjesta.
Nažalost, način na koji preglednici upravljaju bijelim prostorom u početku nije baš intuitivan, pogotovo ako dolazite u HTML i usporedite je s time kako se bijelski prostor obrađuje u programima za obradu teksta, što možda znate.
U programu za obradu teksta u dokumentu možete dodati puno razmaka ili kartica, a taj se razmak odražava na prikazu sadržaja dokumenta. To nije slučaj s HTML ili s web stranicama. Kao takvo, vrlo je važno saznati kako je bijeli prostor doista obrađen od web preglednika.
Prostiranje u Ispis
U programu za obradu teksta, tri glavna znaka bijele površine su razmak, kartica i povrat kola. Svaki od njih djeluje na poseban način, ali u HTML-u, preglednici ih sve bitno ista. Bez obzira stavljate li jedan prostor ili 100 razmaka u HTML oznaku ili izmiješate razmak s karticama i povratkom kola, sve će se kondenzirati na jedan prostor kada preglednik pregleda stranicu. U web dizajn terminologiji, to je poznato kao bijeli prostor kolaps. Ne možete upotrebljavati ove tipične tipke za razmak da biste dodali razmak u web-stranicu jer preglednik srušuje više mjesta u samo jedan prostor kada se prikaže u pregledniku,
Zašto netko koristi kartice?
Uobičajeno, kada korisnici upotrebljavaju kartice u tekstualnom dokumentu, upotrebljavaju ih iz razloga izgleda ili da bi se tekst premjestio na određeno mjesto ili da bude određena udaljenost od drugog elementa. U web dizajnu, ne možete koristiti one gore navedene znakove prostora kako biste postigli te vizualne stilove ili potrebe za rasporedom.
U web dizajnu, upotreba dodatnih znakova razmaka u kodu bila bi čisto za jednostavnost čitanja tog koda. Web dizajneri i razvojni programeri često upotrebljavaju kartice u kôd umetnutosti kako bi vidjeli koji su elementi djeca drugih elemenata - ali te uvlake ne utječu na vizualni izgled same stranice. Za one potrebne promjene vizualnog izgleda, morat ćete se obratiti CSS-u (kaskadni stilski listovi).
Korištenje CSS-a za izradu HTML kartica i razmak
Web stranice danas grade s razdvajanjem strukture i stila. Struktura stranice obrađuje HTML, a stil je diktiran od strane CSS-a. To znači da biste stvorili razmak ili postigli određeni izgled, trebali biste se prebaciti na CSS i ne pokušavate jednostavno dodati znakove razmaka u HTML kôd.
Ako pokušavate koristiti kartice za stvaranje stupaca teksta, umjesto toga možete upotrijebiti elemente
Ako su podaci koje postavljate tablični podaci, pomoću tablica možete poravnati te podatke kao što želite. Tablice često dobivaju loš rap u web dizajnu jer su zloupotrijebili kao čiste alate za raspored toliko godina, ali tablice su ipak savršeno valjane ako vaš sadržaj sadrži gore spomenute tablične podatke.
Margine, Padding i Text-Indent
Najčešći načini stvaranja razmaka s CSS-om korištenjem jednog od sljedećih stilova CSS-a:
- margina
- punjenje
- tekst alineje
Na primjer, prvu liniju stavka kao što je kartica možete umetnuti u sljedeći CSS (napominjemo da ovo pretpostavlja da vaš stavak ima klasi atribut "prvo" koji je pridružen):
p.first {
tekst-uvod: 5em;
}
Ovaj stavak sada bi bio razveden oko 5 znakova.
Također možete upotrijebiti svojstva margine ili padanja u CSS-u da biste dodali razmak do vrha, dna, lijeve ili desne (ili kombinacije tih strana) elementa. U konačnici, možete postići bilo kakav razmak koji je potreban okretanjem na CSS.
Premještanje teksta više od jednog prostora bez CSS-a
Ako sve što želite je da se vaš tekst premjesti više od jednog mjesta od prethodne stavke, možete upotrijebiti neprestani prostor.
Da biste koristili neprekidni prostor, jednostavno dodajte & nbsp; onoliko puta koliko vam je potrebno u HTML oznakama.
Na primjer, ako želite premjestiti svoju riječ na pet razmaka, možete dodati sljedeće prije riječi.
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML ih poštuje i neće ih srušiti na jedan prostor. Međutim, to se smatra vrlo lošom praksom jer dodaje dodatnu HTML oznaku dokumentu samo za postizanje potreba za izgledom. Pozivajući se na taj odjeljak strukture i stila, trebali biste izbjegavati dodavanje neprekidnih prostora jednostavno kako biste postigli željeni izgled izgleda i umjesto toga koristite CSS margine i padding.