Isang pagtingin sa kung paano ang puting espasyo sa HTML ay itinuturing ng mga browser
Kung ikaw ay isang nagsisimula sa web designer, ang isa sa maraming mga bagay na dapat mong maunawaan nang maaga ay ang paraan na ang puting espasyo sa code ng isang site ay hinahawakan ng mga web browser.
Sa kasamaang palad, ang paraan ng paghawak ng mga browser ng puting espasyo ay hindi masyadong madaling maunawaan sa una, lalo na kung nakarating ka sa HTML at ihambing ito sa kung paano pinangangasiwaan ang puting espasyo sa mga programa sa pagpoproseso ng salita, na maaaring mas pamilyar ka.
Sa software ng pagpoproseso ng salita, maaari kang magdagdag ng maraming spacing o mga tab sa dokumento at ang spacing na iyon ay makikita sa pagpapakita ng nilalaman ng dokumento. Hindi ito ang kaso sa HTML o sa mga web page. Dahil dito, natututo kung paano ang puting espasyo ay, sa katunayan, ang paghawak ng mga web browser ay napakahalaga.
Spacing sa Print
Sa word processing software, ang tatlong pangunahing puting espasyo na character ay ang puwang, tab, at pagbalik ng karwahe. Ang bawat isa sa mga kumilos sa isang natatanging paraan, ngunit sa HTML, ang mga browser ay nagbibigay sa kanila ng lahat ng mahalagang parehong. Kung maglalagay ka ng isang espasyo o 100 na puwang sa iyong markup ng HTML, o ihalo ang iyong spacing up gamit ang mga tab at carriage returns, lahat ng mga ito ay mapapalawak sa isang puwang kapag ang pahina ay nai-render ng browser. Sa web design terminology, ito ay kilala bilang puting espasyo pagbagsak. Hindi mo maaaring gamitin ang mga tipikal na espasyo sa espasyo upang magdagdag ng whitespace sa isang web page dahil ang browser ay nag-collapse ng maramihang mga espasyo sa isang puwang lamang kapag nai-render sa browser,
Bakit Gumagamit ng Isang Tab?
Kadalasan, kapag ginagamit ng mga tao ang mga tab sa isang dokumento ng teksto, ginagamit nila ang mga ito para sa mga dahilan ng layout o upang makuha ang teksto upang lumipat sa isang tiyak na lugar o maging isang tiyak na distansya mula sa isa pang elemento. Sa disenyo ng web, hindi mo magagamit ang mga nabanggit na mga character na espasyo upang makamit ang mga visual na estilo o mga pangangailangan sa layout.
Sa disenyo ng web, ang paggamit ng mga sobrang spacing character sa code ay magiging pulos para sa kadalian ng pagbabasa ng code na iyon. Ang mga taga-disenyo at developer ng web ay madalas na gumagamit ng mga tab sa indent code upang makita nila kung aling mga elemento ang mga bata ng iba pang mga elemento - ngunit ang mga indent na ito ay hindi nakakaapekto sa visual na layout ng pahina mismo. Para sa mga kinakailangang pagbabago ng visual na layout, kakailanganin mong bumaling sa CSS (cascading style sheets).
Paggamit ng CSS upang Lumikha ng Mga Tab at Spacing ng HTML
Ang mga website ngayon ay binuo na may paghihiwalay ng istraktura at estilo. Ang istraktura ng isang pahina ay hinahawakan ng HTML habang ang estilo ay idinidikta ng CSS. Nangangahulugan ito na upang lumikha ng espasyo o makamit ang isang tiyak na layout, dapat kang lumipat sa CSS at hindi sinusubukan na idagdag lamang ang mga character na espasyo sa HTML code.
Kung sinusubukan mong gumamit ng mga tab upang lumikha ng mga haligi ng teksto, maaari mong gamitin ang halip na
Kung ang data na iyong inilalabas ay hiwalay na data, maaari kang gumamit ng mga talahanayan upang ihanay ang data na gusto mo. Ang mga table ay kadalasang nakakakuha ng masamang rap sa disenyo ng web dahil inabuso sila bilang dalisay na mga tool sa layout sa loob ng maraming taon, ngunit ang mga talahanayan ay ganap na wasto kung ang iyong nilalaman ay naglalaman ng nauugnay na hangganan ng datos.
Margins, Padding, at Text-Indent
Ang pinaka-karaniwang paraan upang lumikha ng espasyo sa CSS ay sa pamamagitan ng paggamit ng isa sa mga sumusunod na estilo ng CSS:
- margin
- padding
- text-indent
Halimbawa, maaari mong i-indent ang unang linya ng isang talata tulad ng isang tab na may sumusunod na CSS (tandaan na ito ay ipinapalagay na ang iyong talata ay mayroong katangian ng klase na "unang" na naka-attach dito):
p.first {
text-indent: 5em;
}
Ang parapo na ito ay maaring naka-indent na tungkol sa 5 na mga character.
Maaari mo ring gamitin ang mga katangian ng margin o padding sa CSS upang magdagdag ng spacing sa itaas, ibaba, kaliwa, o kanan (o mga kumbinasyon ng mga panig) ng isang elemento. Sa huli, maaari mong makamit ang anumang uri ng spacing na kinakailangan sa pamamagitan ng pag-on sa CSS.
Paglipat ng Teksto Higit sa Isang Space na Walang CSS
Kung ang lahat ng gusto mo ay para sa iyong teksto na mailipat ng higit sa isang espasyo ang layo mula sa naunang item, maaari mong gamitin ang di-paglabag na espasyo.
Upang gamitin ang puwang na hindi pagsira, idagdag mo lamang ang & nbsp; ng maraming beses hangga't kailangan mo ito sa iyong HTML markup.
Halimbawa, kung nais mong ilipat ang iyong salitang limang espasyo, maaari mong idagdag ang mga sumusunod bago ang salita.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Nirerespeto ng HTML ang mga ito at hindi ito bubagsak pababa sa isang espasyo. Gayunpaman, ito ay itinuturing na isang mahinang kasanayan dahil ito ay nagdaragdag ng dagdag na markup ng HTML sa isang dokumento lamang upang makamit ang mga pangangailangan sa layout. Ang pagtukoy sa paghihiwalay ng istraktura at estilo, dapat mong iwasan ang pagdaragdag ng mga puwang na hindi pagsira upang makamit ang isang ninanais na epekto sa layout at dapat gumamit ng mga margin at padding ng CSS.