Teknobench
Kategoriji ▾
Lingwa: mt ▾

Formatter tal-HTML

Ibbewtifika HTML mħawwad b’indentazzjoni nadifa, jew minimizzah b’mod sigur, fil-brawżer tiegħek. CSS u JavaScript inline jiġu ffurmattjati wkoll.

Kif tifformatja HTML

  1. Waħħal l-HTML tiegħek, jew ikklikkja Iftaħ fajl biex tiftaħ fajl .html jew .htm (sa 10 MB).
  2. Agħżel l-Indentazzjoni (2 spazji, 4 spazji jew tab) u jekk għandekx Aqsam il-linji f’ 80 jew 120 karattru.
  3. Immarka Indenta u jekk tridhom indentati ġewwa <html>, u Neħħi l-kummenti biex titlaq il-kummenti <!-- … -->.
  4. Ikklikkja Ifformatja (ibbewtifika) għal kodiċi li jinqara, jew Minimizza għall-iżgħar verżjoni sigura.
  5. Ikkopja jew niżżel ir-riżultat. Il-linja tal-istatus turi d-daqs qabel u wara.

Ir-riżultat jintwera bħala test sempliċi fil-kaxxa tal-output. L-HTML tiegħek qatt ma jitfassal jew jitħaddem f’din il-paġna, għalhekk scripts fil-kodiċi li twaħħal ma jistgħu jagħmlu xejn.

Ibbewtifika: HTML li jinqara u indentat b’mod konsistenti

Ifformatja (ibbewtifika) juża js-beautify, il-formatter wara ħafna editors tal-kodiċi:

  • l-elementi tal-blokk jitqiegħdu fuq linji tagħhom, indentati skont il-fond tan-nesting, filwaqt li elementi inline bħal <a>, <b> jew <span> jibqgħu ġewwa t-test;
  • il-kontenut ta’ <script> u <style> jiġi ffurmattjat bħala JavaScript u CSS;
  • <pre> u <textarea> jitħallew eżattament kif inkitbu, għax l-ispazji tagħhom jidhru;
  • linji vojta konsekuttivi jitnaqqsu għal waħda;
  • b’wisa’ tal-qsim, linji twal tat-test u listi twal ta’ attributi jinqasmu.

Il-bewtifikazzjoni ma tirranġax markup miksur: <div> mhux magħluq jibqa’ mhux magħluq, u l-indentazzjoni li ssegwih turi fejn hi l-problema.

Minimizza: HTML iżgħar mingħajr ma tbiddel il-paġna

Minimizza juża approċċ konservattiv apposta:

  • serje ta’ spazji, tabs u tmiem tal-linji fit-test isiru spazju wieħed, bħalma juri l-brawżer;
  • l-ispazji ħdejn elementi tal-blokk u tal-head (<div>, <p>, <li>, <td>, <meta>, <br>…) jitneħħew, għax qatt ma jitfasslu;
  • spazju wieħed bejn elementi inline jinżamm, biex <b>big</b> <i>world</i> ma jsirx “bigworld”;
  • il-kummenti jitneħħew meta Neħħi l-kummenti tkun immarkata, ħlief kummenti kondizzjonali (<!--[if IE]>) u kummenti li jibdew b’<!--!;
  • il-kontenut ta’ <script>, <style>, <pre> u <textarea> qatt ma jintmess, u l-valuri tal-attributi jinżammu eżattament, il-kwotazzjonijiet inklużi.

Ma jneħħix tags ta’ għeluq fakultattivi, ma jerġax jikteb attributi u ma jikkompressax JavaScript u CSS inline: dawn l-ottimizzazzjonijiet jiffrankaw ftit aktar imma jistgħu jkissru l-paġni. Għall-biċċa l-kbira tal-paġni, il-kompressjoni HTTP (gzip jew Brotli) tiffranka ħafna aktar minn kwalunkwe minifier, għalhekk il-minimizzazzjoni hija l-aktar utli għal HTML f’emails, templates jew strings tal-JavaScript.

Mistoqsijiet frekwenti

Il-kodiċi tiegħi jittella’?

Le. Kemm l-iffurmattjar kif ukoll il-minimizzazzjoni jaħdmu fil-brawżer tiegħek; il-kodiċi tiegħek qatt ma jitlaq mill-kompjuter tiegħek.

Għaliex il-paġna tiegħi dehret differenti wara l-minimizzazzjoni?

Ma għandhiex f’każijiet normali. L-eċċezzjoni waħda hija CSS li jbiddel kif jintwerew l-ispazji, pereżempju white-space: pre fuq element li mhuwiex <pre> jew <textarea>, jew element li d-display tiegħu nbidel minn block għal inline: l-ispazji miġbura hemm isiru viżibbli.

Il-formatter jivvalida l-HTML tiegħi?

Le. Jifformatja dak li tagħtih. Biex tiċċekkja li l-markup huwa validu, uża validatur bħall-W3C Nu HTML Checker.

Nista’ nifformatja templates tal-Vue, Svelte jew Django?

Il-biċċa l-kbira. It-tags tat-template ġewwa t-test u l-attributi jinżammu, imma sintassi kumplessa ta’ template tista’ tħawwad l-indentazzjoni, għalhekk iċċekkja r-riżultat.

X’jibdel “Indenta <head> u <body>”?

B’mod awtomatiku, <head> u <body> jibdew fl-istess livell ta’ <html>, konvenzjoni komuni li tiffranka livell ta’ indentazzjoni. Immarka l-għażla biex tindentahom livell iktar fil-fond.

Għodod relatati