Katsokaa, kuinka selaimet käsittelevät HTML-tilaa HTML: ssä
Jos olet alku web-suunnittelija, yksi niistä monista asioista, jotka sinun on ymmärrettävä varhaisessa vaiheessa, on tapa, jolla web-selaimet käsittelevät sivuston koodin valkoista tilaa.
Valitettavasti tapa, jolla selaimet käsittelivät valkoista tilaa, ei ole kovin intuitiivinen aluksi, varsinkin jos tulet HTML-muotoon ja vertaa sitä siihen, kuinka valkoista tilaa käsitellään tekstinkäsittelyohjelmissa, joita saatat tuntea paremmin.
Tekstinkäsittelyohjelmistossa voit lisätä paljon välilyöntejä tai välilehtiä asiakirjassa ja että välimatka näkyy asiakirjan sisällön näytössä. Näin ei ole HTML tai verkkosivuilla. Sellaisena oppiminen on, kuinka paljon web-selaimet käsittelevät valkoista tilaa, on erittäin tärkeä.
Spacing in Print
Tekstinkäsittelyohjelmassa kolme ensisijaista valkoista välilyöntiä ovat välilyönti, välilehti ja vaunun palautus. Jokainen näistä toimii selkeästi, mutta HTML: ssä selaimet tekevät niistä kaikki oleellisesti samat. Olipa laitat yhden välilyönnin tai 100 välilyöntiä HTML-merkinnässäsi tai sekoitat välilyönnit välilehtien ja kelkatulosten kanssa, kaikki nämä tiivistetään yhdelle tilalle, kun selaimesi tekee sivun. Web-suunnittelun terminologiassa tämä tunnetaan valkoisen tilan romahduksena. Et voi käyttää näitä tyypillisiä välilyöntinäppäimiä lisätäksesi välilyöntejä verkkosivuilla, koska selaimessa on useita sivuja vain yhteen tilaan selaimessa,
Miksi joku käyttää välilehtiä?
Tyypillisesti, kun ihmiset käyttävät välilehtiä tekstitiedostossa, he käyttävät niitä ulkoasun syistä tai saavat tekstin siirtymään tiettyyn paikkaan tai olla tietty etäisyys toisesta elementistä. Web-suunnittelussa et voi käyttää näitä edellä mainittuja välilyöntejä näiden visuaalisten tyylejen tai asettelutarpeiden saavuttamiseksi.
Web-suunnittelussa koodin käyttämien ylimääräisten välilyöntien käyttäminen olisi pelkästään koodin lukemisen helpottamiseksi. Web-suunnittelijat ja kehittäjät käyttävät usein välilehtiä sisennyskoodiin, jotta he voivat nähdä, mitkä elementit ovat muiden elementtien lapsia - mutta ne eivät vaikuta sivun visuaaliseen ulkoasuun. Niille, jotka tarvitsevat visuaalisen ulkoasun muutoksia, sinun tulee kääntyä CSS: ään (Cascading style sheets).
CSS: n avulla luodaan HTML-välilehdet ja välilyönti
Nykyiset verkkosivustot on rakennettu erottamalla rakenteet ja tyylit. Sivun rakenne käsitellään HTML: ssä, kun taas tyylin sanelee CSS. Tämä tarkoittaa sitä, että kun luot välilyöntiä tai saavutat tietyn asettelun, sinun pitäisi kääntyä CSS: ään eikä yrittää lisätä yksinkertaisesti välilyöntejä HTML-koodiin.
Jos yrität käyttää välilehtiä luoda sarakkeita tekstiä, voit käyttää sen sijaan
Jos antamasi tiedot ovat taulukkotietoja, voit käyttää taulukoita kohdistamaan tiedot haluamallasi tavalla. Taulukoissa esiintyy usein huonoa rapia web-suunnittelussa, koska niitä on käytetty väärin puhtaina layout-työkaluina niin monta vuotta, mutta taulukot ovat edelleen täysin päteviä, jos sisältösi sisältää edellä mainittuja taulukkotietoja.
Marginaalit, Padding ja Text-Indent
Yleisimmät tavat luoda välilyöntiä CSS: llä on käyttämällä yhtä seuraavista CSS-tyypeistä:
- marginaali
- täyte
- text-sisennys
Voit esimerkiksi sijoittaa kappaleen ensimmäisen rivin, kuten välilehden, jossa on seuraava CSS (huomaa, että tämä olettaa, että kappaleessa on siihen liittyvä "ensimmäinen" luokan attribuutti):
p.first {
teksti-indentti: 5em;
}
Tämä kohta olisi nyt sisennetty noin 5 merkkiä.
Voit myös käyttää CSS-marginaali- tai täyttöominaisuuksia lisätäksesi välilyönnin elementin ylhäältä, alhaalta, vasemmalta tai oikealta (tai niiden yhdistelmiltä). Viime kädessä voit saavuttaa minkä tahansa välilyönnin, jota tarvitaan kääntämällä CSS: hen.
Tekstin siirtäminen useammalla kuin yhdellä tilalla ilman CSS: ää
Jos haluat, että tekstisi on siirrettävissä useammalle kuin yhdelle välilyönnille edellisestä kohteesta, voit käyttää ei-rikkomatta tilaa.
Jos haluat käyttää rikkomatta tilaa, lisää yksinkertaisesti & nbsp; niin monta kertaa kuin sitä tarvitset HTML-merkinnässäsi.
Jos haluat esimerkiksi siirtää sanasi viisi tilaa, voit lisätä seuraavan sanan.
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML kunnioittaa näitä eivätkä romahda niitä yhteen tilaan. Tätä pidetään kuitenkin erittäin huonoina käytännöinä, koska se lisää HTML-merkintää asiakirjaan vain layoutien tarpeiden saavuttamiseksi. Viitaten siihen, että rakenne ja tyyli erotetaan toisistaan, sinun on vältettävä lisäämättömiä aukkoja pelkästään halutun ulkoasun saavuttamiseksi ja sen sijaan CSS-marginaaleja ja pehmusteita.