Handige html-editor met meerdere pagina's. WYSIWYG-editor "wat je ziet is wat je krijgt"

Gegroet, beste lezers van de site. Taal HTML-opmaak is de basis van alle internetsites. Vaak houdt onwetendheid van deze taal velen tegen getalenteerde mensen op weg naar het maken van hun eigen webproject - tenslotte heeft niet iedereen een voorliefde voor programmeren. En niet iedereen weet dat je HTML-code kunt maken, niet alleen door tags in een notitieblok te schrijven, maar ook door eenvoudige visuele editors te gebruiken die op Word lijken.

  • Visueel (WYSIWYG) - waarbij het hele coderingsproces geen kennis van HTML vereist - stelt u in staat om tekst, afbeeldingen en andere pagina-elementen in een visuele modus (zoals in Word) op te maken - koppen maken, alinea's markeren, het materiaal aanvullen met opsommingstekens lijsten, enz., en bij de uitgang om te ontvangen klaar HTML code met alle tags;
  • Alleen werken met broncode- in vergelijking met een gewoon kladblok kun je de structuur van de code zien, dankzij markeringen en andere functies. Zonder kennis van HTML kun je niet met zulke editors werken.

Er zijn editors in de vorm van programma's die op een computer moeten worden geïnstalleerd, bijvoorbeeld visual NVU of Frontpage, je kunt met de code in Notepad++ werken. Maar er zijn ook online analogen - sites waar de HTML-editor rechtstreeks op het web werkt, zonder te hoeven downloaden.

De online editor is erg handig als u zelden codeert (webpagina's maken en bewerken).

Ik besloot een lijst te geven van de beste kwaliteit en meest bruikbare HTML online redacteuren mij bekend.

Eenvoudige HTML online editors

De visuele HTML de editor wordt door velen als de standaard beschouwd, aangezien het instellingenpaneel bijna alles bevat wat een webmaster kan bedenken - emoticons, Youtube video, zelfs de mogelijkheid om code in te voegen met markeringstags om de leesbaarheid te verbeteren.

De Cut Editor heeft drie modi om te schakelen:

  • Visueel;
  • Code-modus;
  • Resultaat voorbeeld.

Schakelen gebeurt via tabbladen onderaan het editorvenster.


Deze WYSIWYG HTML-editor kan in elke site worden geïntegreerd, de instructies zijn daar te vinden van de ontwikkelaars. Het bedieningspaneel kan worden gewijzigd; hiervoor is er een venster met een vervolgkeuzelijst boven het formulier met 5 sets bedieningsknoppen.

Deze ontwikkeling is niet alleen een online HTML-editor, maar een plug-in-module die op elke site kan worden geïnstalleerd en daarom op veel bronnen te vinden is. Als je wilt, kun je het op je project plaatsen - neem hiervoor de bronnen hier -.

De huidige editor-module werkt hier.


Het is een WYSIWYG-editor met: grote hoeveelheid functies. Er is ook tekstopmaak en zelfs online check spelling.

Ontwerp de pagina de gewenste knoppen, en aan het einde overschakelen van de visuele weergave naar de kant-en-klare HTML-code met behulp van de "Bron"-knop.

De online HTML 5-editor met twee vensters is handig omdat u op één scherm tegelijkertijd met de code kunt werken en het resultaat kunt zien van de bewerkingen die u aanbrengt. Deze redacteur niet geschikt voor mensen die helemaal geen kennis hebben van HTML, aangezien het erop gericht is direct met de code te werken. V standaard set, er zijn maar 5 items voor snel invoegen Is een lijst met opsommingstekens, tabel, afbeelding, vorm en selectie. De rest moet onafhankelijk worden geschreven met behulp van tags.


Wijzigingen in de code worden in het visuele gedeelte niet in realtime weergegeven, maar nadat u op de knop "Renderen" hebt gedrukt.

De editor weet hoe hij moet werken met CSS en JavaScript.

Vulk

Een uiterst eenvoudig in te sluiten HTML-editor van het WYSIWYG-type. Minimale instellingen, lichtgewicht en eenvoud stellen u in staat om het overal toe te voegen, de bronnen worden rechtstreeks gedownload van de website van de ontwikkelaar - alles is in het Russisch.

De bedieningspaneelset bevat alle meest gevraagde functies - eenvoudig maar smaakvol.


Onderaan zijn er tabbladen om de online-editor van de visuele naar de HTML-modus te schakelen.

JSBin

Eenvoudige online editor met twee vensters en ondersteuning voor HTML-, CSS- en JS-code. Aan de linkerkant schrijven we tags en voegen we in gewenste inhoud, en aan de rechterkant kijken we in realtime naar wat hieruit komt. Markering van tags stelt u in staat om de juiste syntaxis bij te houden. Handig om te debuggen Javascripts welk werk niet wordt ondersteund in veel visuele editors.


Overschakelen naar vereist type: code bevindt zich hierboven werkgebied.

Professionele tools voor webontwikkeling

Met deze editor kun je niet alleen met HTML-code werken, hij ondersteunt ook een enorme lijst met programmeertalen, waaronder JavaScript, PHP, Perl, Pyton, enz.

Maar belangrijkste kenmerk niet dat. Met Cloud9ide kunnen meerdere programmeurs tegelijkertijd met code werken - in persoonlijk account de toegang wordt opengesteld voor een bepaalde kring van specialisten. In dit verband is registratie vereist.


De editor markeert visueel de code-elementen, stelt projectdeelnemers in staat om via chat te communiceren - kortom, alles wordt gedaan zoals het hoort.

Deze online editor is qua functionaliteit vergelijkbaar met de hierboven beschreven Cloud9ide, het ondersteunt ook veel talen, je kunt reguliere HTML-code en JS en PHP voor je site programmeren. Hiermee kunt u rechtstreeks verbinding maken met uw hosting via FTP en bestanden rechtstreeks bewerken. De interface is verdeeld in 3 delen: de belangrijkste met de code, aan de linkerkant is er een lijst met bestanden, aan de rechterkant voorbeeld resultaat.


Ondersteund werken met Dropbox en Google Drive.

Alle tags in de code zijn voor de duidelijkheid gemarkeerd. Er is een automatische levering van afsluitende tags, automatische aanvulling van gegevens en markering van niet-gesloten elementen.

Met opmaak kunt u automatisch lelijke codegebieden "kammen" door inspringingen en regeleinden toe te voegen.

Er is een korte video-instructie voor deze HTML-editor, ik denk dat het niet overbodig is om het te geven:

Service voor het "kammen" van de Dirty Markup-code

Deze service kan niet worden geclassificeerd als online editors, hoewel u hiermee behoorlijk efficiënt met HTML-, JS- en CSS-code kunt werken, maar visuele modus het is niet voorzien. De taak van de tool is om de code op te schonen - van elke onhandige set tags die willekeurig in het document zijn ingevoerd, maakt Dirty Markup een gemakkelijk te lezen gestructureerde code, waarbij elke logisch element en het blok is gemakkelijk te lezen en te begrijpen.

De service is bijvoorbeeld handig om de leesbaarheid te herstellen van bestanden die zijn gecomprimeerd voor optimalisatie en die zijn gemaakt met het doel of om het werk van een incompetente programmeur te corrigeren.

De screenshots hieronder tonen twee codes die 100% identiek zijn, de ene is geoptimaliseerd en onmogelijk te begrijpen, de andere is gemakkelijk door mensen leesbaar.



Hier is zo'n bruikbaar gereedschap- kan erg handig zijn als u wijzigingen wilt aanbrengen in een eerder geoptimaliseerde site.

Hopelijk vandaag gegeven HTML-lijst online editors helpen u efficiënter aan uw projecten te werken en nieuwe hoogten te bereiken. En bij deze neem ik afscheid van iedereen.

Handige artikelen:



  • Emoticons voor VK - codes van verborgen emoticons, zoals ...


  • Hoe u online geld kunt verdienen voor een beginner - 23 ...

We weten allemaal dat de naam HTML-taal komt van HyperText Markup Language, wat betekent - taal hypertekst opmaak... De terminologie van de opmaaktaal suggereert dat het zo is: Tekstdocument met aanduidingen van kopjes, lijsten en andere highlights in de tekst. De overgrote meerderheid van de sites die u kunt vinden in World Wide Web zijn geschreven in HTML. Informatie wordt van de server naar de browser verzonden met behulp van speciale protocollen en onder voorwaarde van compressie. Uit de geschiedenis is ook bekend dat de taal in 1986-1991 is ontwikkeld door Tim Berners-Lee.
In alle eerlijkheid kan de redacteur dienen gewoon notitieboekje... Maar dit is onhandig, er zijn veel editors met handigere functies (symbolen raden, visuele bewerking, code-accentuering, enz.).
Dus laten we de beste zien HTML-editors:

1e plaats. Sublieme tekst

Eenvoudige, gratis, gebruiksvriendelijke editor andere code... Van de voordelen kan men niet anders dan de aangename interface, het gemak van beheer en: flexibel maatwerk... Een onbetwistbaar pluspunt is ook dat deze editor multiplatform is. Ik vond de functie van meervoudig selecteren en bewerken erg leuk, deze functie is niet beschikbaar in andere editors. Het werkt als volgt: houd Ctrl ingedrukt en na het selecteren van tekstregels worden ze tegelijkertijd bewerkt. Ook in deze editor is er een functie van sneltoetsen voor elke actie. Er zijn nog niet zoveel plug-ins.

2de plaats. Aptana-studio

Deze editor is voornamelijk gemaakt voor de ontwikkeling van webapplicaties, maar werkt ook heel goed met HTML. Aan de positieve kant moet worden opgemerkt dat het uitstekende automatische aanvulling, code-accentuering en een uitstekend projectbeheersysteem heeft. Voor een gratis editor zijn deze functies van onschatbare waarde. Net als Dreamweaver kun je veel plug-ins vinden op de officiële site. Zeker grote keuze plug-ins, opties, instellingen kunnen intimiderend zijn voor een beginner, maar Aptana Studio is een goede keuze als je een handige en functionele HTML-editor nodig hebt.

3de plaats. Kladblok ++

gepositioneerd als gratis editor open source. Goed georganiseerde functies van markeren, automatisch aanvullen van codeblokken, functionaliteit kan worden verhoogd door een groot aantal plug-ins en modules. Ook is deze editor erg snel, zelfs met een groot aantal plug-ins.

4e plaats. Macromedia (Adobe) Dreamweaver

Is een van oudste redacteuren, blijft drijven dankzij de vele functies. Wanneer u dit programma gebruikt, kunt u tegelijkertijd het ontwerp en de code van de pagina bekijken, hints en automatisch aanvullen van tags worden ook gebruikt en HTML-kenmerken... Zoeken en vervangen van symbolen is handig georganiseerd. Op de officiële website van het programma vindt u veel commerciële en niet-commerciële plug-ins voor dit programma.

5e plaats. RJ Teksted

Een ongecompliceerde gratis editor geschreven in 2004 voor besturingssysteem Ramen. Daarin kunt u de markering van de code voor uzelf aanpassen, het automatisch sluiten van tags en aanhalingstekens werkt gedeeltelijk. Er is een behoorlijk aantal nadelen, zowel ernstig als onmerkbaar, bijvoorbeeld nee FTP-client, er is ook geen pick-up van afhankelijke bestanden, geen ondersteuning voor CSS 3, JS, enz.

6e plaats. KompoZer

Het is een van de beste gratis visuele editors die er zijn. U kunt direct zien hoe de pagina eruit zal zien in de browser wanneer deze wordt bewerkt. Ondersteunt alle HTML-elementen. KompoZer is zeker geen betaalde Dreamweaver en gedraagt ​​zich daarnaar. Van de voordelen kan men niet anders dan de ingebouwde CSS-editor en FTP-beheer.

7e plaats. Komodo Bewerken

Dit is een gratis editor die is ontwikkeld op basis van de commerciële Komodo IDE en waarvan het veel functies overneemt. De editor heeft standaard automatische aanvulling, codemarkering. Van de voordelen kan worden opgemerkt: snelle start, handige sneltoetsen. Er is ook een ingebouwd mechanisme voor het installeren van extensies. Het is oorspronkelijk ontwikkeld als een multifunctionele editor.

8e plaats. Vim

Een goede oude editor, ontwikkeld op basis van de oudere Vi die al in 1976 was gemaakt. Je vraagt ​​je af waarom we nog steeds gebruiken wat bijna 40 jaar geleden is gemaakt? Omdat het geweldige prestaties en gebruiksgemak biedt. Natuurlijk moet je heel erg wennen aan deze editor, eerst moet je blind typen beheersen (want zonder Vim is er niets te doen), sneltoetsen leren, waardoor de hoofdbesturing van het programma plaatsvindt.

9e plaats. Fraise

Fraise is een gratis teksteditor met syntaxisaccentuering. Het werd ontwikkeld door Jean-François Moy op basis van Smultron. De voordelen zijn uitstekend blokbeheer, karaktercodering, opgesplitst in 2 vensters en nog veel meer. Maar het grootste nadeel is dat deze editor alleen voor Mac OS bestaat.

10e plaats. PSPad

Universeel tekstverwerker voor Windows-platforms, met een setje handige functies... Een erg leuke functie van het werk van dit programma in de functie van het comprimeren van HTML-code, voor meer snel laden pagina's, ik heb dit niet in andere editors gezien.

Codevisualisatie is al lang geen prioriteit meer voor ontwikkelaars. Dit artikel geeft een lijst van 9 WYSIWYG-editors die voor dit doel worden gebruikt. We raden u aan er vertrouwd mee te raken voor het geval zich een soortgelijke taak voordoet tijdens de uitvoering van uw project.

Wat is de beste redacteur van 2016?

In dit gedeelte van het artikel vindt u enkele geweldige editors die uw werk gemakkelijker en sneller zullen maken. Wat is de beste?

Keuze van de redactie: Atom.io

Er zijn in de loop der jaren veel editors gecreëerd, maar weinigen zijn gebleven hoog niveau of nog beter worden. Atom.io wordt gebruikt door al mijn programmeursvrienden en ik kies het ook.

Als je de beste WYSIWYG HTML-editor wilt die de tijd die je besteedt aan het schrijven of bewerken van code met 10 keer verkort, dan is dit Atom. Probeer het en je zult me ​​dankbaar zijn. Atom.io is gratis en gebouwd door het Github-team.

Een ander lovenswaardig hulpmiddel is Coda, zeer coole redacteur voor Mac-gebruikers... Hij heeft perfecte en mooie interface maar het kost $ 99. dit moment Ik geef de voorkeur aan Atoom!

Nu een overzicht van de rest van de redactie.

1. NicEdit

Demoversie | Downloaden


NicEdit is een alternatief voor meer volumineuze en complexe visuele editors, het is klein van formaat. Het beschikt ook over veel essentiële editorfuncties en deze online WYSIWYG-editor is eenvoudig te integreren in uw website.

2. TinyMCE

Demoversie | Downloaden


TinyMCE is een open source WYSIWYG HTML-editor geschreven in JavaScript. Het is eenvoudig te integreren en eenvoudig aan te passen met thema's en plug-ins. TinyMCE is een van de meer "complete" editors en biedt MSWord-achtige functionaliteit.

3. CKEditor

Demoversie | Downloaden


CKEditor is geupdate versie FCKEditor die voorheen een marktleider was. Het was gebaseerd op de wens om de fouten van FCKEditor te corrigeren. Het resultaat was: visuele editor Met hoge performantie die bewerkingsfuncties biedt die qua niveau vergelijkbaar zijn met MSWord en Open Office.

4. YUI Rich Text-editor

Demoversie | Downloaden


WYSIWYG-editor voor YUI Rich-website is een interfacebesturing van Yahoo, het transformeert een eenvoudige tekstpaneel in een volledig functionele WYSIWYG-editor. De tool is er in verschillende versies van verschillende moeilijkheidsgraden en met verschillende functies, maar in elk van hen slagen de auteurs erin een uitstekende ergonomie te bereiken ( zonder de wirwar van knoppen die de interface vervuilen).

5. MarkItUp!

Demoversie | Downloaden


Markitup is een jQuery-plug-in waarmee u tekstgebieden kunt omzetten in opmaakeditors naar keuze. HTML-syntaxis, Wiki en BBcode zijn slechts enkele van de ondersteunde opties. Markitup is geen WYSIWYG-editor, maar dat betekent niet dat het niet alle functies biedt die je nodig hebt. Het is ook compact en gemakkelijk te gebruiken.

6. FreeTextBox

Demoversie | Downloaden


FreeTextBox is een online WYSIWYG HTML-editor die speciaal is ontworpen voor ASP.NET. De editor lijkt erg op: Microsoft Word... V gratis versie verschillende geavanceerde functies zijn niet geïmplementeerd, maar de beschikbare set is meer dan genoeg voor een volwaardig werk.

7. MooBewerkbaar

Demoversie | Downloaden


MooEditable biedt eenvoudige maar krachtige functionaliteit op basis van een goed geschreven JavaScript-bibliotheek. Als je een fan bent van Mootools, zou je hier geen problemen mee moeten hebben.

8. OpenWysiwyg

Demoversie | Downloaden


OpenWYSIWYG is een cross-browser, eenvoudige WYSIWYG-editor met alles essentiële functies... Hij heeft een mooie gebruikersomgeving die pop-upelementen en knoppen bevat. Een van zijn onderscheidende kenmerken is kwalitatief voltooid werk met tafels. Tegelijkertijd, in Google chrome OpenWYSIWYG wordt nog steeds niet ondersteund.

9.jHtmlArea

Demoversie | Downloaden


jHtmlArea is een andere WYSIWYG-editor die is ontworpen als een plug-in voor de populaire jQuery-bibliotheken... Het is gemakkelijk te gebruiken en bevat alleen de meest essentiële opties. Dit maakt het heel eenvoudig om alle componenten aan te passen, van verschijning naar de tong.

Er zijn veel functies in HTML-editors, maar ze zijn misschien niet allemaal nuttig voor u. We hebben alleen de meest essentiële overgelaten. Onderstaande tabel toont de belangrijkste functies van de visuele editor die wij zelf gebruiken en die u zeker nodig zult hebben. We vertellen je niet alleen wat voor jou handig is, maar ook waarom.

Hoofdfuncties

Tabel met de belangrijkste kenmerken van de dienst. Een pictogram wordt weergegeven in de linkerkolom, de naam van de functie staat in het midden en de beschrijving ervan staat rechts.

Tekstopmaak
Formaat...Markering van tekstkop (h1-tag), subkoppen (h2-tag), niveau 3-subkoppen (h3-tag) en platte tekst (standaard gebruikt) (P-tag). De opgegeven opmaak heeft een sterke impact op de paginapromotie in zoekmachines Oh. Daarom wordt het niet aanbevolen om andere soorten opmaak te gebruiken die beschikbaar zijn in deze functie.
StoutmoedigEen tekstfragment vet markeren (sterke tag). De belangrijkste zinnen, zinnen of hele alinea's moeten vetgedrukt worden gemarkeerd. De sterke tag wordt door zoekmachines gebruikt bij het rangschikken van een site, maar de impact ervan is niet zo sterk als die van koppen.
Genummerde lijstCreatie van genummerde lijsten (ol, li-tags). Dergelijke lijsten moeten in de eerste plaats voor het gemak van de lezer worden gemaakt, wat een positief effect zal hebben op gedragsfactoren.
Lijst met opsommingstekenscreatie lijsten met opsommingstekens(tags ul, li). In tegenstelling tot genummerde lijsten is de volgorde van de items hier niet relevant.
CitaatWe markeren een stukje tekst als quote (blockquote tag). De blockquote-tag moet tekst bevatten die is geleend van andere bronnen.
KoppelingVoeg een hyperlink in naar een andere site of sitepagina (een tag). Helpt lezers om meer informatie te krijgen wanneer ze op een link klikken. En zoekmachines verhogen de positie van de pagina waarnaar de link leidt.
AfbeeldingVoeg een afbeelding in. De afbeelding moet eerst naar internet worden geüpload en een adres hebben. U moet "Alt-tekst" opgeven in het dialoogvenster.
tafelEen tabel invoegen. Als de tekst gestructureerde gegevens bevat, is het beter om deze in de vorm van een tabel te presenteren.
Speciaal karakterVoeg tekens in die niet beschikbaar zijn op het standaardtoetsenbord.
Bijvoorbeeld: ®, ™, ¥, ½.

En het is alles? Waarom zijn er zo weinig functies?

De HTML-code is zeer rijk aan functies en u kunt er bijna alles aan toevoegen. De vraag rijst alleen, is het echt nodig?

Bijvoorbeeld dingen als formulieren ( formulier tag), tekstveld, selectievakje, keuzerondje (invoertag) enzovoort kunnen op de site staan ​​als ze maar adequaat communiceren met de "engine" van de site. Dat wil zeggen, om de voor hen bestemde functie uit te voeren: een opmerking achterlaten, stemmen, enz. En dit vereist programmeervaardigheden. V anders deze functionaliteit zal alleen gebruikers misleiden en ergernis veroorzaken bij het gebruik van uw site.

Als u, naast het bovenstaande, uw tekst wilt verfraaien met ontwerpelementen als:

  • verschillende lettertypen,
  • veelkleurige lijnen,
  • grote letters,
  • tekstuitlijning is niet standaard,
  • richting van de tekst van rechts naar links,
  • emoticons,
  • en andere designer-lekkernijen.

Dan verandert zo'n tekst je site in kerstboom die alleen uw familie en vrienden zal verrukken. Veel populaire sites maken niet optimaal gebruik van HTML's opmaakmogelijkheden voor rijke inhoud.

De mogelijkheden van onze service zullen u helpen om uw artikel zo te ontwerpen dat het het vertrouwen van zowel de lezers als de zoekmachines wekt. Als je echt wilt markeren specifieke site tekst met een andere stijl, is het beter om dit te doen met behulp van het bestand style.css.

WYSIWYG html online-editor

Onze html-editor heeft de eigenschap WYSIWYG, het woord is een afkorting uit het Engels. W hoed ja ou S ee I s W hoed ja ou G et, letterlijk vertaald "wat je ziet is wat je krijgt." Met deze eigenschap kunt u tijdens het bewerkingsproces de inhoud van het materiaal zo dicht mogelijk weergeven bij wat u op uw site krijgt wanneer u het fragment invoegt dat is ontvangen van de "bron" (knop) HTML code A.

Wees wijs - speel normale spellen !!!

- Combinatie van strategie en RPG;
- Coole graphics in Full HD zonder remmen;
- Grote wereld, absolute vrijheid;
- Royale geschenken voor nieuwe spelers.

Houd er echter rekening mee dat uw site stijlen heeft voor verschillende tekstelementen (koppen, lijsten, alinea's, afbeeldingen). Meestal worden deze stijlen opgeslagen in het bestand style.css. Zonder dit bestand te koppelen, dus zonder de resulterende html-code op uw site te plaatsen, kunt u niet 100% zeker zijn van de betrouwbaarheid van het zichtbare resultaat. Deze verklaring geldt voor alle visuele code-editors.

Word naar html conversie

Onze service kan worden gebruikt om tekst te converteren van word bestand v html-formaat... Om dit te doen, moet u het benodigde fragment uit Word kopiëren en door op de knop "Plakken uit Word" op onze service te klikken, plakt u het gekopieerde fragment in het dialoogvenster dat verschijnt.

In tegenstelling tot andere vergelijkbare converters, reinigt onze service woordopmaak laat alleen het essentiële achter:

  • Tekstkop (h1-tag).
  • Ondertitel (h2, h3-tags).
  • Paragraaf / platte tekst (P-tag).
  • Vet lettertype (sterke tag).
  • Genummerde lijst (ol, li-tags).
  • Lijst met opsommingstekens (tags ul, li).
  • Cursief (em-tag).
  • Link (tag a).
  • Tafel.
  • Speciaal karakter.

Dat wil zeggen, u hoeft praktisch geen onnodige html-code uit uw materiaal te verwijderen. Het is voldoende om de tekst correct op te maken in Word-editor, converteer het naar html-formaat met behulp van onze service en u krijgt onmiddellijk het eindresultaat.

Elke webdesigner en codeur heeft een goede webpagina-editor nodig om HTML, CSS en te maken en te bewerken JavaScript-code... Kladblok (Windows) en Teksteditor (Mac) zijn geweldige hulpmiddelen om u op weg te helpen, maar naarmate u meer ervaring opdoet, wilt u een steviger en handiger hulpmiddel gebruiken.

Er zijn honderden geweldige editors om uit te kiezen, maar velen van hen zijn betaald. En als u het auteursrecht niet wilt schenden en het budget geen geld heeft voor de aankoop commercieel product? Dit artikel onderzoekt enkele geweldige gratis editors.

  • WYSIWYG-editors. Deze grafische editor waarmee u de paginalay-out kunt bouwen en stijlen visueel kunt instellen, zoals in het bekende tekstverwerker MS-Word. Zij zijn handig hulpmiddel om een ​​pagina-ontwerp te bouwen, hoewel, zoals elke ervaren webdesigner weet, de code nog steeds moet worden "gekamd" om een ​​uitstekend resultaat te bereiken.
  • Tekst redacteuren. Het is een hulpmiddel voor het rechtstreeks bewerken van HTML- en CSS-code. Sommige editors zijn bedoeld voor algemene doeleinden en dat doen ze niet speciale opties ondersteuning voor webcodes. Anderen zijn gespecialiseerd in het gebruik van webtalen zoals HTML, CSS, JavaScript en PHP, en hebben ingebouwde eigenschappen voor: snelle invoer HTML-tags, CSS-eigenschappen, enzovoort. Met veel van deze editors kunt u een webpagina bekijken in apart venster.

KompoZer (Windows, Mac, Linux)

KompoZer is een goede keuze als je een visuele editor nodig hebt met een krap budget

Komodo Bewerken - goede redacteur, gemakkelijk te leren en toch krachtig en uitbreidbaar

Hoewel het een redacteur is algemeen doel, het ondersteunt HTML en CSS, en heeft de contextuele autocomplete eigenschap van HTML-tags en CSS-eigenschappen evenals een verzameling code-inserts voor verschillende HTML-elementen... Om het meeste uit Komodo te halen, moet je de HTML Toolkit-extensie installeren, die geweldige functies bevat zoals automatisch sluiten van tags, CSS-preview en een tijdelijke tekstgenerator.

Met Komodo Edit kunt u de bewerkte pagina's in elke geïnstalleerde browser, of gebruik de ingebouwde browser in een apart venster, zodat u het resultaat van de wijzigingen kunt bewerken en tegelijkertijd kunt zien.

De editor heeft een ingebouwde functie voor het uploaden van bestanden naar de site (FTP, FTPS, SFTP of SCP), en je kunt je bestanden ook netjes groeperen met behulp van de projectmanager-optie.

Zeer handige functie Code> Selecteer Blok... Het markeert het huidige HTML-hoofdblok, bijvoorbeeld het huidige gesloten div-element of ul. Heel handige functie: wanneer u een hele sectie op de pagina moet selecteren om te kopiëren of te verplaatsen.

Er zijn zoveel krachtige en handige functies in Komodo Edit, zoals het gebruik van normale uitdrukkingen vinden / vervangen, het vermogen om te presteren externe teams, enzovoort. Gelukkig heeft de redacteur ook goede help systeem wat het gemakkelijk maakt om de volledige kracht van Komodo Edit onder de knie te krijgen.

Aptana Studio (Windows, Mac, Linux)

Aptana Studio is een volledig geïntegreerde ontwikkelomgeving voor webapplicaties met een breed scala aan plug-ins. Hoewel je het alleen kunt gebruiken als een HTML / CSS / JavaScript-code-editor

Notepad ++ is een geweldige vervanging voor Notepad van Windows. Hoewel het niet dezelfde set opties heeft als andere editors, is het geweldig voor het bewerken van HTML, CSS, JavaScript en andere codebestanden.

PSPad is een andere algemene editor voor Windows met veel functies die handig zijn voor HTML- en CSS-codeerders

jEdit is een platformonafhankelijke teksteditor met krachtige macro-opdrachten en plug-ins. Installeer de XML-plug-in als u webpagina's moet bewerken

TextWrangler is een lichtgewicht editor voor algemene doeleinden. Ondanks de afwezigheid speciale functies voor webontwikkeling kan het worden gebruikt om met webpagina's te werken.

Vim is zeker moeilijk om te leren, maar als je er doorheen komt, wil je nooit meer terug!

De grootvader van teksteditors voor programmeurs Vim (een directe afstammeling van de vi-editor) is een console-teksteditor met open source... Het wordt door de standaardeditor geïnstalleerd op bijna alle smaken van Unix, inclusief Linux en Mac OS X. De editor is ook beschikbaar voor gebruik op Windows en vele andere systemen.

Vim is geen systeem dat je meteen kunt installeren en gebruiken zonder er ooit mee te maken te hebben. De meeste bewerkingscommando's bevatten oneven combinaties zoals wq en /. Het heeft ook drie bewerkingsmodi: modus tussenvoegsels waarin de tekst wordt ingevoerd; visueel modus voor het selecteren van tekst; en opdracht modus voor het invoeren van opdrachten. Deze functionaliteit is een erfenis van Unix uit de tijd dat er geen vensters of muis waren.

Waarom staat hij op de lijst? Als je het eenmaal onder de knie hebt, zul je overtuigd zijn van zijn snelheid en kracht. Met een paar commando's kun je iets doen in seconden dat minuten kan duren in andere editors.

bestaat een groot aantal van macro's en plug-ins voor Vim die het gemakkelijk maken om met HTML-, CSS- en JavaScript-code te werken, inclusief syntaxisaccentuering, automatisch aanvullen, HTML Tidy en browservoorbeeld. Hier grote lijst handige links:

  • Vim Omni automatisch aanvullen
  • HTML / XHTML-bewerking in Vim
  • Startpagina

Fraise (Mac)

Fraise is een intuïtieve editor voor Mac, met genoeg functies voor webbewerking

Net als TextWrangler en gedit is Fraise een prachtige lichtgewicht editor die een plezier is om te gebruiken. Het is een vork van de redacteur. Het is relatief nieuw en heeft geen goede webserver. Het wordt momenteel alleen ondersteund op Mac OS X 10.6 ( Sneeuwluipaard), dat wil zeggen, als u versie 10.5 gebruikt, moet u Smultron downloaden.

Fraise heeft een aantal geweldige webbewerkingsopties:

  • Codemarkering voor HTML, CSS, JavaScript, PHP en verschillende andere programmeertalen.
  • Sluit tag (Command-T) om de huidige tag te sluiten. Dit scheelt echt tijd bij het invoeren van lijsten.
  • Handig ingebouwd browservoorbeeld (met WebKit), met zeer handige optie Live Update? die de browser ververst zodra de opmaak en CSS zijn gewijzigd op de pagina die wordt bewerkt.
  • Geavanceerde zoekoptie die zoeken / vervangen ondersteunt met behulp van reguliere expressies.
  • Blokkeer ondersteuning voor snelle invoer HTML-tags en CSS-eigenschappen.
  • Enkele handige commando's voor het manipuleren van tekst, zoals het valideren van HTML en het converteren van karakters naar HTML-elementen.

Fraise is het ontdekken waard als je op een Mac werkt en een handige editor wilt met meer opties dan de ingebouwde Teksteditor.