Online bewerken van html-code. Gratis online HTML-editor, schoner en converter

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. voordat de reiniging is uitgevoerd.
• 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.

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; )

Bij het maken van een website moet u verschillende fasen doorlopen: ontwerp, pagina-indelingen maken, deze vullen met inhoud, de site en de softwarebasis onderhouden. Webontwerp of visueel ontwerp van pagina's is een van de fasen van websiteontwikkeling, vergelijkbaar met de lay-out in gedrukte publicaties. Daarbij worden de sitestructuur, navigatie, etc. ontworpen, dat wil zeggen dat het doel van webdesign niet alleen visuele perceptie is, maar ook gemak voor gebruikers.

Programma's die door webontwerpers worden gebruikt voor de lay-out worden HTML-editors genoemd. Er zijn twee soorten van dergelijke editors:

• Visueel, werkend volgens het principe “Je krijgt wat je ziet” - WYSIWYG (What You See Is What You Get). Wanneer u met WYSIWYG werkt, ziet het eindresultaat er hetzelfde uit als tijdens het bewerkingsproces.
• Niet-visueel (tekst). De code voor dergelijke editors moet onafhankelijk worden geschreven, dus deze tools worden voornamelijk gebruikt door professionele webontwerpers die de "standaard" -optie uitschakelen.

Er zijn ook editors ontwikkeld die beide werkingsprincipes combineren. Het is moeilijk om de beste HTML-editor te kiezen - sommige verkopen goed, andere zijn ontwikkeld door toonaangevende bedrijven, andere worden gebruikt door professionele webontwerpers, andere zijn betaalbaar, enz. Er zijn veel programma's van hoge kwaliteit, ze verschillen qua functionaliteit en vereisen verschillende niveaus van training.

Welke editor is beter

Voorstanders van teksteditors zijn van mening dat code alleen handmatig kan worden gemaakt en dat software-opmaak beter is dan visuele opmaak. Websites die gemaakt zijn met kant-en-klare templates zijn inderdaad van hetzelfde type, maar ze hebben bestaansrecht en velen zijn er best blij mee. Wanneer u een eenvoudige “test”-website of twee pagina’s van een persoonlijke website nodig heeft, is de WYSIWYG-optie ideaal.

Professionals hebben geen kant-en-klare lay-outs en tips nodig, net zoals een eersteklas modeontwerper geen patronen en patronen nodig heeft, en een vertaler geen woordenboek nodig heeft. Degenen die hun website willen openen zonder HTML grondig te bestuderen, hebben geen teksteditors nodig, en visuele editors zijn te primitief voor een webontwerper.

Wat zijn de voordelen van WYSIWYG-editors?

Visuele ontwerpers of visuele HTML-editors online zijn een onmisbaar hulpmiddel waarmee u elementen en objecten in hun oorspronkelijke vorm in de tekst kunt invoegen. Het maken van een pagina met tekst, tabellen en afbeeldingen met HTML-code kan door specialisten worden gemaakt, en de visuele editor elimineert de noodzaak om code te maken. De webmaster ontvangt een pagina met tekst in afgewerkte vorm. In die zin doet WYSIWYG denken aan de teksteditor van Microsoft Word.

De werkbalk heeft alles wat u nodig heeft voor typen en bewerken: knoppen voor het klembord, afdrukken, lettertypen en tekstontwerp, tabellen invoegen, afbeeldingen, formulieren en nog veel meer. Om de HTML-broncode te verkrijgen, hoeft u alleen maar op de knop te klikken, waarna de code kan worden bewerkt, gekopieerd en naar de site kan worden overgebracht. Met de WYSIWYG-editor kunt u in korte tijd goede resultaten behalen en pagina's op een webbron weergeven.

De visuele editor kan worden gecombineerd met tags uit tekst-HTML - dit vereenvoudigt het werk van webontwerpers aanzienlijk.

De meeste professionele ontwerpers en webprogrammeurs gebruiken geavanceerde WYSIWYG-editors zoals DreamWeaver. Slechts een klein deel van hen gebruikt eenvoudige teksteditors en voelt hierin een soort geheime magie.

Eenvoudige HTML-teksteditors zijn zeer geschikt voor programmeurs die zich op hun gemak voelen en graag met schone HTML-code werken. Maar voor de meeste gebruikers is dit niet helemaal geschikt. Ze willen editors waarmee je snel en eenvoudig een webpagina kunt maken in een WYSIWYG-omgeving.

Herziening van gratis HTML-editors

Of het nu gaat om code-centric of WYSIWYG, de ideale HTML-editor moet de code controleren op naleving van HTML-standaarden, een eigen FTP-client hebben, u in staat stellen de webpagina in verschillende browsers te bekijken, ondersteuning bieden voor metatags, basishulpmiddelen ondersteunen om mee te werken afbeeldingen. En blijf tegelijkertijd vrij.

WYSIWYG HTML-editors

Laten we een paar WYSIWYG-editors bekijken.

Amaya

Snelle selectiegids - HTML-teksteditors (download)

NetBeans

HTML-kit 292

Aptana-studio

Bijna elke internetgebruiker heeft er ooit aan gedacht om zijn eigen website te maken, maar niet iedereen heeft de tijd en het vermogen om op zijn minst de basisprincipes van webprogrammering en -lay-out onder de knie te krijgen. Maar in de meeste gevallen is het niet nodig om complexe programmeerbare elementen te ontwikkelen en kunt u een mooie en functionele website maken met behulp van een visuele website-editor of een WYSIWYG-editor.

Dergelijke programma's zijn, ondanks het relatieve gebruiksgemak, verre van amateur-ontwikkeltools, maar hun vermogen om met elk ervaringsniveau te werken is precies wat ze speciaal maakt.

WYSIWYG is een acroniem voor de Engelse woorden What You See Is What You Get, wat zich vertaalt als ‘wat je ziet is wat je krijgt’. Dat wil zeggen, we hebben het over een ontwikkelomgeving waarin de gebruiker, terwijl hij werkt, onmiddellijk het geschatte resultaat van zijn inspanningen kan zien. Meestal wordt in Runet de Russisch-talige analoog van de genoemde afkorting gebruikt, en dit soort programma's worden visuele editors genoemd. Met dergelijke applicaties kunt u code maken in verschillende programmeer- en lay-outtalen: HTML, CSS, PHP, enz.

De meest populaire WYSIWYG-editor voor HTML en andere webontwikkeltalen is Adobe Dreamveawer. Het beschikt over een werkelijk gebruiksvriendelijke interface, een groot aantal beschikbare tools, ondersteuning voor de huidige technologieën en integratie met andere applicaties in de Creative Suite. Een groot voordeel van Adobe Dreamveawer is de beschikbaarheid van gedetailleerde professionele documentatie, evenals veel gratis lessen over het werken met het programma, die op internet te vinden zijn. Bovendien kan het werken met gangbare CMS-engines zoals Joomla, WordPress en Drupal. De huidige versie is CS6.

Een andere populaire visuele editor is WYSIWYG Web Builder, die onlangs is bijgewerkt naar versie 9. Het is een krachtige oplossing waarmee u websites van hoge kwaliteit kunt maken zonder enige codeer- of webprogrammeervaardigheden. Met dit programma kunt u zowel eenvoudige visitekaartjesites als bronnen met meerdere pagina's maken met complexe scenario's en het invoegen van interactieve elementen. De kit wordt geleverd met verschillende sjablonen en u kunt nieuwe toevoegen terwijl u werkt. De nieuwste versie van WYSIWYG Web Builder heeft een lintinterface, nieuwe functies voor het werken met CSS3 en meer dan honderd andere verbeteringen.

Naast commerciële oplossingen zijn er ook goede open source oplossingen. Bijvoorbeeld de gratis visuele editor BlueGriffon, gemaakt op de Gecko-engine, waarop ook de wereldberoemde Mozilla Firefox-browser draait.

Dit is een moderne en betrouwbare oplossing voor het bewerken van webpagina's en het maken van sites die voldoen aan de nieuwste webstandaarden. BlueGriffon is een meertalige visuele editor voor HTML, PHP, CSS en andere webontwikkelingstalen, die een intuïtieve, gebruiksvriendelijke interface heeft, en het daarin bewerkte document ziet er precies hetzelfde uit als in de Firefox-browser.

De WYSIWYG-editor is een echt handig hulpmiddel voor het bewerken van webpagina's en het maken van volwaardige websites met verschillende niveaus van complexiteit. Hiermee kan de gebruiker aantrekkelijke websites maken zonder dat er uitgebreide technische kennis nodig is.

Gegroet, beste lezers van de site. HTML-opmaaktaal is de basis van alle internetsites. Vaak weerhoudt onwetendheid van deze taal veel getalenteerde mensen ervan hun eigen webproject te creëren - niet iedereen heeft tenslotte een voorliefde voor programmeren. En niet iedereen weet dat je HTML-code niet alleen kunt maken door tags in een notitieblok te schrijven, maar ook door eenvoudige visuele editors te gebruiken die doen denken aan Word.

• Visueel (WYSIWYG) - waarbij het hele proces van het maken van code geen kennis van HTML vereist - stelt u in staat tekst, afbeeldingen en andere pagina-elementen in een visuele modus te ontwerpen (zoals in Word) - kopjes maken, alinea's markeren, het materiaal aanvullen met lijsten met opsommingstekens, enz., en bij de uitvoer ontvangt u een kant-en-klare HTML-code met alle tags;
• Werken alleen met broncode - in vergelijking met een gewoon notitieblok kunt u de structuur van de code zien, dankzij markering en andere functies. Het is onmogelijk om met dergelijke editors te werken zonder kennis van HTML.

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

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

Ik besloot een lijst te geven met de beste en nuttigste online HTML-editors die ik ken.

Eenvoudige HTML-online-editors

Deze visuele HTML-editor wordt door velen als de standaard beschouwd, omdat het instellingenpaneel bijna alles bevat wat een webmaster maar kan bedenken: emoticons, YouTube-video's, zelfs de mogelijkheid om code in te voegen met tagmarkering om de perceptie te verbeteren.

De Cut Editor implementeert het schakelen tussen drie modi:

• Visueel;
• Codebedieningsmodus;
• Bekijk een voorbeeld van het resultaat.

Schakelen gebeurt via tabbladen onderaan het editorvenster.

Deze WYSIWYG HTML-editor kan in elke website worden geïntegreerd; u vindt er instructies van de ontwikkelaars. Het controlepaneel kan hiervoor worden gewijzigd; er is een venster boven het formulier met een vervolgkeuzelijst met 5 sets bedieningsknoppen.

Deze ontwikkeling is niet zomaar een online HTML-editor, maar een plug-inmodule die op elke website kan worden geïnstalleerd en daarom op veel bronnen te vinden is. Als u wilt, kunt u deze op uw project plaatsen - neem hiervoor de broncode hier -.

De eigenlijke editormodule werkt hier.

Dit is een WYSIWYG-editor met veel functies. Er is tekstopmaak en zelfs online spellingcontrole.

Je versiert de pagina met de nodige knoppen, en aan het einde schakel je met de knop “Bron” over van visuele weergave naar kant-en-klare HTML-code.

Een 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 wijzigingen die u aanbrengt. Deze editor is niet geschikt voor mensen die helemaal geen HTML spreken, omdat deze gericht is op het direct werken met code. In de standaardset zijn er slechts 5 elementen voor snelle invoeging: een lijst met opsommingstekens, tabel, afbeelding, formulier en selectie. Al het andere zal zelf moeten worden geschreven met behulp van tags.

Veranderingen in de code worden niet in realtime in het visuele gedeelte gereproduceerd, maar nadat op de knop "Render" is gedrukt.

De editor kan werken met CSS en JavaScript.

Vulk

Een uiterst eenvoudige ingebouwde WYSIWYG HTML-editor. Met een minimum aan instellingen, een laag gewicht en eenvoud kunt u het overal toevoegen, de broncode wordt rechtstreeks van de website van de ontwikkelaar gedownload - alles is in het Russisch.

De bedieningspaneelset bevat alle populairste functies: eenvoudig maar smaakvol.

Onderaan bevinden zich tabbladen waarmee u de online-editor kunt overschakelen van de visuele naar de HTML-modus.

JSBin

Een eenvoudige online editor met twee vensters met ondersteuning voor HTML-, CSS- en JS-code. Aan de linkerkant schrijven we tags en voegen we de benodigde inhoud in, en aan de rechterkant zien we in realtime wat eruit komt. Met het markeren van tags kunt u de juiste syntaxis controleren. Handig voor het debuggen van Java-scripts, waarvan het werk in veel visuele editors niet wordt ondersteund.

Het overschakelen naar het gewenste codetype bevindt zich boven het werkgebied.

Professionele tools voor webontwikkeling

Met deze editor kunt u niet alleen met HTML-code werken; hij ondersteunt een enorme lijst programmeertalen, waaronder JavaScript, PHP, Perl, Python, enz.

Maar dat is niet het belangrijkste punt. Met Cloud9ide kunnen meerdere programmeurs tegelijkertijd met code werken - het persoonlijke account geeft toegang tot een bepaalde kring van specialisten. Om deze reden is registratie vereist.

De editor benadrukt code-elementen duidelijk, laat deelnemers die aan het project werken, communiceren via chat - kortom, alles gebeurt zoals het hoort.

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

Ondersteunt het werken met Dropbox en Google Drive.

Voor de duidelijkheid zijn alle tags in de code gemarkeerd. Er is een automatische levering van afsluitende tags, automatisch invullen van gegevens en het markeren van niet-gesloten elementen.

Met opmaak kunt u lelijke delen van de code automatisch ‘opruimen’ door inspringingen en regeleinden toe te voegen.

Er is een korte video-instructie voor deze HTML-editor, ik denk dat het nuttig zou zijn om deze op te nemen:

Service voor het "combineren" van Dirty Markup-code

Deze dienst kan niet worden geclassificeerd als een online-editor, hoewel u hiermee vrij effectief met HTML-, JS- en CSS-code kunt werken, maar geen visuele modus biedt. Het doel van de tool is om de code op te schonen. Van elke onhandige set tags die lukraak in een document worden ingevoerd, maakt Dirty Markup een gestructureerde code die gemakkelijk te lezen is, waarbij elk logisch element en blok gemakkelijk te lezen en te begrijpen is.

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

De onderstaande schermafbeeldingen tonen twee 100% identieke codes, één is geoptimaliseerd en onmogelijk te begrijpen, de tweede is gemakkelijk leesbaar voor mensen.

Dit is zo'n handig hulpmiddel: het kan erg handig zijn als u wijzigingen wilt aanbrengen in een eerder geoptimaliseerde website.

Ik hoop dat de lijst met online HTML-editors die vandaag wordt gegeven, u zal helpen efficiënter aan uw projecten te werken en nieuwe hoogten te bereiken. En daarmee neem ik afscheid van iedereen.

Nuttige artikelen:

• 
  
  Emoticons voor VK - codes van verborgen emoticons, zoals...
• 
  
  Hoe u geld kunt verdienen op internet voor een beginner - 23...