Lähes jokaisen verkosta löytämämme ja käyttämämme verkkosivuston rakenne on luotu HTML:llä, standardoidulla tekstitiedostojen luokittelujärjestelmällä. Sivunvaihdot, kappaleet, vahvat kirjaimet, kursivoitu ja muut ominaisuudet lisätään HTML:n avulla. Käyttämällä tunnisteita, jotka ohjaavat selaimia sisällön käsittelyyn, HTML auttaa luomaan tämän rakenteen.

Esimerkiksi sijoitamme sanan tunnisteiden strong>bold/strong> väliin, jotta se näyttäisi lihavoidulta. Aloitustunniste (/) osoittaa, mihin haluamme lihavoinnin päättyvän, kun taas ensimmäinen tagi (/) osoittaa, mistä haluamme lihavoinnin alkavan. Se toimii perustana suurimmalle osalle web-sivuja. Joten tästä on hyvä aloittaa, jos opettelet koodaamaan.

Kuinka lisätä tilaa HTML:ään

Sanojen välisen yhden välilyönnin lisäksi kaikkia selaimessa näytettävään HTML-tekstiin kirjoittamamme tyhjät välilyönnit jätetään huomioimatta. Tämän seurauksena meidän on ohjelmoitava asiakirjassamme haluamasi tyhjät tilat. Mille tahansa tekstiriville voidaan lisätä tilaa HTML:ssä. Voimme esimerkiksi lisätä tyhjiä välilyöntejä taulukon ja kappaleen sisältöön HTML-objektin avulla. Koska HTML:stä puuttuu näppäimistön kirjain tyhjää tilaa varten, meidän on syötettävä entiteetti lisätäksesi jokainen välilyönti.

Se saattaa vaikuttaa yksinkertaiselta, mutta tilan lisääminen HTML-koodiimme saattaa olla haastavaa. On olemassa ainakin viisi erilaista lähestymistapaa tämän hoitamiseen.

Tämän koulutuksen aikana näemme monia tapauksia. Se myös osoittaa, kuinka käyttää monimutkaisempia tilamuotoja.

java yhteys mysql:iin

Kaikki tämä on mahdollista tavallisessa HTML:ssä ilman CSS:ää. Muista kuitenkin, että tilan lisääminen HTML-koodiin on parasta tehdä CSS:n kautta.

Miltä ASCII-avaruus näyttää?

Avaruutta edustaa ASCII-symboli 20. Mutta tämä on vain hyväksytty käytäntö.

HTML:ssä on viisi erilaista tilaa, joita voit käyttää. Ne näyttävät identtisiltä kouluttamattoman silmän kanssa, vaikka niillä onkin hieman erilaiset toiminnot.

Sarkainmerkki, joka simuloi näppäimistön sarkainnäppäimen painamista, on toinen vaihtoehto. Ja rivinvaihtomerkki, joka simuloi näppäimistön enter-näppäimen painamista, on toinen esimerkki.

Murtumaton tila:

Avaruudessa:  

Em-väli:  

Ohut tila:

Vakiotila:

Uusi rivi (paluu):

Välilehtimerkki:

Vasen puoli edustaa merkki , ja oikea puoli edustaa HTML-koodi.

Kuinka leveä hahmo on avaruudessa?

Välilyönneillä on neljä vakioleveyttä:

Vakioleveystila:Koska se ei johda rivinvaihtoon (tunnetaan myös nimellä vaununvaihto), sitä kutsutaan myös 'ei-rivinvaihtoväliksi'.Em-avaruus:Tämä on nimeltään 'Em', koska käyttämäsi kirjasintyyppi on sama kuin M-kirjain. (Jos olemme kuulleet ilmauksesta 'em-dash', tiedämme mistä puhumme.)Avaruudessa:Tämä tunnetaan nimellä 'En', koska sillä on sama leveys kuin kirjasintyypissäsi olevalla n-kirjaimella.Ohut tila:Kapein kaikista tiloista on 'ohut tila', joka on viimeinen vaihtoehto.

Mitä välilyöntimerkki HTML:ssä tarkoittaa?

on yleisimmin käytetty HTML-kokonaisuus.

joka perusti koulun

Jos haluat saada tämän tekstin täyttämään tilan, yritä heittää sitä.

Oletetaan esimerkiksi, että haluamme lisätä kaksi välilyöntiä lauseen perään, mutta verkkosivuston renderöintikone poistaa yhden välilyönnistä itsestään. Jos haluat lisätä kaksi välilyöntiä, voimme ehkä syöttää

Välilyönti: Mikä se on?

Merkkejä, jotka eivät ole näkyvissä, kutsutaan välilyönneiksi. Ne koostuvat:

1. tilat,
2. välilehdet ja
3. rivinvaihdot (rivinvaihdot, rivinvaihdot tai molemmat),

Miksi tämä on ratkaisevaa?

Nämä kirjaimet eivät esimerkiksi näy tekstinkäsittelyohjelmassa, mutta ne vaikuttavat tekstin tilaan ja muotoiluun. Selain tiivistää lukuisia välilyöntejä yhdeksi HTML-kieleksi, joka eroaa muista sivunkuvauskielistä.

Tämän HTML-koodin sanojen välissä on useita välilyöntejä, ja jokainen rivi päättyy CRLF-merkkeihin (carriage return, linefeed). Selain tiivistää kaikki välilyönnit.

Esimerkki

Hyvät asiat vievät enemmän aikaa.

Lähtö:

Välilyöntien lisääminen

1. Käytä tekstin välilyöntimerkkiä ( ) lisätäksesi välilyöntejä.
2. CSS-täyteominaisuutta voidaan käyttää lisäämään tilaa elementin sisällä eri olosuhteissa.
3. CSS-marginaaliattribuutti mahdollistaa ylimääräisen tilan lisäämisen elementin ympärille.

Vaikka katkeamattomat välilyönnit ovat hyödyllisiä, niitä ei pidä käyttää liikaa, koska se voi häiritä materiaalin näyttämistä selaimissa. Älä myöskään käytä rikkoutumattomia välilyöntejä tyylitarkoituksiin, kuten Web-sivun elementin sisentämiseen tai keskittämiseen. tyylivaatimukset tulisi sen sijaan käsitellä CSS:n kautta.

Entiteetin lisäksi HTML tukee myös seuraavia lisäkokonaisuuksia useille vierekkäisille tyhjille tiloille:

Merkkikokonaisuutta   käytetään edustamaan välilyöntiä. En on mittayksikkö, joka vastaa 8 pikseliä tai puolta em:n (16 pikseliä) leveydestä.

Sisällön välisen välilyönnin syntaksi on   Tässä on esimerkki HTML &ensp -entiteetin käytöstä:

b- ja b-puu

Tässä esimerkki avaruusolio.

Lähtö:

Entiteettiä   käytetään yllä olevassa esimerkissä välilyöntien lisäämiseen HTML:ään, ja sen leveys on 8 pikseliä. Niitä voidaan käyttää myös useissa vierekkäisissä paikoissa.

Muotoilun ja välien säilyttäminen

Jos haluat säilyttää määritetyt muotoilut ja välit, on kaksi vaihtoehtoa:

1. HTML-muotoilun ja tilan lisääminen
2. Käyttää

    tag.

'Pre' -tunnisteen käyttäminen

Nämä tulokset tapahtuvat vaihtamalla

-tunniste

 tag:

Esimerkki

 pre> Good things take more time 

Lähtö:

Kyllä

 tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn&apos;t always the best option. HTML spacing is a more popular method.</pre>

HTML-muotoilun ja -tilan lisääminen

Vaihtoehtoisesti voimme sisällyttää HTML-elementtejä ja symboleja, kuten seuraavat:

Hyvät asiat tulee

vie enemmän aikaa.

Lähtö:

Rivinvaihto vaaditaan
elementti.

Murtumaton tila:

Selain ei tiivistä välilyöntejä, jotka on lisätty katkeamattomalla välilyönnillä ().

Lisäksi, kuten nimestä voi päätellä, se estää selainta murtamasta kahta sanaa.

Hyvät asiat vievät enemmän aikaa.

Lähtö:

Tässä mallissa tekstin alkuun lisätään 10 välilyöntiä. Toinen laitetaan väliin kestää ', jota ei eristetä, kun lause rivitetään tilarajoitusten vuoksi.

Täyteattribuutti

Elementin sisätilaa lisätään CSS-täyteattribuutilla.

Se ottaa arvot yhdestä neljään, alkaen ylhäältä, oikealta, alhaalta ja oikealta puolelta.

The 'div' elementissä on 20 pikselin pehmuste joka puolella.

 Inner spacing is 20px with a div attribute 

Lähtö:

Marginaali-attribuutti

1. CSS-marginaaliattribuutilla lisätään ylimääräistä tilaa elementin ympärille.
2. Se ottaa arvot yhdestä neljään, alkaen ylhäältä, oikealta, alhaalta ja oikealta puolelta.

The 'div' elementin marginaali on 40 pikseliä joka puolella.

 Outer spacing is 20px using the div and margin attribute 

Lähtö:

Täyte vs marginaali

1. Sekä täyttö että marginaali lisäävät elementin tilaa.
2. Täyte jättää tyhjän tilan, jota pidetään elementin osana.
3. Marginaalin luoman tilan katsotaan olevan olemassa elementin rajojen ulkopuolella.
4. Tämä muunnelma vaikuttaa sivuston napsautusalueeseen, taustaväreihin ja muihin ominaisuuksiin.

Voidaan uskoa, että välilyöntien lisääminen HTML:ään on yhtä helppoa kuin jatkuva välilyöntinäppäin painaminen. Mutta asiat eivät vain toimi näin. Välilyöntinäppäimen painaminen useammin kuin kerran ei lisää lähellä olevia tyhjiä välilyöntejä kuten tekstidokumentissa. Selain yhdistää kaikki lähellä olevat tyhjät kohdat yhdeksi, jos teemme tämän HTML:ssä. Havainnollistaaksemme, mitä tapahtuu, kun käytämme useita välilyöntejä HTML:ssä, katsotaanpa esimerkkiä:

Joten kun välilyöntiä on käytetty useita kertoja, emme voi lisätä tyhjiä välilyöntejä

Lähtö:

Painamalla toistuvasti välilyöntiä HTML:ssä, kuten yllä olevassa esimerkissä näkyy, yritämme lisätä useita peräkkäisiä tyhjiä välilyöntejä verkkosivulle. Selaimet hahmontavat kuitenkin useita vierekkäisiä välilyöntejä yhdeksi välilyönniksi eivätkä huomioi osien edessä, jälkeen ja ulkopuolella olevia välilyöntejä. Ilmiö tunnetaan nimellä whitespace collapse. Vaikka välilyöntien kutistaminen saattaa toisinaan olla ärsyttävää, on olemassa useita tekniikoita, joilla voidaan lisätä välilyöntejä sekä HTML- että CSS-tiedostoihin (Cascading style sheets).

"primin algoritmi"

&

Merkkikokonaisuutta   käytetään edustamaan em-avaruutta. em:n leveys, joka on 16 pikseliä, vastaa emsp:tä.

Tekstin em-välilyöntien syntaksi on   Tässä on esimerkki HTML &emsp -entiteetin käytöstä:

x tai c++

Tässä on esimerkki tilakokonaisuudesta.

Lähtö

Entiteettiä käytetään yllä olevassa esimerkissä välilyöntien lisäämiseen HTML:ään, ja sen leveys on 16 pikseliä. Niitä voidaan käyttää myös useissa vierekkäisissä tiloissa.

&thinsp

Merkkikokonaisuutta käytetään edustamaan ohutta tilaa, joka tunnetaan usein kapeana tilana. Yksi kuudesosa em:stä on &:n leveys

Ohut väli kirjoitetaan syntaksin sisällön väliin. Tässä on esimerkki HTML-entiteetin käytöstä ''

Tämä on esimerkki ohuesta tilasta.

Lähtö

Entiteettiä käytetään yllä olevassa esimerkissä ohuiden välilyöntien lisäämiseen HTML:ään, ja sen leveys on kuudesosa em:stä. Niitä käytetään myös useissa vierekkäisissä tiloissa.

Alla on ASCII-taide 'Hei'. # # ##### # # # ##### # # # # # # # # # # ####

Lähtö:

Valkotilan käytön hyvät puolet

Laajennettu sisällön ymmärrettävyys:Kun asiakkaat ovat sivustollamme, heillä pitäisi olla mahdollisuus nähdä, mihin he etenevät, jotta he saavat motivaatiota jatkaa tutustumista. Rehellisesti sanottuna välilyönnit kohtien ja teksti- ja kuvalohkojen ympärillä auttavat ihmisiä ymmärtämään, mitä he lukevat, ja lisäykset edistävät ylivertaista asiakaskokemusta yleensä.Lisää yhteistyötä:Voimmeko vain olla todellisia, vierailla on luotettava kiire tutkiessaan paikkoja, ja suuri välilyönti lisää yhteyttä estämällä katkoksia, jotka hidastavat vieraan toimintaa. Todellakin, jopa pieni pehmuste esineiden ympärillä saa meidät huomaamaan tietyn alueen sivustollamme. Human Elements Worldwiden johtaman tutkimuksen mukaan tyhjä väli lisää tietoisuutta käytännössä 20 %.Kyky esitellä toimintakehotuksia (CTA):Joskus selkein tapa saada jotain erottumaan toisistaan ​​on tehdä asioista enemmän. Voimme tehdä kuvista suurempia tai painikkeita suurempia. Asian sisällyttäminen välilyönnillä voi kuitenkin olla yhtä kannattavaa.Puhdas sivusto vastaa huomionarvoista sivustoa:Sivustomme ensituntuma on erittäin tärkeä. Tonni poikkeuksellisen vahvat mallit, suuri valikoima suunnitelmia - tämä suuri määrä komponentteja lisää sivuston vaikutelmaa; välilyönti on kuitenkin erityisen merkittävä, koska se osoittaa taiteellisuutta ja kekseliäisyyttä. Välilyönti ei tee sivustostasi näkyvää tai kohtalaista. Riippumatta siitä, kuinka pitkää välilyöntiä käytetään oikein, se lisää sivustollesi kiillotuksen ja yleisyyden tunteen.Tasapainon luominen:Liian vähän välilyöntejä aiheuttaa epäjärjestystä, epäjärjestystä ja tärinää – ominaisuuksia, joita et tarvitse, jotka liittyvät sivustosi kuvaan. Toisaalta monissa välilyönneissä voi olla sisällön puuttuminen ja asiakkaan ohjauksen puuttuminen. Tärkeintä on muokata suunnitelmiasi ja antaa välilyönnit toimia uskomattomana välineenä eristää sisältöpakkauksia yksinkertaisen avoimuuden ja edelleen kehittyneen asiakaskokemuksen takaamiseksi.Toimii erottimena:Välilyönti eristää suunnitelman epäolennaiset osat. Sitä käytetään yleensä kuvien tai kuvioiden eristämiseen toisistaan ​​ja se toimii yleisessä visuaalisessa muodossa. Laillisen välilyönnin käyttö mahdollistaa ajatusten ja pakottavien suunnitelmien selkeämmän vastaavuuden.

Miksi välilyönti on tärkeää?

Whitespace on mielestäni suunnittelijana hyvän suunnittelun perusrakennuspalikka. Suunnittelijat viittaavat negatiiviseen tilaan tai sävellyksen kappaleiden väliseen tilaan, kun he käyttävät termiä 'whitespace'. Se on tyhjä tila grafiikan, marginaalien ja kourujen välillä sivulla, jota ei ole merkitty millään. Silmä saa visuaalisen hengitysalueen sarakkeiden, tekstirivien ja kuvien välissä.

On olemassa painava syy, miksi välilyönti on tärkeä osa suunnittelua. Se voi mullistaa verkkosivustomme suunnittelun ja tarjota sille useita etuja, jos sitä käytetään oikein. Meidän on tuotettava ja luotava taittoa, joka miellyttää silmää ja rohkaisee lukijoita jatkamaan. On erittäin tärkeää pitää jatkuvasti mielessä, että fantastisen tuotteen toimittaminen asiakkaillemme on prioriteettimme, kun suunnittelemme verkkoa.

Välilyöntejä voidaan käyttää ohjaamaan lukijaa elementistä toiseen, luomaan harmoniaa ja tasapainoa sekä auttamaan suunnittelua. Päätavoitteemme on tehdä verkkosivustosta selkeä ja selkeä sekä tarjota sisältöä, josta käyttäjämme pitävät ja jota arvostavat. Tyhjä välilyönti ei ole vain 'tyhjä' tila; se on suunnitteluominaisuus, joka mahdollistaa sivun kohteiden olemassaolon. Alue saavuttaa tasapainon ja toimii jatkuvana muistutuksena kauniista designista. Selkeän viestin välittämiseksi meidän ei tarvitse tehdä asettelua, joka on täynnä tekstiä ja grafiikkaa.