5 editori HTML cel mai bun pentru a testa codul

HTML rulează lumea modernă. Adevărat, dacă întrebați pe cineva ce este nevoie pentru a fi un dezvoltator de web, vă vor spune totul despre cadrele web JavaScript, framework-urile web Python, practicile de programare web Programare vs. Dezvoltare Web: Care este diferența? Programare vs. Dezvoltare Web: Care este diferența? S-ar putea să credeți că programatorii de aplicații și dezvoltatorii web fac același lucru, dar asta e departe de adevăr. Iată diferențele cheie dintre programatori și dezvoltatorii web. Citiți mai multe, etc. Totuși, sub toate acestea, HTML este ceea ce le implică împreună.

Nu există nici o rețea fără HTML și trebuie să știți cum să o editați dacă doriți să o faceți orice fel de muncă web. Însă crearea unui flux de lucru robust pentru editare HTML în textul Sublime 11 Sublime Text Sugestii pentru productivitate și un flux de lucru mai rapid 11 Sfaturi text sublim pentru productivitate și un flux de lucru mai rapid Sublime Text este un editor versatil de text și un standard de aur pentru mulți programatori. Sfaturile noastre se concentrează pe o codificare eficientă, dar utilizatorii generali vor aprecia comenzile rapide de la tastatură. Citește mai mult sau Visual Studio Code 10 Sfaturi esențiale de productivitate pentru Visual Studio Code 10 Sfaturi esențiale de productivitate pentru Visual Studio Code Visual Studio Code suflă alți editori de text de programare din apă. Este gratuit, open source, rapid fulger, și ambalate cu caracteristici de productivitate. Citește mai mult poate fi suprasolicitat dacă nu lucrați la un proiect complet dezvoltat.

Pentru momentele în care doriți doar să vă răsuceți cu un mic fragment de cod HTML, astfel încât să puteți să-l optimizați după preferințele dvs. editor HTML online vă va servi mai bine.

De ce să utilizați un editor HTML online?

Cel mai bun lucru despre editori HTML on-line este că rulează direct în browserul dvs. Web. Browserul dvs. web este Cel mai bun și cel mai relevant instrument pentru prelucrarea și redarea codului HTML. Aceasta este, la urma urmei, întregul scop și motiv pentru a fi.

Ceea ce înseamnă că browserul dvs. web este cel mai bine echipat în timp real, previzualizarea HTML. Când scrieți un marcaj web într-un editor independent, cum ar fi Notepad sau TextEdit, trebuie să salvați modificările într-un fișier, apoi să încărcați fișierul în browserul dvs. web, apoi să îl revizuiți, apoi să reveniți la editor pentru mai multe modificări, clătire și repetare. Este un proces ciudat și greoi.

Un editor HTML online se poate reîmprospăta dinamic pe măsură ce scrieți și modificați marcajul. Nu este nevoie să vă întoarceți înainte și înapoi între ferestre. Ajustați codul HTML pe o parte, modificările apar automat pe cealaltă parte.

Câțiva editori independenți pot fi configurați cu un fel de previzualizare faux în timp real, dar nu sunt la fel de convenabili. De exemplu, funcția de previzualizare live în brackets poate deschide o fereastră separată Chrome și poate modifica modificările HTML în browser ori de câte ori salvați marcajul. Dar acest lucru necesită în continuare o fereastră de tip flip-flopping și vă obligă să utilizați Chrome.

Editorii HTML on-line sunt la fel portabil așa cum vin ei. Indiferent de mașina pe care o utilizați, puteți accesa editorul web, atâta timp cât aveți o conexiune la internet. Nu este nevoie să instalați și să configurați un editor independent pe care îl puteți folosi sau nu din nou.

Iată câteva dintre cele mai bune editoare HTML online disponibile în prezent.

1. Codepen

Codepen este a “mediu de dezvoltare socială” pentru dezvoltatorii web, ceea ce înseamnă, în principiu, că este un editor online cu funcții de partajare și colaborare. Editorul în sine este simplu: un panou pentru HTML, un panou pentru CSS și un panou pentru JavaScript, plus un panou pentru previzualizarea în timp real. Toate dimensiunile panourilor pot fi reglate prin tragerea marginilor în jurul acestora.

Puteți crea “stilouri,” care sunt ca locurile de joaca individuale pentru codul de cod tweaking. Multiple stilouri pot fi grupate în colecții. Pensulele și colecțiile private necesită un cont Pro, care începe de la $ 9 / mo și include alte caracteristici: găzduire de active, teme încorporate, colaborare în timp real și acces la IDE de dezvoltare web completă CodePen.

2. JSFiddle

JSFiddle este destul de mult ceea ce pare: o cutie de nisip în care poți să te ocupi cu JavaScript. Dar văzând cum funcționează JavaScript în mână cu HTML și CSS, puteți edita toate cele trei cu interfața de editare JSFiddle - și puteți sări peste tot JavaScript.

Ce este frumos despre JSFiddle este că puteți adăuga solicitări externe în bara laterală, ceea ce vă permite să includeți fișiere JavaScript și CSS în afara site-ului pentru îmbunătățirea codului HTML. De asemenea, este minunat butonul Tidy, care curăță în mod automat indentarea codului dvs. și butonul Collaborate, care vă permite să lucrați pe același cod cu altcineva în timp real.

Singurul dezavantaj este că trebuie să faceți clic pe butonul Executare pentru a actualiza panoul de previzualizare.

3. JSBin

JSBin este ca o alternativă mai simplă și mai curată față de JSFiddle. Puteți modifica orice combinație de cod HTML, CSS și JavaScript doar prin comutarea panourilor cu bara de instrumente de sus și puteți comuta între panoul de previzualizare și un panou de consolă pentru o flexibilitate maximă.

Dar, în timp ce JSFiddle vă permite să conectați resurse externe CSS și JavaScript, JSBin are numai biblioteci JavaScript predefinite pe care le puteți include. Selecția este bună, de la jQuery la React la Angular și mai mult.

În timp ce JSBin este gratuit și nu are nevoie de un cont, veți avea nevoie de un cont Pro dacă doriți să faceți cumpărături private, încorporări personalizate, găzduire de materiale, sincronizare Dropbox și adrese URL pentru paginile publicate prin JSBin.

4. Învață live

Liveweave este similar cu editorul precedent de mai sus, cu o interfață mai plăcută pentru ochi (deși preferințele dvs. pot varia). La fel ca JSFiddle, Liveweave permite colaborarea în timp real și, la fel ca JSBin, vă permite să vă conectați în resurse predefinite de la terți, cum ar fi jQuery.

Dar are și câteva caracteristici unice. Generatorul Lorem Ipsum creează text la locul curent al cursorului. CSS Explorer oferă un instrument WYSIWYG pentru crearea stilurilor CSS. Color Explorer vă ajută să alegeți culorile perfecte pentru tema dvs. Vector Editor vă permite să creați grafică vectorială pentru site-ul dvs..

5. HTMLhouse

HTMLhouse este o opțiune bună dacă tu numai grija de HTML (adică fără CSS sau JavaScript). Este extrem de curat și minimal, împărțit vertical, cu editare în stânga și previzualizare în timp real în dreapta. O caracteristică minunată este abilitatea de a publica codul HTML și de a-l distribui în mod privat (cu adresa URL furnizată) sau public (se adaugă la pagina de căutare a HTMLhouse). Este simplu, dar eficient, care este exact locul în care un editor HTML online intră în joc și excelează.

Rețineți că HTMLhouse a fost creat și este menținut de cei de la Write.as, un instrument de scriere online fără distragere. Dacă scrieți mesaje pe blog sau ceva de genul ăsta, utilizați în schimb Write.as.

Îmbunătățiți abilitățile HTML chiar și mai mult

Dacă singura dvs. expunere la HTML este ceea ce ați învățat acum un deceniu, atunci este timpul să vă prindeți. HTML5 lansat în 2014 și a introdus o serie de noi standarde și caracteristici. Nu sunteți sigur de unde să începeți? Consultați aceste elemente noi noi în HTML5 Ce este nou în HTML5? 9 Elemente trebuie să știți ce este nou în HTML5? 9 Elemente pe care trebuie să le cunoașteți HTML5 este ultima versiune a celei mai utilizate limbi de markup de pe web. Dacă nu utilizați cele mai recente funcții, vă lipsesc anumite funcții interesante. Citeste mai mult .

În plus, pentru a învăța bune practici în HTML design și dezvoltare web, ar trebui să verificați aceste site-uri web cu exemple de codare HTML de calitate 8 Cele mai bune site-uri pentru exemple de codificare HTML de calitate 8 Cele mai bune site-uri pentru exemple de codificare HTML de calitate Există câteva site-uri minunate care oferă exemple de codificare HTML bine concepute și utile tutoriale. Iată opt dintre preferatele noastre. Citeste mai mult . Iar atunci când site-ul dvs. este live, luați în considerare comprimarea marcajului HTML Cum comprimat HTML funcționează și de ce ai nevoie de ea Cum comprimat HTML funcționează și de ce ai nevoie de ea În acest articol, vom trece peste cele două metode principale pentru HTML comprimat, de ce Fișierele HTML ar trebui să fie reduse și cum să procedați. Citiți mai multe pentru o viteză mai bună.

Care este modul dvs. preferat de a edita marcajul HTML? Ce fel de site web lucrați acum? Trimiteți-ne cu noi în comentariile de mai jos!

Explorați mai multe despre: HTML5, editoare WYSIWYG.