Utilia
Kategorije ▾
Jezik: sl ▾

Oblikovalnik HTML

Uredi neurejen HTML s čistim zamikom ali ga varno zmanjšaj v brskalniku. Vgrajen CSS in JavaScript se prav tako oblikujeta. Nič se ne naloži na strežnik.

Kako oblikovati HTML

  1. Prilepi svoj HTML ali klikni Odpri datoteko, da naložiš datoteko .html ali .htm (do 10 MB).
  2. Izberi Zamik (2 presledka, 4 presledki ali tabulator) in ali želiš Prelomi vrstice pri 80 ali 120 znakih.
  3. Označi Zamakni in , če želiš, da sta zamaknjena znotraj <html>, in Odstrani komentarje, da opustiš komentarje <!-- … -->.
  4. Klikni Oblikuj (polepšaj) za berljivo kodo ali Zmanjšaj za najmanjšo varno različico.
  5. Kopiraj ali prenesi rezultat. Vrstica stanja prikaže velikost pred in po.

Rezultat je v izhodnem polju prikazan kot navadno besedilo. Tvoj HTML se na tej strani nikoli ne izriše ali izvede, zato skripti v prilepljeni kodi ne morejo ničesar narediti.

Polepšanje: berljiv HTML z doslednim zamikom

Oblikuj (polepšaj) uporablja js-beautify, oblikovalnik, na katerem temeljijo številni urejevalniki kode:

  • blokovni elementi gredo vsak v svojo vrstico, zamaknjeni po globini gnezdenja, medtem ko vrstični elementi, kot so <a>, <b> ali <span>, ostanejo znotraj besedila;
  • vsebina <script> in <style> se oblikuje kot JavaScript in CSS;
  • <pre> in <textarea> ostaneta natanko takšna, kot sta zapisana, saj so njuni presledki vidni;
  • zaporedne prazne vrstice se skrčijo na eno;
  • ob nastavljeni širini prekinitve se dolge vrstice besedila in dolgi seznami atributov prelomijo.

Polepšanje ne popravi pokvarjenega označevanja: nezaprt <div> ostane nezaprt, zamik, ki sledi, pa pokaže, kje je težava.

Zmanjšanje: manjši HTML brez spremembe strani

Zmanjšaj uporablja namerno previden pristop:

  • zaporedja presledkov, tabulatorjev in prelomov vrstic v besedilu postanejo en presledek, kot jih prikaže brskalnik;
  • presledki ob blokovnih elementih in elementih glave (<div>, <p>, <li>, <td>, <meta>, <br> …) se odstranijo, ker se nikoli ne izrišejo;
  • en presledek med vrstičnimi elementi se ohrani, zato se <b>big</b> <i>world</i> ne spremeni v »bigworld«;
  • komentarji se odstranijo, ko je označeno Odstrani komentarje, razen pogojnih komentarjev (<!--[if IE]>) in komentarjev, ki se začnejo z <!--!;
  • vsebine <script>, <style>, <pre> in <textarea> se nikoli ne dotakne, vrednosti atributov pa ostanejo natanko take, vključno z narekovaji.

Ne odstranjuje neobveznih zapiralnih oznak, ne prepisuje atributov in ne stiska vgrajenega JavaScripta in CSS: te optimizacije prihranijo malo več, vendar lahko pokvarijo strani. Pri večini strani stiskanje HTTP (gzip ali Brotli) prihrani veliko več kot kateri koli zmanjševalnik, zato je zmanjšanje najbolj uporabno za HTML v e-poštnih sporočilih, predlogah ali nizih JavaScript.

Pogosta vprašanja

Ali se moja koda naloži na strežnik?

Ne. Oblikovanje in zmanjševanje potekata v tvojem brskalniku; koda nikoli ne zapusti tvojega računalnika.

Zakaj je moja stran po zmanjšanju videti drugače?

V običajnih primerih ne bi smela. Edina izjema je CSS, ki spremeni prikaz presledkov, na primer white-space: pre na elementu, ki ni <pre> ali <textarea>, ali element, katerega prikaz je bil spremenjen iz bloka v vrstični: tam strnjeni presledki postanejo vidni.

Ali oblikovalnik preveri veljavnost mojega HTML?

Ne. Oblikuje to, kar mu podaš. Za preverjanje veljavnosti označevanja uporabi validator, kot je W3C Nu HTML Checker.

Ali lahko oblikujem predloge Vue, Svelte ali Django?

Večinoma. Oznake predlog znotraj besedila in atributov ostanejo, vendar lahko zapletena sintaksa predlog zmede zamik, zato rezultat preveri.

Kaj spremeni »Zamakni <head> in <body>«?

Privzeto se <head> in <body> začneta na isti ravni kot <html>, kar je pogosta konvencija, ki prihrani eno raven zamika. Označi možnost, da ju zamakneš za eno raven globlje.

Sorodna orodja