Selitys mitä muotoiltu teksti on HTML-muodossa

click fraud protection

Kun lisäät tekstiä verkkosivun HTML-koodiin, sanotaan esimerkiksi kappaleelementissä, sinulla on vain vähän tai ei lainkaan hallintaa siitä, mihin nämä tekstirivit katkeavat tai mitä väliä käytetään. Tämä johtuu siitä, että verkkoselain kuljettaa tekstiä tarpeen mukaan sen alueen mukaan. Tämä sisältää reagoivat verkkosivustot jonka ulkoasu on erittäin sujuva ja joka muuttuu näytön koko käytetään sivun katseluun. HTML-teksti rikkoo rivin, missä sen on oltava, kun se on saavuttanut sisältävän alueensa. Loppujen lopuksi selaimella on enemmän roolia tekstin rikkoutumisen määrittämisessä kuin sinä.

Mitä tulee välien lisäämiseen tietyn muodon tai asettelun luomiseksi, HTML ei tunnista koodiin lisättyä väliä, mukaan lukien välilyönti, sarkain tai vaunupalautteet. Jos laitat kaksikymmentä välilyöntiä yhden sanan ja sen jälkeen tulevan sanan väliin, selain renderöi siellä vain yhden ainoan välilyönnin. Tätä kutsutaan tyhjätilojen romahdukseksi, ja se on itse asiassa yksi HTML-käsitteistä, jonka kanssa monet alan uudet taistelevat aluksi. He odottavat HTML-välilyönnin toimivan samalla tavalla kuin Microsoft Wordin kaltaisessa ohjelmassa, mutta HTML-välilyönti ei toimi ollenkaan.

instagram viewer

Useimmissa tapauksissa tekstin normaali käsittely missä tahansa HTML-asiakirjassa on juuri sitä mitä tarvitset, mutta muissa saatat haluta itse asiassa hallita tarkemmin sitä, miten teksti liikkuu ja missä se hajoaa linjat. Tätä kutsutaan valmiiksi muotoiluksi tekstiksi (toisin sanoen sanelet muodon). Voit lisätä valmiiksi muotoiltua tekstiä verkkosivuillesi HTML: n avulla.

Käyttämällä
 Tag 

Monta vuotta sitten oli tavallista nähdä verkkosivuja, joissa oli valmiiksi muotoiltua tekstiä. Käyttämällä

 -tunniste, jolla määritetään sivun osiot kirjoittamisen muotoilemana, oli nopea ja helppo tapa web-suunnittelijoille saada teksti näyttämään haluamallaan tavalla. Tämä tapahtui ennen asettelun CSS: n nousua, kun web-suunnittelijat olivat todella jumissa yrittäessään pakottaa asettelua käyttämällä taulukoita ja muita vain HTML-menetelmiä. Tämä (tavallaan) toimi, koska ennalta muotoiltu teksti määritellään tekstiksi, jossa rakenne määritetään typografisilla käytäntöillä eikä HTML-renderöinnillä. 

Nykyään tätä tunnistetta ei käytetä niin paljon, koska CSS antaa meille mahdollisuuden sanella visuaaliset tyylit paljon tehokkaammin kuin yrittää pakottaa ulkonäkö HTML: ään ja koska verkkostandardit sanelevat selkeän eron rakenteen (HTML) ja tyylien välillä (CSS). Silti saattaa olla tapauksia, joissa ennalta muotoiltu teksti on järkevää, kuten postiosoitteelle, johon haluat pakottaa rivinvaihdot tai esimerkkejä runosta, joissa rivinvaihdot ovat välttämättömiä sisältö.

Tässä on yksi tapa käyttää HTML: ää

 tag: 

Tyypillinen HTML tiivistää asiakirjan valkoisen tilan. Tämä tarkoittaa, että tässä tekstissä käytetyt rivinvaihto-, välilyönti- ja sarkainmerkit kutistuvat yhdeksi välilyönniksi. Jos kirjoitat yllä olevan tarjouksen tyypilliseen HTML-tagiin, kuten p (kappale) -tagiin, päädyt yhteen tekstiriviin, kuten tämä:

Twas brillig ja slithey varpaat Sytyttivät ja sytyttivät wabessa.

Esitunniste jättää välilyönnit sellaisenaan. Joten rivinvaihdot, välilyönnit ja välilehdet säilyvät kaikki selaimen sisällön renderöinnissä. Lainauksen asettaminen a

 saman tekstin tunniste johtaisi tähän näyttöön: 
Twas brillig ja slithey varpaat
Oliko gyre ja gimble
sisään

wabe

Fontit

 tag tekee muutakin kuin vain ylläpitää kirjoittamasi tekstin välilyöntejä ja taukoja. Useimmissa selaimissa se on kirjoitettu monospace-fontilla. Tällöin tekstin merkit ovat yhtä leveitä. Toisin sanoen kirjain i vie yhtä paljon tilaa kuin kirjain w. 

Jos haluat mieluummin käyttää toista kirjasinta selaimen näyttämän oletustilan sijaan, voit silti muuttaa sitä tyylisivut ja valitse mikä tahansa muu fontti haluat, että teksti renderöidään.

HTML5

Yksi asia on huomioitava, että HTML5: ssä "width" -attribuuttia ei enää tueta

 elementti. HTML 4.01: ssä leveys määritti rivien sisältämien merkkien lukumäärän, mutta tämä on hylätty HTML5: lle ja sen ulkopuolelle. 
instagram story viewer