Oglejte si, kako brati v HTML-ju obravnavajo brskalniki
Če ste začetni spletni oblikovalec, je eden od mnogih stvari, ki jih boste morali najprej razumeti, način, kako spletno brskalnik obravnava prostor v spletni kodi spletnega mesta.
Na žalost način, s katerim so brskalniki obdelovali prazen prostor, ni na začetku zelo intuitiven, še posebej, če prideš v HTML in ga primerjate s tem, kako se v programih za obdelavo besed, ki jih morda poznate, primerjamo z belim prostorom.
V programski opremi za obdelavo besedila v dokumentu lahko dodate veliko razmikov ali zavihkov in ta razmik se bo odražal v prikazu vsebine dokumenta. To ne velja za HTML ali spletne strani. Kot tak, je zelo pomembno, kako se učiti, kako je prostor, ki ga sploh obravnavajo spletni brskalniki.
Razmik med tiskanjem
V programski opremi za obdelavo besedila so trije glavni primarni znaki prostega presledka, tabulatorja in vozlišča. Vsak od teh deluje na drugačen način, v HTML-ju pa brskalniki postanejo v bistvu enaki. Ne glede na to, ali v svoji oznaki HTML postavite presledek ali 100 presledkov ali pa premešate razmik s karticami in vračili vozovnic, se vse to zgostijo na enem mestu, ko stran odpre brskalnik. V terminologiji spletnega oblikovanja je to znano kot kolaps prostora. Te tipične tipke za razmik ne morete uporabiti za dodajanje presledkov na spletni strani, ker brskalnik uniči več presledkov v samo en prostor, ko je prikazan v brskalniku,
Zakaj nekdo uporablja zavihke?
Običajno, ko ljudje v besedilnem dokumentu uporabljajo zavihke, jih uporabljajo za razloge postavitve ali da se besedilo premakne na določeno mesto ali da je določena razdalja od drugega elementa. V spletnem oblikovanju ne morete uporabiti omenjenih znakov za doseganje teh vizualnih slogov ali postavitev potreb.
V spletnem oblikovanju bi uporaba znakov za razmak med sabo v kodi bila zgolj zaradi lažjega branja te kode. Spletni oblikovalci in razvijalci pogosto uporabljajo zavihke za kodo indentov, tako da lahko vidijo, kateri elementi so otroci drugih elementov - vendar ti alineji ne vplivajo na vizualno postavitev same strani. Za tiste potrebne vizualne postavitve sprememb, boste morali obrniti na CSS (kaskadni listi slogov).
Uporaba CSS-ja za ustvarjanje zavihkov HTML in razmika
Spletne strani so danes zgrajene z ločitvijo strukture in sloga. Strukturo strani obdeluje HTML, slog pa narekuje CSS. To pomeni, da morate ustvariti razmik ali doseči določeno postavitev, se morate obračati na CSS in ne poskušati enostavno dodati razmaknjenih znakov v HTML kodo.
Če poskušate uporabiti zavihke za ustvarjanje stolpcev besedila, lahko namesto tega uporabite
Če so podatki, ki jih postavljate, tabelarni podatki, lahko uporabite tabele za uskladitev teh podatkov, kot želite. Tabele pogosto dobijo slab zvok v spletnem oblikovanju, ker so bili zlorabljeni kot čista orodja za postavitev že toliko let, vendar so tabele še vedno popolnoma veljavne, če vaša vsebina vsebuje zgoraj navedene tabularne podatke.
Margine, Padding in Text-Indent
Najpogostejši načini za ustvarjanje razmika s CSS je uporaba enega od spodnjih slogov CSS:
- marža
- oblazinjenje
- besedilna alinea
Na primer, lahko vrstico prvega odstavka odstavka zamenjate kot zavihek z naslednjim CSS (upoštevajte, da to predpostavlja, da ima vaš atribut atribut razreda »prvi«, ki je priložen temu):
p.first {
besedilna alinea: 5em;
}
Ta odstavek bi zdaj bil razčlenjen približno 5 znakov.
V CSS lahko uporabite tudi lastnosti robov ali oblazinjenja, da dodate razmik do vrha, dna, leve ali desne (ali kombinacije teh strani) elementa. Na koncu lahko dosežete kakršnokoli razmik, ki ga potrebujete, če se obrnete na CSS.
Premikanje besedila z več kot enim prostorom brez CSS
Če želite, da se vaše besedilo premakne več kot en prostor od prejšnjega predmeta, lahko uporabite prostor, ki ga ne razkrije.
Če želite uporabiti neomejen prostor, preprosto dodate & nbsp; tolikokrat, kolikor ga potrebujete v oznaki HTML.
Če na primer želite premakniti besedo pet presledkov, lahko pred besedo dodate naslednje.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML to spoštuje in jih ne bo zrušil na en sam prostor. Vendar se to šteje za zelo slabo prakso, ker dodaja dodatno oznako HTML dokumentu le za doseganje postavitev potreb. Če se vrnemo k temu ločevanju strukture in sloga, se izogibajte dodajanju neomejenih prostorov zgolj za doseganje želenega učinka postavitve in namesto tega uporabite CSS robove in oblike.