Stvaranje prostora i fizičko odvajanje elemenata u HTML-u može biti teško razumjeti početnom web dizajneru. Ovo je zbog HTML ima svojstvo poznato kao "razmak praznog prostora". bez obzira na to upišete li razmak 1 ili 100 u svoj HTML kôd, web preglednik automatski sažima te prostore na samo jedan jedini prostor. Ovo se razlikuje od programa poput Microsoft Word, koji omogućuje tvorcima dokumenata da dodaju više razmaka za odvajanje riječi i ostalih elemenata tog dokumenta. Razmak u dizajnu web stranice ne funkcionira na ovaj način.
Pa, kako dodati razmake u HTML koji se prikazuju na web stranicu koju ste izgradili? Ovaj članak ispituje neke od različitih načina.
Razmaci u HTML-u s CSS-om
Poželjni način dodavanja razmaka u HTML je s Kaskadni listovi stilova (CSS). CSS treba koristiti za dodavanje bilo kakvih vizualnih aspekata web stranice, a budući da je razmak dio karakteristika vizualnog dizajna stranice, CSS je mjesto na kojem želite da se to učini.
U CSS-u možete koristiti svojstva margine ili dodavanja kako biste dodali prostor oko elemenata. Uz to, svojstvo uvlačenja teksta dodaje prostor na prednjoj strani teksta, na primjer za uvlačenje odlomaka.
Evo primjera kako pomoću CSS-a dodati prostor ispred svih vaših odlomaka. Dodajte sljedeći CSS u svoj vanjski ili unutarnja tabela stila:
p {
uvlaka teksta: 3em;
}
Razmaci u HTML-u unutar vašeg teksta
Ako tekstu želite dodati dodatni razmak ili dva, možete koristiti razmak koji se ne lomi. Ovaj znak djeluje poput standardnog razmaka, samo što se ne urušava unutar preglednika.
Evo primjera kako dodati pet razmaka unutar retka teksta:
Ovaj tekst sadrži pet dodatnih prostora
Koristi HTML:
Ovaj tekst sadrži pet dodatnih prostora
Također možete koristiti
oznaka za dodavanje dodatnih preloma redaka.
Na kraju ove rečenice nalazi se pet prijeloma retka
Zašto je razmak u HTML-u loša ideja
Iako ove dvije opcije rade - element koji ne lomi razmake zaista će dodati razmak vašem tekstu i retku pauze će dodati razmak ispod gore prikazanog odlomka - ovo nije najbolji način za stvaranje razmaka u vašem web stranicu. Dodavanjem ovih elemenata u HTML dodaje se vizualne informacije kodu, umjesto da se odvaja struktura stranice (HTML) od vizualnih stilova (CSS). Najbolji primjeri iz prakse nalažu da ih treba odvojiti iz više razloga, uključujući lakoću ažuriranja u budućnosti i ukupnu veličinu datoteke i izvedba stranice.
Ako za diktiranje svih svojih stilova i razmaka upotrebljavate vanjsku tablicu stilova, tada je promjena tih stilova za cijelu stranicu jednostavna, jer jednostavno morate ažurirati tu listu stilova.
Razmotrite gornji primjer rečenice s pet
oznake na njegovom kraju. Ako želite tu količinu razmaka na dnu svakog odlomka, morat ćete dodati taj HTML kôd svakom odlomku na cijeloj web lokaciji. To je prilična količina dodatnih oznaka koje će napuhati vaše stranice. Uz to, ako na putu odlučite da je taj razmak previše ili premalo i želite ga malo promijeniti, morat ćete urediti svaki odlomak na cijelom web mjestu. Ne hvala!
Umjesto da dodate ove elemente razmaka u svoj kod, upotrijebite CSS.
p {
podnožje: 20px;
}
Taj bi jedan redak CSS-a dodao razmak ispod odlomaka vaše stranice. Ako ste u budućnosti željeli promijeniti taj razmak, uredite ovaj jedan redak (umjesto koda cijele web lokacije) i spremni ste!
Ako trebate dodati jedan prostor u jedan dio web stranice, pomoću a
oznaka ili jedan nerazgrađujući razmak nije kraj svijeta, ali morate biti oprezni. Korištenje ovih internih mogućnosti HTML razmaka može biti sklisko. Iako jedan ili dva možda neće naštetiti vašoj web lokaciji, ako nastavite tim putem, unijet ćete probleme na svoje stranice. Na kraju, bolje je da se okrenete CSS-u za HTML razmake i sve ostale vizualne potrebe web stranica.