Utilia
Kategoritë ▾
Gjuha: sq ▾

Formatuesi i HTML

Bukuro HTML-në e çrregullt me shtyrje të pastër, ose minifikoje në mënyrë të sigurt, në shfletuesin tënd. Formatohen edhe CSS e JS brenda faqes.

Si ta formatosh HTML-në

  1. Ngjit HTML-në tënde, ose kliko Hap një skedar për të ngarkuar një skedar .html ose .htm (deri në 10 MB).
  2. Zgjidh Shtyrjen (2 hapësira, 4 hapësira ose një tabulim) dhe nëse do ta Thyesh rreshtat te 80 ose 120 karaktere.
  3. Shëno Shty dhe nëse dëshiron t’i shtysh brenda <html>, dhe Hiq komentet për të hequr komentet <!-- … -->.
  4. Kliko Formato (bukuro) për kod të lexueshëm, ose Minifiko për versionin më të vogël e të sigurt.
  5. Kopjo ose shkarko rezultatin. Rreshti i gjendjes tregon madhësinë para dhe pas.

Rezultati shfaqet si tekst i thjeshtë në kutinë e daljes. HTML-ja jote nuk vizatohet dhe nuk ekzekutohet kurrë në këtë faqe, ndaj skriptet në kodin që ngjit nuk mund të bëjnë asgjë.

Bukurim: HTML i lexueshëm dhe me shtyrje konsistente

Formato (bukuro) përdor js-beautify, formatuesin pas shumë editorëve të kodit:

  • elementet bllok vihen në rreshta të veçantë, të shtyrë sipas thellësisë së folezimit, ndërsa elementet brenda rreshtit si <a>, <b> ose <span> mbeten brenda tekstit;
  • përmbajtja e <script> dhe <style> formatohet si JavaScript dhe CSS;
  • <pre> dhe <textarea> lihen saktësisht siç janë shkruar, pasi hapësirat e tyre duken;
  • rreshtat bosh të njëpasnjëshëm reduktohen në një;
  • me një gjerësi thyerjeje, rreshtat e gjatë teksti dhe listat e gjata atributesh thyhen.

Bukurimi nuk e rregullon shënjimin e prishur: një <div> e pambyllur mbetet e pambyllur, dhe shtyrja që vijon tregon ku është problemi.

Minifikim: HTML më i vogël pa e ndryshuar faqen

Minifiko përdor një qasje qëllimisht konservatore:

  • vargjet e hapësirave, tabulimeve dhe ndarjeve të rreshtave në tekst bëhen një hapësirë e vetme, njëlloj si i shfaq shfletuesi;
  • hapësirat pranë elementeve bllok dhe elementeve të kokës (<div>, <p>, <li>, <td>, <meta>, <br>…) hiqen, pasi nuk vizatohen kurrë;
  • një hapësirë e vetme mes elementeve brenda rreshtit ruhet, ndaj <b>big</b> <i>world</i> nuk bëhet “bigworld”;
  • komentet hiqen kur Hiq komentet është i shënuar, përveç komenteve kushtëzuese (<!--[if IE]>) dhe komenteve që nisin me <!--!;
  • përmbajtja e <script>, <style>, <pre> dhe <textarea> nuk preket kurrë, dhe vlerat e atributeve ruhen saktësisht, thonjëzat përfshirë.

Nuk heq etiketat mbyllëse opsionale, nuk rishkruan atribute dhe nuk ngjesh JavaScript e CSS brenda faqes: ato optimizime kursejnë pak më shumë, por mund të prishin faqe. Për shumicën e faqeve, ngjeshja HTTP (gzip ose Brotli) kursen shumë më tepër se çdo minifikues, ndaj minifikimi është më i dobishëm për HTML të ngulitur në email-e, shabllone ose vargje JavaScript.

Pyetje të shpeshta

A ngarkohet kodi im?

Jo. Si formatimi, ashtu edhe minifikimi ekzekutohen në shfletuesin tënd; kodi yt nuk largohet kurrë nga kompjuteri yt.

Pse faqja ime dukej ndryshe pas minifikimit?

Në raste normale nuk duhet. Përjashtimi i vetëm është CSS që ndryshon mënyrën e shfaqjes së hapësirave, për shembull white-space: pre në një element tjetër nga <pre> ose <textarea>, ose një element që ka ndryshuar nga bllok në brenda rreshtit: hapësirat e palosura aty bëhen të dukshme.

A e vlerëson formatuesi HTML-në time?

Jo. Formaton atë që i jep. Për të kontrolluar që shënjimi është i vlefshëm, përdor një vlerësues si W3C Nu HTML Checker.

A mund të formatoj shabllone Vue, Svelte ose Django?

Kryesisht po. Etiketat e shablloneve brenda tekstit e atributeve ruhen, por sintaksa komplekse e shablloneve mund ta ngatërrojë shtyrjen, ndaj kontrollo rezultatin.

Çfarë ndryshon “Shty <head> dhe <body>”?

Si parazgjedhje, <head> dhe <body> nisin në të njëjtin nivel me <html>, një konvencion i zakonshëm që kursen një nivel shtyrjeje. Shëno opsionin për t’i shtyrë një nivel më thellë.

Mjete të ngjashme