Fiecare designer și programator web are nevoie de un editor bun de pagini web pentru a crea și edita codul HTML, CSS și JavaScript. Notepad (Windows) și TextEdit (Mac) sunt instrumente excelente pentru a începe, dar pe măsură ce veți obține mai multă experiență, veți dori să utilizați un instrument mai solid și mai convenabil.

Există sute de editori grozavi din care să alegeți, dar mulți dintre ei sunt plătiți. Și dacă nu doriți să încălcați drepturile de autor, dar bugetul nu are fonduri pentru achiziționarea unui produs comercial? Acest articol acoperă mai multe editori gratuiti excelente.

• Editori WYSIWYG. Acestea sunt editori grafici care vă permit să construiți un aspect de pagină și să setați stiluri vizual, ca în binecunoscutul procesor de text MS Word. Sunt un instrument la îndemână pentru construirea designului paginii, deși, așa cum știe orice designer web cu experiență, codul trebuie încă „pieptănat” pentru a obține un rezultat excelent.
• Editori de text. Este un instrument pentru editarea directă a codului HTML și CSS. Unele editori sunt de uz general și nu au opțiuni speciale pentru suport pentru codul web. Alții sunt specializați în utilizarea limbilor web precum HTML, CSS, JavaScript și PHP și au proprietăți încorporate pentru introducerea rapidă a etichetelor HTML, proprietăților CSS și așa mai departe. Multe dintre aceste editoare vă permit să vizualizați o pagină web într-o fereastră separată.

Compozer (Windows, Mac, Linux)

KompoZer este o alegere excelentă dacă aveți nevoie de un editor vizual cu un buget redus

Komodo Edit este un editor bun, ușor de învățat, dar puternic și extensibil

Deși este un editor de uz general, acceptă HTML și CSS și are completarea automată contextuală a etichetelor HTML și a proprietăților CSS, precum și o colecție de încorporare de cod pentru diferite elemente HTML. Pentru a profita la maximum de utilizarea Komodo, trebuie să instalați extensia HTML Toolkit, care conține funcții minunate precum etichete de închidere automată, previzualizare CSS și un generator de text temporar.

Komodo Edit vă permite să vizualizați paginile editate în orice browser instalat sau să utilizați browserul încorporat într-o fereastră separată, astfel încât să puteți edita și să vedeți rezultatul modificărilor în același timp.

Editorul are o funcție încorporată pentru încărcarea fișierelor pe site (FTP, FTPS, SFTP sau SCP) și vă puteți grupa fișierele într-un mod distractiv folosind opțiunea de manager de proiect.

Funcție foarte utilă Cod > Selectați Blocare. Evidențiază blocul principal curent al HTML, cum ar fi elementul div închis sau ul curent. O caracteristică foarte utilă atunci când trebuie să selectați o întreagă secțiune pe o pagină pentru a o copia sau a muta.

Komodo Edit are o mulțime de funcții puternice și utile, cum ar fi utilizarea expresiilor regulate pentru căutare/înlocuire, capacitatea de a executa comenzi externe și așa mai departe. Din fericire, editorul are, de asemenea, un sistem de ajutor bun care facilitează stăpânirea puterii Komodo Edit.

Aptana Studio (Windows, Mac, Linux)

Aptana Studio este un mediu complet integrat de dezvoltare a aplicațiilor web, cu o gamă largă de pluginuri. Deși îl puteți folosi doar ca editor de cod HTML/CSS/JavaScript

Notepad++ este un înlocuitor excelent pentru Notepad din Windows. Deși nu are același set de opțiuni ca alți editori, este excelent pentru editarea fișierelor HTML, CSS, JavaScript și alte coduri.

PSPad este un alt editor de uz general pentru Windows, cu un set mare de caracteristici utile pentru codificatoarele HTML și CSS

jEdit este un editor de text multiplatformă cu funcții puternice de comandă macro și plugin. Instalați pluginul XML dacă trebuie să editați pagini web

TextWrangler este un editor ușor de uz general. În ciuda lipsei de caracteristici speciale pentru dezvoltarea web, poate fi folosit pentru a lucra cu pagini web.

Vim este cu siguranță greu de învățat, dar odată ce treci peste asta, nu vei mai dori să te întorci!

Bunicul editorilor de text pentru programatori Vim (un descendent direct al editorului vi) este un editor de text pentru consolă open source. Este instalat ca editor implicit pe aproape toate versiunile Unix, inclusiv Linux și Mac OS X. Un editor este, de asemenea, disponibil pentru utilizare pe Windows și multe alte sisteme.

Vim nu este un sistem pe care să-l instalați și să începeți să-l utilizați imediat, fără să vă ocupați niciodată de el. Majoritatea comenzilor de editare includ combinații ciudate precum :wq și / . De asemenea, are trei moduri de editare: mod inserții, în care este introdus text; vizual mod de evidențiere a textului; și comanda modul de introducere a comenzilor. Această funcționalitate este o moștenire a Unix din zilele în care nu existau ferestre sau mouse-uri.

De ce este pe listă? Dacă îl stăpânești, atunci te vei convinge de viteza și puterea lui. Cu câteva comenzi, poți face în câteva secunde ceea ce poate dura câteva minute în alte editoare.

Există un număr mare de macrocomenzi și plugin-uri Vim care facilitează lucrul cu codul HTML, CSS și JavaScript, inclusiv evidențierea sintaxelor, completarea automată, HTML Tidy și navigarea într-un browser. Iată o listă mare de link-uri utile:

• Completare automată Vim Omni
• Editare HTML/XHTML în Vim
• pagina principala

Fraise (Mac)

Fraise este un editor intuitiv pentru Mac cu suficiente funcții pentru editarea web

La fel ca TextWrangler și gedit, Fraise este un editor ușor minunat, care este o plăcere de utilizat. Este o furcă a editorului. Este relativ nou și nu are un server web adecvat. În prezent, este acceptat doar pe Mac OS X 10.6 (Snow Leopard), adică dacă rulați versiunea 10.5, atunci va trebui să descărcați Smultron.

Fraise are câteva opțiuni grozave pentru editarea web:

• Evidențierea codului pentru HTML, CSS, JavaScript, PHP și alte câteva limbaje de programare.
• Comanda Close Tag(Command-T) pentru a închide eticheta curentă. Acest lucru economisește cu adevărat timp atunci când introduceți liste.
• Previzualizare convenabilă în browserul încorporat (folosind WebKit), cu o opțiune Live Update foarte la îndemână? care actualizează browserul de îndată ce marcajul și CSS-ul de pe pagina editată s-au schimbat.
• O opțiune de căutare avansată care acceptă căutarea/înlocuirea folosind expresii regulate.
• Suport pentru blocuri pentru a introduce rapid etichete HTML și proprietăți CSS.
• Câteva comenzi utile pentru manipularea textului, cum ar fi validarea HTML și conversia caracterelor în elemente HTML.

Fraise merită explorat dacă sunteți pe un Mac și aveți nevoie de un editor ușor de utilizat, cu mai multe funcții decât TextEdit încorporat.

Despre ce voi vorbi aici? Acest articol nu este o prezentare generală a diferiților editori, este destinat persoanelor cu un nivel mai scăzut de experiență în crearea de site-uri web. Prin urmare, trei întrebări vor fi luate în considerare aici:

1. Ce este un editor de cod?

2. Tipuri de editori de cod.

3. Ce fel este mai bine de utilizat.

Ultima întrebare este mai sensibilă, deoarece va dezvălui începătorilor o serie de motive pentru care nu ar trebui să utilizați un editor care facilitează foarte mult munca de creare a unui site.

De ce ai nevoie de un editor de cod

Deci, ce este un editor de cod? Un editor de cod este un program conceput special pentru a scrie cod în orice limbaj de programare. Esența unui astfel de program este de a face viața unui webmaster cât mai ușoară posibil. Astfel de programe, de regulă, ajută foarte mult la scrierea codului cu confortul lor.

Pentru comoditate, puteți:

1. Evidențierea codului, care facilitează foarte mult navigarea în codul în sine, deoarece uneori codul poate fi foarte mare.

2. Butoane speciale, la apăsare, o anumită funcție este atribuită automat sau, în cazul HTML, este inserată o etichetă.

Totuși, dacă încep să enumerez, chiar și în termeni generali, toate facilitățile, rezultatul va fi o carte nu mai puțin decât Război și pace. S-ar putea să fie mulți dintre ei.

Mai multe despre tipuri

Acum să trecem la a doua întrebare și să aflăm în ce tipuri de editori de cod sunt împărțite. Există doar două dintre ele - acesta este un editor de cod obișnuit și unul vizual. Cum sunt diferite aceste două tipuri? Diferența dintre ele este că într-un editor de cod obișnuit faceți toate modificările introducând codul în sine și puteți vedea consecințele acestor modificări doar rulând fișierul pe care l-ați editat. Într-un editor de cod vizual, o persoană poate să nu cunoască HTML și CSS deloc și, în același timp, să creeze o pagină frumoasă pentru site.

Sunt editorii de cod atât de importanți?

Se pare că ar putea fi mai bine? Nu trebuie să știi nici CSS, nici HTML, poți spune - lucrezi ca în Microsoft Word, scrii singur text, inserează imagini, tabele, link-uri - iar programul le codifică automat în format HTML și creează o pagină de lucru a site-ului , în plus, puteți vedea imediat cum va arăta site-ul dvs. la un clic pe un buton.

În mod realist, dacă știi să folosești un astfel de program (editor de cod vizual) - nu trebuie să cunoști HTML și CSS. Și totul pare să fie bine, dar acești editori au propriile lor, trebuie să spun, mari dezavantaje.

Acum trecem fără probleme la a treia întrebare a acestui articol: ce fel de editor de cod este cel mai bine de utilizat.

Se pare că toate cardurile sunt în mâinile editorului vizual, nu trebuie să cunoașteți HTML sau CSS - doar scrieți textul necesar și introduceți imaginile necesare. Dar există dezavantaje!

Contra editorilor

Primul astfel de dezavantaj- este o taxă. Astfel de editori valorează câteva sute de ratoni uciși (c.u.). De acord - nu toată lumea își poate permite! Dar, acest minus se transformă rapid într-un plus, deoarece puteți găsi orice program pe internetul nostru, îl puteți descărca și utiliza gratuit (ilegal). Principalul lucru este să știi ce să cauți. Dar, acesta este un minus monetar, care este ușor de rezolvat - s-au micșorat din cheltuieli și au cumpărat.

Al doilea minus, și trebuie să spun foarte semnificativ - fiecare editor vizual care generează automat cod pentru o pagină creează mai mult cod decât este necesar.

De regulă, un astfel de cod este mai mare cu 20 la sută. Dacă traficul resursei tale este mic, nu ai de ce să-ți faci griji, dar dacă ai câteva sute de oameni pe zi, paginile tale vor crea o încărcare suplimentară pe serverele companiei de găzduire, iar încărcarea va fi crescută cu 20 la sută. Și acest lucru nu este foarte plăcut pentru reprezentanții companiei.

Această problemă este rezolvată în două moduri - fie optimizați paginile pentru a reduce codul, dar pentru aceasta trebuie să înțelegeți codul - cunoașteți CSS și HTML. Sau plătiți banii câștigați cu greu.

Al treilea minus, oricât de „cool” ar fi editorul, el nu va putea să vă creeze un site web cu diverse funcții de programare. De exemplu, aceasta este trimiterea unei scrisori, paginare, formulare de comentarii, evaluări, sondaje și multe alte lucruri interesante care vor face site-ul tău modern.

Pot crea un site web cu un editor de cod?

Pentru a crea site-uri moderne, există soluții speciale care creează un site pentru dvs. cu totul gata în 5 minute și puteți utiliza în siguranță opțiunile gata făcute pentru limbaje de programare fără a le înțelege deloc. Aceste soluții se numesc sisteme de management al conținutului - CMS.

Dar, acest lucru implică și un alt dezavantaj semnificativ, și anume că fiecare CMS vine cu mai multe șabloane standard pentru site - cu alte cuvinte, designul site-ului tău. Și aceste șabloane sunt urâte, nu unice și doar sperie vizitatorii. Și editorul vizual nu va putea crea un șablon pentru CMS! Deoarece folosește propriile stiluri și opțiuni încorporate. Trebuie să editați manual astfel de șabloane, iar acest lucru necesită din nou cunoștințe de CSS și HTML.

De aici concluzia - dacă vrei un site web modern frumos- aveți două opțiuni - fie comandați acest site de la profesioniști și costă de la o sută de dolari și mai mult, fie faceți singur un șablon pentru sistemul de management al conținutului. Și pentru aceasta trebuie să înțelegeți CSS și HTML - o condiție prealabilă! Ei bine, puține cunoștințe despre PHP, dar poți face fără ea!

Și pentru a învăța HTML și CSS, trebuie să iei tutoriale și să le încerci în practică, și nu într-un editor vizual, pentru că doar apăsând butoanele nu îți vei aminti nimic, ci în mod obișnuit, introducând fiecare funcție pe tastatura.

De unde să descărcați gratuit editorii HTML și CSS

Personal, nu folosesc editori vizuali, dar dacă vă place foarte mult acest mod de a crea cod și doriți să învățați CSS și HTML - mai întâi introduceți codul manual până când învățați cel puțin cele mai comune elemente de creare a paginilor web și numai atunci, cu conștiința calmă folosește editorul vizual.

editor de paranteze Versiunea rusă, cea mai bună și de înțeles pentru începători:

Editor SublimeText 3, rapid și de încredere, folosit de mulți profesioniști (deși doar în engleză):

Opinia ta?

Fiecare dezvoltator web are nevoie de un instrument convenabil pentru crearea și editarea codului, dar nu toată lumea este pregătită să plătească o sumă decentă pentru a cumpăra același Adobe Dreamweaver. În plus, majoritatea nu trebuie să folosească o astfel de gamă de funcționalități pe care le oferă această combinație de software.

Prin urmare, am compilat pentru dvs. o listă cu cele mai bune editoare HTML care sunt distribuite sub o licență gratuită.

Notepad++

Un excelent editor de text care poate fi folosit ca înlocuitor mai funcțional pentru Windows Notepad și ca editor cu limbaje de layout și programare web: HTML, CSS, Java Script, PHP.

Navigarea cu file, evidențierea sintaxei, codificări, macrocomenzi, posibilitatea de a instala plugin-uri suplimentare, verificarea codului și compararea fișierelor - aceste și alte caracteristici fac din Notepad++ un instrument cu adevărat util pentru un dezvoltator web.

Este demn de remarcat ușurința de distribuire și viteza programului.

Komodo Edit

Editor de uz general cu suport HTML și CSS, care este o platformă completă, ale cărei posibilități pot fi mărite prin instalarea diverselor suplimente. Foarte recomandat este setul de instrumente HTML, care adaugă funcții precum previzualizarea CSS, închiderea automată a etichetelor, suportul HTML 5, completarea automată contextuală și multe altele.

Alte caracteristici interesante includ scheme de culori deschise și închise, evidențierea flexibilă a codului, evidențierea blocurilor, conectarea la un site prin FTP etc.

Un sistem de ajutor de calitate și o funcționalitate avansată fac din Komodo Edit unul dintre cei mai buni editori și o alternativă excelentă la soluțiile plătite.

Aptana

Scopul principal al programului este să lucreze cu HTML, CSS și JavaScript, iar suportul pentru alte limbi se realizează prin conectarea pluginurilor corespunzătoare. Completarea automată HTML și sfaturile instrumente sunt un bonus excelent pentru un editor gratuit.

Aptana acceptă parțial CSS3 și pe deplin HTML5. Kitul de distribuție al programului este destul de voluminos, dar acest lucru se datorează funcționalității extinse. Un număr atât de mare de funcții și setări diferite poate speria un începător, dar, în principiu, nimeni nu interferează cu utilizarea programului ca un simplu editor.

Alaborn iStyle

Un alt instrument bine realizat, ai cărui dezvoltatori au reușit să găsească un compromis între comoditatea interfeței, funcționalitate și înțelegere pentru utilizator. Interfața este complet în limba rusă și, ca bonus, este un sistem de ajutor bine dezvoltat.

Alte caracteristici pe care le oferă acest editor HTML includ:

• viteza de lucru și nesolicitarea resurselor;
• o cantitate mare de informații de ajutor încorporate în interfață;
• lucrați cu mai multe buffer-uri de text simultan;
• vrăjitori pas-cu-pas automat pentru a simplifica sarcinile comune.

KompoZer

Dacă toți editorii HTML enumerați mai sus au fost editori de text, atunci acesta este singurul care vă permite să lucrați în modul WYSIWYG. În plus, pe bună dreptate poate fi numit cel mai bun dintre cele gratuite. Mai mult, poate funcționa în trei moduri: text, vizual și combinat. Astfel, oferind oportunitățile necesare atât pentru începători, cât și pentru profesioniști.

Confortul de a lucra cu codul este oferit de o interfață convenabilă, un editor CSS încorporat și suport pentru toate elementele HTML.

În mod deliberat, nu am alocat locuri în clasament, deoarece fiecare dintre programele enumerate are propriile avantaje și dezavantaje, care pot juca un rol important pentru o persoană și pot fi complet nesemnificative pentru alta. Prin urmare, vă recomandăm să instalați și să încercați fiecare dintre programe în practică pentru a trage singur concluzii. În plus, este complet gratuit.