De beste realtime online HTML-editorsoftwarekit met dynamische, directe live visuele preview en inline WYSIWYG-editor met behulp van CKEditor en de functie voor het opschonen van markeringen. Bevat een HTML-viewer, editor, compressor, verfraaiing en eenvoudige formatter. Met deze tool is het onmogelijk om ongeldige code te maken.

Hoe gebruik je de HTML-editor?

Activeer automatisch scrollen. De twee editors scrollen samen als deze optie is ingeschakeld.

Pas de lettergrootte aan volgens uw voorkeuren.

Voer alle opties uit die zijn aangevinkt in de instellingen (zie tandwielpictogram hierboven).

Andere belangrijke bewerkingsfuncties

U kunt deze HTML-editorfuncties uitproberen om te oefenen en uw codeerefficiëntie te maximaliseren.

• Documentomzetter- Om een ​​visueel document zoals Excel, PDF, Word naar HTML te converteren, plakt u het document in de visuele editor en de opmaak verschijnt direct aan de rechterkant.
• Online teksteditor- Stel documenten samen, net als in een rich text-editor. Gebruik het bedieningspaneel om afbeeldingen, tabellen, kopjes, lijsten en andere items aan uw document toe te voegen.
• Kopieer en plak- De editor staat niet toe dat u de documenten opslaat. Hiervoor moet u de gegenereerde code naar een leeg tekstbestand kopiëren en de extensie ervan wijzigen in .html en open het in a webbrowser.
• Werk met tabellen- Met behulp van het WYSIWYG-editorpaneel kunt u in slechts 2 klikken een tabel van elke dimensie maken. Er is een opschoonoptie om ze naar opgemaakte DIV-tags te converteren.
• Ongedaan maken- Beide editors hebben deze functie waarmee u het document kunt terugzetten naar een eerdere staat, dwz. vóór de er is schoongemaakt.
• Interactieve demo- Volg een rondleiding in vier stappen door de functies en klik op de knop Snelle rondleiding menu-item. Leer hoe u de editor gebruikt en experimenteer met de demotekst.

Vergeet nooit:

• Maak een back-up voordat u deze tool gebruikt, zodat u altijd kunt terugkeren naar uw originele document.
• Controleer altijd uw code voordat u deze op een live website publiceert.
• Deze editor bewaart of verzendt uw document nooit; alle bewerkingen worden uitgevoerd op uw lokale computer.
• Zoals de meeste websites maakt ook deze gebruik van cookies.

Styling van div-tabellen

Zorg ervoor dat u de onderstaande CSS-code toepast wanneer u tabellen publiceert die zijn geconverteerd naar div-elementen. Probeer de interactieve online tabelstyler die rasters kan genereren uit zowel div- als tabelelementen. Deze worden beide ondersteund door deze editor.

Houd er rekening mee dat de door ons gebruikte klassenamen enigszins afwijken van de namen die door DivTable.com worden gebruikt.

.rTable (weergave: tabel; breedte: 100 % ;) .rTableRow (weergave: tabelrij; ) .rTableHeading ( achtergrondkleur: #ddd; weergave: tabelkopgroep; ) .rTableCell , .rTableHead (weergave: tabelcel; opvulling: 3 px 10px; rand: 1 px effen #999999; ) .rTableHeading (weergave: tabelkopgroep; achtergrondkleur: #ddd; lettertypegewicht: vet; ) .rTableFoot (weergave: tabelvoettekstgroep; lettertypegewicht: vet; achtergrondkleur: #ddd; ) .rTableBody (weergave: tabel-rij-groep; )

Klik en kopieer de code uit het onderstaande veld: .rTable (weergave: tabel; breedte: 100%;) .rTableRow (weergave: tabelrij; ) .rTableHeading ( achtergrondkleur: #ddd; weergave: tabelkopgroep ; ) .rTableCell, .rTableHead (weergave: tabelcel; opvulling: 3px 10px; rand: 1px effen #999999; ) .rTableHeading (weergave: tabelkopgroep; achtergrondkleur: #ddd; lettertypegewicht: vetgedrukt ; ) .rTableFoot (weergave: tabelvoettekstgroep; lettertypegewicht: vet; achtergrondkleur: #ddd; ) .rTableBody (weergave: tabelrijgroep; )

Een HTML-editor is het eerste dat u nodig heeft om webpagina's te maken met HTML en CSS. Er zijn veel gratis HTML-editors beschikbaar, en het kiezen ervan kan een hele klus zijn.

HTML is vrij eenvoudig en u kunt dus aan uw webpagina's gaan werken met een eenvoudige teksteditor zoals Kladblok, WordPad of een andere. Je kunt ook verder gaan en een van de meer feature-rijke editors gebruiken, zoals Coffecup, Notepad++, Brackets, Notetab of BlueGriffon. Het voordeel van het gebruik van geavanceerdere en functionele editors in wat je krijgt meer gereedschap, wat het proces van het markeren en creëren van inhoud aanzienlijk kan versnellen.

Of u nu blogs en artikelen wilt maken die goed zijn opgemaakt voor browsers om te lezen, of van plan bent een volledig functionele website te bouwen met HTML en CSS, het kiezen van de juiste editor zal uw productiviteit aanzienlijk verbeteren. Professionele ontwikkelaars webpagina's besteden een aanzienlijke hoeveelheid tijd aan het kiezen van de editor en de bijbehorende tools op de best mogelijke manier aan hun behoeften voldoen en de productiviteit verhogen.

Welke gratis HTML-editor is geschikt voor u?

Het antwoord op deze vraag hangt volledig af van uw vereisten, van het product dat u met HTML wilt maken, van uw huidige niveau kennis van deze opmaaktaal als u alleen maar wilt leren. Omdat de meeste van deze editors gratis zijn, kunt u de lijst beperken tot twee of drie, hun basisfunctionaliteit uitproberen en vervolgens beslissen welke u het beste bevalt.

Bovendien wordt bijna elke in dit artikel genoemde editor ondersteund op meerdere besturingssystemen, waaronder Windows, Linux en Mac, zodat u zich niet al te veel zorgen hoeft te maken over compatibiliteit.

Houd er rekening mee dat aan de meeste van uw bewerkingsbehoeften eenvoudig kan worden voldaan door Notepad++ voor Windows, Brackets voor Mac (deze editor wordt ook ondersteund voor Linux en Windows), of Coffecup en Notetab. Als u echter van plan bent een complexe website te maken, kunt u het beste kiezen voor een volledig uitgeruste ontwikkelomgeving zoals Eclipse.

Aan de andere kant, als je gewoon met HTML en CSS wilt spelen, zijn er talloze online editors waar je HTML-code kunt schrijven en meteen de resultaten kunt zien.

Laten we eens kijken naar de tien beste HTML-editors die gemakkelijk te gebruiken, rijk aan functionaliteit en populair zijn onder webontwikkelaars.

1. Notepad++ (beste gratis HTML-editor voor Windows)

kladblok-plus-plus.org

Deze editor is alleen beschikbaar Windows-gebruikers, dus als je een Mac of Linux hebt, scroll dan verder. Notepad++ is de beste gratis HTML-editor die u op uw Windows-computer kunt installeren. Op het eerste gezicht is het erg eenvoudig, maar het is een van de meest complexe en tegelijkertijd gemakkelijk te gebruiken editors.

De meeste enorm Kladblok-functies++ wordt geleverd door plug-ins van derden, waaronder PreviewHTML, HTML-tagplug-in voor het markeren van tags, Tidy2 voor inspringen en vele andere.

De belangrijkste kenmerken van Notepad++ zijn een interface in tabelvorm waarmee u tegelijkertijd met meerdere bestanden kunt werken, zeer eenvoudig inklappen en accentueren van de syntaxis, aanpasbare GUI (met een minimalistische optie), tabellen met een sluitknop, verticale tabellen, meertalig (dat wil zeggen dat u de interface kunt configureren in het Engels, Frans, Spaans en Chinees, evenals 80 andere talen).

Notepad++ is ontwikkeld door Dong Ho en uitgebracht in 2003. Het is gratis voor zowel persoonlijk als commercieel gebruik en valt onder de GNU General Public License.

Uitstekend geschikt voor Mac-gebruikers alternatief voor Kladblok++ is haakjes, waar we het hierna over zullen hebben.

2. Beugels (gratis voor Mac, Windows en Linux)

Brackets is een ander populair en betrouwbaar hulpmiddel voor webontwikkeling en het bewerken van HTML-code. In tegenstelling tot Notepad++ wordt deze editor ondersteund voor Mac, Ubuntu, Debian en Windows. En het is ook gratis voor persoonlijke en commercieel gebruik(MIT-licentie).

Brackets is gemakkelijk te gebruiken en heeft veel uitbreidingen die de functionaliteit ervan verbeteren. Populaire extensies:

• Emmet – versnelt het schrijven van CSS- en HTML-code;
• Verfraaien – formatteert HTML-, CSS- en JavaScript-bestanden;
• W3C-validatie – controleert uw HTML-code op geldigheid.

Brackets is een prachtige editor met een modern, minimalistisch ontwerp. Wijzigingen in de code worden onmiddellijk weergegeven in de browser. U kunt CSS- of HTML-code bewerken en in realtime zien hoe deze het uiterlijk van uw site veranderen.

Lees hier over haakjes – Editor voor HTML: haakjes

3. Coffecup (er is zowel een gratis als betaalde versie)

Coffecup is misschien wel de beste HTML-editor, met zowel gratis als commerciële versie. De gratis versie mist enkele functies, maar is complex genoeg om op onze lijst te staan.

NAAR belangrijkste functies De gratis versie bevat:

• aanpasbare werkbalken,
• codeaanvulling voor elementen, attributen en selectors,
• kant-en-klare thema's en sjablonen,
• ondersteuning voor markdown-formaat voor HTML,
• FTP/SFTP-ondersteuning,
• drag-and-place-functie voor afbeeldingen,
• voorbeeldoptie,
• syntaxisaccentuering,
• een thesaurus om alternatieven voor een woord te vinden en nog veel meer.

De betaalde versie is niet te duur. Het bevat verschillende extra functies, zoals HTML- en CSS-codevalidatie, tagbibliotheek, codeopschoner en dynamische spellingcontrole.

Coffecup biedt ook verschillende geavanceerde modules om mobielvriendelijk te werken, zonder dat u code hoeft te schrijven, gewoon met behulp van sleepfuncties en laten vallen. Deze modules omvatten Foundation Framer, Bootstrap Builder en Responsive Site Designer.

Coffecup is sinds 1996 op de markt en wordt gebruikt door freelancers, startups, kleine bedrijven, maar ook door webontwikkelaars van grote bedrijven. Dit is een geweldig hulpmiddel voor het maken van websites, webpagina's, nieuwsbrieven, notities opgemaakt in HTML en inhoud voor sociale media.

4. NoteTab (twee versies, betaald en gratis)

NoteTab is een andere editor voor HTML en CSS die functies biedt voor snelle ontwikkeling. Dit is een product van Fookes-software, die de afgelopen 20 jaar heeft gewerkt aan tools om het ontwikkelingsproces te versnellen.

De populariteit van NoteTab wordt bevestigd door het feit dat het wordt gebruikt door NASA, FBU, VISA, CIA Hewlett Packard, MIT.

NoteTab heeft drie versies: Light, Standard en Pro. De Light-versie wordt gratis verspreid voor individueel gebruik. Het heeft niet alle functies van de Pro-versie, maar het ondersteunt HTML5- en CSS3-bibliotheken, bootstrap, HTML automatisch aanvullen, bestanden samenvoegen in projecten, HTML Tidy-ondersteuning, HTML naar tekst, en heeft ook veel thema's.

NoteTab kan rechtstreeks vanaf een flashstation worden gestart en vereist geen installatie op uw computer. Voor bloggers en mensen die betrokken zijn bij website-inhoud ondersteunt deze editor het aantal woorden en SEO-statistieken.

U kunt NoteTab beter leren kennen op de officiële website.

5. Eclipse (gratis HTML-editor)

Eclipse is zwaar en misschien overdreven voor HTML- en CSS-ontwikkeling, maar het kan met succes worden gebruikt als je het niet erg vindt om het beest te installeren en te configureren. Dit geweldig hulpmiddel, als u van plan bent complexe sites te maken met databases in combinatie met andere gegevensbronnen, enz. De installatie kan enige tijd duren en vereist de installatie van extra plug-ins.

Eclipse is de meest populaire open source geïntegreerde ontwikkelomgeving broncode. Deze editor wordt vaak gebruikt voor Java, JavaScript, PHP, Ruby, Android en vele andere programmeertalen.

Meer informatie vindt u hier –

6. HTML-Online

Als het gaat om het online bewerken van HTML-code, in uw browser, gaat er niets boven HTML-online.com. U kunt het codeerproces meteen starten, zonder software te downloaden of te installeren, en het is gratis.

Een van de voordelen van deze editor is Woordconversie naar HTML, zodat u uw inhoud uit Microsoft Word-bestanden kunt kopiëren en er automatisch HTML-markeringen op kunt toepassen. Er is ook steun Google-documenten, PDF, Excel, PowerPoint en vele andere soorten documenten.

Dit is een betrouwbare visuele editor waarmee u uw webpagina kunt maken en tegelijkertijd de codewijzigingen in het aangrenzende venster kunt volgen. Andere functies die het vermelden waard zijn, zijn onder meer het opschonen van HTML-code, het casten van tabelelementen naar div's en een zoek- en vervangoptie.

7. BlueGriffon (gratis, basis- en EPUB-licentie)

BlueGriffon komt uit het huis van “Disruptive Innovations SAS”. Het is gebouwd op Gecko, de webrendering-engine van Mozilla. BlueGriffon is een krachtige editor die de meeste functies van Netscape, Composer, Nvu en Mozilla overneemt.

BlueGriffon heeft drie varianten, waarvan de eerste gratis is, de tweede wordt gedistribueerd onder een basislicentie en de krachtigste onder een EPUB-licentie.

Demon betaalde versie kan ook heel veel. Het heeft zwarte en lichte thema's, ondersteuning voor audio-, video- en HTML5-formulieren, CSS3-bewerkingsfuncties omvatten overgangen, 3D- en 2D-transformaties, SVG-creatie, WYSIWYG-technologie, Google-lettertypen beheerder, beheerder lettertypen eekhoorn, ondersteuning voor markdown-indeling, gebruikersinterface in meer dan 20 talen.

Je kunt BlueGriffon downloaden en installeren op Windows, Linux Ubuntu en OS X op je Mac. Meer informatie vindt u op de website -

8. Emacs met plug-ins

www.gnu.org

Emacs is een van de meest geliefde editors aller tijden. Het is gratis te gebruiken (GNU-licentie). Emacs is een code-editor voor algemene doeleinden die u kunt aanpassen aan uw behoeften. Door vrij verspreide plug-ins met elkaar te verbinden, wordt het een krachtige code-editor met rijke functionaliteit.

Als het gaat om HTML-bewerking, biedt Emacs een HTML-modus die het bewerken van code heel eenvoudig maakt. Lees hier meer – Emacs

9. Atoom

atom.io

Atom is een configureerbare teksteditor van GitHub-ontwikkelaars. De populariteit groeit zeer snel. Deze editor is gratis voor zowel persoonlijk als commercieel gebruik (MIT-licentie). De ontwikkelaarsgemeenschap is voortdurend op zoek om de editor te verrijken met nieuwe functies.

Hoe verander ik Atom in een gratis HTML-editor?

Atom wordt met alles geleverd basisfuncties nodig om de code te bewerken, maar om er een volledig functionele HTML-editor van te maken, moet u deze installeren extra pakketten. Deze omvatten Emmet, atom-html-preview, Autocomplete-plus, Atom-color-highlight, Autocomplete-CSS, linter, minimap, haml en jade.

Atom wordt ondersteund voor Windows, Ubuntu ( Debian Linux), Fedora (vanaf versie 22), Mac en Red Hoed Linux. Het is geschikter voor webontwikkeling dan voor het schrijven van inhoud, omdat het meer codegericht is en weinig maatwerk vereist.

10. Visual Studio-gemeenschap

Visual Studio Community is een volledig functionele ontwikkelomgeving van Microsoft en is gratis voor iedereen. Visual studio biedt vooraf geconfigureerde HTML- en CSS-bewerkingsfuncties die verder kunnen worden uitgebreid met extensies.

Populaire extensies die het vermelden waard zijn zijn HTML Snippets, HTMLHint, HTML CSS-ondersteuning, Intellisense for CSS-klasse naam.

Net als Eclipse is de Visual Studio-community een uitstekende keuze voor complexe, zeer schaalbare sites die veel technologieën vereisen.

Conclusie

Taal HTML-opmaak overal gebruikt. Er zijn veel HTML-editors die lang geleden zijn gemaakt, maar toch met de tijd meegaan en redelijk geschikt zijn voor webontwikkeling. Maar er zijn er ook die het niet langer aan functionaliteit en productiviteit ontberen. Er zijn nieuwe editors in opkomst, zoals Brackets en Atom, die efficiënte codebewerking mogelijk maken.

De meeste van de in dit artikel genoemde editors hebben hun eigen kenmerken, maar dienen één doel: webpagina's maken. Ze verhogen de ontwikkelingssnelheid en helpen bij het organiseren van code, terwijl ze rekening houden met de mogelijkheid om deze te schalen.

Bekijk de opties die in dit artikel worden genoemd, noteer uw belangrijkste behoeften, beperk de lijst tot een paar editors, probeer ze allemaal en kijk welke u het beste bevalt. Je zult waarschijnlijk minstens één goede HTML-editor vinden voor Linux, Mac en Windows.

Als je websites wilt ontwikkelen, heb je een HTML-editor nodig. Natuurlijk kunt u een gewoon notitieblok gebruiken, maar het is onwaarschijnlijk dat dit handig is. Het is belangrijk om dat op te merken HTML-editor je moet er twee doen belangrijke taken, dit is codeaccentuering en automatische aanvulling. Uiteraard zijn ook extra functies welkom, bijvoorbeeld diverse designthema's. Er zijn veel van dergelijke extra functies. Laten we er nu een paar bekijken gratis redacteuren HTML, die uitstekend werk leveren met de hierboven genoemde taken.

Gratis code-editor - Kladblok voor programmeurs

Deze redacteur biedt moderne interface, die in twee soorten verkrijgbaar is, licht en donker. Bovendien is de syntaxisaccentuering erg goed en is het kleurenschema goed gekozen. Ik denk dat deze editor aan al je eisen zal voldoen.

HTML-editor - SynWrite

SynWrite is coole redacteur met een breed scala aan mogelijkheden. Het idee van deze editor was om alle voordelen van andere HTML-editors te combineren in één kwalitatief hoogstaand product. De functionaliteit kan aanzienlijk worden uitgebreid met behulp van extra plug-ins geschreven in Python. Naast de standaardfuncties kunt u met SynWrite direct meerdere stukjes code tegelijk bewerken:

Deze functie bespaart u veel tijd.

Gratis HTML-editor - PlainEdit.NET

Deze editor kan meerdere bestanden tegelijk openen en er kunnen plug-ins worden toegevoegd die de functies van de editor aanzienlijk uitbreiden, inclusief ontwerpthema's. Bovendien kunt u tekst toevoegen en wijzigen met reguliere expressies, zelfs in documenten die momenteel niet zijn geopend. Het is vermeldenswaard dat PlainEdit ook vanaf een USB-station kan werken.

Kladblok++

Deze editor is een klassieker. Het is erg populair over de hele wereld. Notepad++ heeft alles wat een teksteditor zou moeten hebben. De interface kan worden aangepast aan uw wensen, en gratis plug-ins helpen de functionaliteit van de editor uit te breiden.

Gratis editor - jEdit

Met deze editor kun je vrijwel elk bestand openen en bewerken. Het vereenvoudigt de taak van het tegelijkertijd openen van meerdere bestanden aanzienlijk. Eventuele ontbrekende functies kunnen worden aangevuld met behulp van verschillende plug-ins.

Kant-en-klaar wordt jEdit geleverd met ingebouwde noodzakelijke functies, bijvoorbeeld het vouwen van codes, het markeren van tags en elementen, bestandsbeheerder, evenals vele andere functies.

Sublieme tekst 2

Dit is de meest populaire editor onder programmeurs en webontwikkelaars. Geen enkele andere redacteur heeft zo'n triomf behaald als Sublieme tekst 2. Veel programmeurs prijzen het. De editor is in hoge mate aanpasbaar via verschillende resoluties en JSON-bestanden.

Voor deze populaire editor kun je uitgebreide bibliotheken met documentatie vinden, zowel officieel als niet-officieel. Sublime Text 2 tutorials zijn overal te vinden.

Sublime Text 2 is gedeeltelijk gratis, de licentie kost $70.

Nieuwe editor - Beugels

Brackets is een moderne open source-editor met enkele interessante kenmerken. Het werkt met Adobe Creative Cloud om kleuren, lettertypen en meer uit een PSD-bestand te halen. Het kan ook lagen als afbeeldingen extraheren. Erg handig

Helaas is Adobe Creative Cloud een betaalde service.

Deze editor heeft alle benodigde functies voor een moderne code-editor. Er zijn veel verschillende extensies die elke 2 - 3 weken worden uitgebracht.

Aptanastudio 3

Grootste sterke punten De editor is de aanpasbaarheid, Git-integratie en ingebouwde terminal. Aptana Studio 3 ondersteunt de nieuwste webstandaarden zoals HTML5 en CSS3.

Conclusie

Er zijn veel HTML-editors beschikbaar, maar slechts een paar daarvan zijn daadwerkelijk bruikbaar. Voor niet-dagelijks gebruik is er Notepad++, maar voor dagelijks gebruik zou dit duidelijk niet voldoende zijn. Er zijn betere opties hiervoor, zoals Sublime Text 2, die kan worden aangepast aan de vereisten van de gebruiker. Benieuwd welke editors jij kiest?

Dit artikel presenteert enkele van de meest functionele CSS-code-editors voor front-end ontwikkelaars. Met functies zoals syntaxisaccentuering, liveweergave, foutopsporing en gezamenlijk bewerken kunnen deze services een uitstekende keuze zijn voor webontwikkeling, rechtstreeks in uw browservenster.

Online code-editors

1. CodePen

Het biedt ondersteuning voor HTML, CSS en JavaScript en een groot aantal preprocessors. Haml, Markdown, Slim en Jade worden ondersteund, zoals HTML-preprocessors. Voor CSS worden Less, SCSS, Sass en Stylus ondersteund. Voor JavaScript worden CoffeeScript, TypeScript, LiveScript en Babel ondersteund.

Bovendien is er een enorme gemeenschap van ontwikkelaars die CodePen gebruiken. Dit maakt het gemakkelijk om demo's en voorbeelden te vinden die zijn gemaakt door ervaren ontwikkelaars.

CodePen Pro ondersteunt een samenwerkingsmodus waarmee u code in realtime kunt voltooien. Er is ook de Professor-modus, waarmee een groep studenten je kan volgen terwijl je code uitlegt, en je met ze kunt chatten.

2. JSFiddle

Nog een populaire CSS-editor online. Het wordt al geruime tijd met succes door ontwikkelaars gebruikt en was de eerste voordat CodePen op de markt kwam. JSFiddle is een gebruiksvriendelijke online code-editor met gratis gezamenlijke bewerking, tekst- en code-editor voicechat. U hoeft zich niet eens te registreren om de functie te gebruiken samenwerking.

JSFiddle ondersteunt ook SCSS en CoffeeScript. JSFiddle maakt het vrij eenvoudig om samen te werken aan code of demo's te hosten.

3. Levend weefsel

Dit is een online CSS-editor met realtime preview-functie. Liveweave bevat ingebouwde contextgevoelige hints voor HTML5-, CSS3-, JavaScript- en JQuery-code. Je kunt er ook je project mee downloaden als archief, wat erg handig is.

Liveweave maakt het vrij eenvoudig om externe bibliotheken zoals JQuery, AndgularJS, Bootstrap, etc. aan uw projecten te koppelen. Het heeft ook een liniaaltool die helpt bij het ontwikkelen van responsief webontwerp. Liveweave biedt de " Team-up", die dezelfde functionaliteit biedt als de co-bewerkingsmodus in JSFiddle.

4. Plunjer

Dit is een online community (evenals CodePen) om ideeën voor webontwikkeling te coderen, samen te werken en te delen. De service is een open source online-editor met een licentie onder de MIT-licentie. Plunker-broncode is te vinden op GitHub.

Met de online CSS-stijleditor kunt u toevoegen werkgebied meerdere bestanden, en biedt ook door de community gemaakte sjablonen waar gebruikers gebruik van kunnen maken snelle lancering project.

5. JS-bak

Cloudomgeving voor samenwerking met JavaScript-code. Het bevat ondersteuning voor een reeks preprocessors zoals SCSS, Less, CoffeeScript, Jade en andere. Er is ook een console beschikbaar voor foutopsporing en codebeoordeling, die functioneert zoals de console in Google Chrome of Firefox.

JS Bin ondersteunt ook interactieve opname en uitzending van het maken van code naar een willekeurig aantal deelnemers. Deze modus is gratis beschikbaar voor geregistreerde en anonieme gebruikers.

6. CSS-deck

Deze CSS-editor is iets eenvoudiger vergeleken met andere tools. Naast de basisfuncties bevat het een commentaarfunctie. Delen en het insluiten van demo's wordt ook ondersteund in CSS Deck.

7. codetest

kodtest is handig wanneer u uw code op verschillende schermformaten moet testen. Met deze online tool schakel je snel tussen verschillende vooraf ingestelde schermformaten.

Demonstratie van online code-editors

Hieronder ziet u een demo die ik met CodePen heb gemaakt. U kunt van tabblad wisselen om HTML-, CSS- en JS-code te bekijken. Of experimenteer door de vormen op het tabblad “Resultaat” te verplaatsen.

Bekijk de demo

Conclusie

Online CSS-editors kan voor verschillende doeleinden gebruikt worden. Bijvoorbeeld als u samen aan projecten moet werken of een demoversie aan een klant wilt laten zien.

Webgebaseerde code-editors zijn ook ideaal voor educatieve doeleinden, omdat ze geen installatie vereisen en toegankelijk zijn vanaf alle soorten apparaten.

Als u een ontwikkelaar bent, schrijf dan in de reacties over uw favoriete online code-editor.

Vertaling van het artikel " 7 gratis online code-editors voor front-end webontwikkeling» werd voorbereid door het vriendelijke team van het project Website bouwen van A tot Z.

Hallo, beste abonnees en gasten van mijn blog. In verschillende eerdere artikelen heb ik je door de basis geleid CSS-talen en echter alleen indirect genoemde hulpprogramma's. Daarom vind ik het vandaag nodig om te praten over de beste visuele html-editor. Ik zal je vertellen over enkele populaire tools voor het bouwen van websites, en later kun je degene die je leuk vindt downloaden en uitproberen.

Bereik de top tien

Op dit moment hebben bedrijven veel gespecialiseerde softwareproducten uitgebracht, met als belangrijkste doel het optimaliseren van de workflow van ontwikkelaars. Er zijn zowel betaalde als gratis editors.

Omdat mijn blog bedoeld is om beginners hierin te onderwijzen, heb ik besloten de beste gratis tools voor het maken van websitepagina's te beschrijven. Hoogstwaarschijnlijk raadde je al dat we het over de tien handigste zullen hebben visuele programma's. Laten we beginnen met de eenvoudigste.

(https://notepad-plus-plus.org/)

Dit is een geweldig hulpmiddel voor het trainen van toekomstige ontwikkelaars. Het programma heeft een eenvoudig gebruiksvriendelijke interface zonder onnodige toeters en bellen, ondersteunt meertaligheid, d.w.z. u kunt het editormenu naar het Russisch vertalen. Andere voordelen zijn onder meer het accentueren van de codesyntaxis en de implementatie van verificatie en validatie.

PSPad(http://www.pspad.com/)

Net als het vorige programma is PSPad een hulpmiddel voor algemene doeleinden dat CSS- en HTML-tekst markeert, automatisch wijzigingen opslaat nadat het programma is voltooid, de juistheid van de geschreven code controleert en u in staat stelt de voorbeeldmodus van ontwikkelde pagina's in . Deze visuele editor bevat meer handige functies dan Notepad++, maar hoort er nog steeds bij eenvoudige middelen ontwikkeling.

KompoZer(http://www.kompozer.net/)

Het softwareproduct is een WYSIWYG-editor, wat betekent “wat je ziet is wat je krijgt.” KompoZer is opgenomen in de lijst van leiders onder visuele editors, en met goede reden. Het stelt ontwikkelaars en ontwerpers in staat samen te werken, omdat het 3 bedieningsmodi heeft. Laten we beginnen met mijn favoriete codemodus.

Ondanks het ontbreken van automatische aanvulling van gepaarde elementen van opmaaktalen, kunt u in de modus code bewerken zoals in teksteditors. In de WYSIWYG-modus is het voor ontwerpers handig om te ontwerpen verschijning webbronnen. De coöpmodus biedt de mogelijkheid gedetailleerde kennismaking met markering van specifieke objecten.

Komodo Edit(http://www.activestate.com/komodo_edit/)

Krachtige tool met beschikbare broncode. De creatie ervan is gebaseerd op de commerciële ontwikkelomgeving Komodo IDE, dus het product is voorzien van veel extra goodies: contextueel automatisch vullen en afsluitende tags, generatie willekeurige tekst om de velden in te vullen, voorbeeld stijlmarkeringen, ingebouwde reguliere expressies en nog veel meer.

Aan dit alles zou ik willen toevoegen dat de mogelijkheden van het programma aanzienlijk kunnen worden uitgebreid met behulp van speciale hulpprogramma's!

jBewerken(http://www.jedit.org/)

jEdit is een platformonafhankelijk softwareproduct. Het biedt syntaxisaccentuering van de geschreven tekst, extra installatie plug-ins om de mogelijkheden uit te breiden, waarna het automatisch sluiten van tags, code-authenticatie en vele andere functies beschikbaar komen.

Voor mij persoonlijk was het struikelblok op weg naar deze editor echter de slordige en onhandige interface.

Aptana-studio(http://www.aptana.com/)

Wil je leren programmeren in een volwaardige ontwikkelomgeving, werk dan in dit product. De omgeving ondersteunt vele programmeertalen en is niet alleen geschikt voor websites, maar ook voor het schrijven van andere soorten applicaties. Maar wees bereid enige tijd te besteden aan het beheersen van de technische kenmerken.

Fraise(https://www.assembla.com/home)

Dit is een teksteditor die helaas alleen geschikt is voor het maken van webbronnen Mac-platform OS X 10.6. Het programma ondersteunt kleuraccentuering van tekst in verschillende talen, biedt voorbeelden van gemaakte pagina's en is uitgerust met speciale elftallen Om het typen van code en het controleren van de syntaxis te versnellen, kunt u reguliere expressies gebruiken en automatisch ingevoerde eigenschappen toevoegen.

Gedit(http://projects.gnome.org/gedit/)

Een eenvoudige teksteditor die, na het installeren van add-ons, op wonderbaarlijke wijze verandert in een webeditor. Met behulp van hulpprogramma's worden de volgende eigenschappen toegevoegd:

• Automatische aanvulling van gepaarde elementen;
• Genereren van tijdelijke tekst;
• Controle van codesyntaxis;
• Voorbeeld in elke browser.

Vim(http://www.vim.org/)

Een moeilijk te leren console-editor die veel voordelen biedt voor programmeurs. Uitgerust met 3 bedrijfsmodi.

ICEcoder(https://icecoder.net/downloads)

Dit is een teksteditor waarvan de teksteditor de mogelijkheid biedt om code rechtstreeks in de browser te schrijven en te bewerken. Geweldig modern instrument voor zowel lokaal als op het netwerk werken is het uitgerust met de kenmerken van standaardeditors, maar ondersteunt het werken met databases en functies op alle platforms.

Voor mij verander ik vaak WYSIWYG-programma's en probeer ik nieuwe versies en producten van verschillende bedrijven.

Dat is alles, veel succes bij het vinden van de juiste editor voor u! Deel de link met je vrienden en abonneer je op mijn blog voordat je vertrekt. Er zit nog veel meer in het project nuttige artikelen. Tot ziens!

Met vriendelijke groet, Roman Chueshov

Lezen: 905 keer