Editores de HTML

  • Por
Que son los editores de HTML: programas que nos pueden ayudar a la hora de construir una página web.
Vamos a hablar en este artículo sobre los editores de HTML, los programas que nos sirven para crear páginas web con el lenguaje HTML.

Los editores de HTML pueden ser de dos tipos, como veremos, unos permiten codificar las páginas utilizando el propio lenguaje HTML, a base de etiquetas y otros nos permiten diseñar una página web, como si estuviésemos escribiendo con un editor de texto avanzado, sin tener que escribir el código con las etiquetas. Esta última vertiente, que podemos llamar editores en modo diseño, presenta una facilidad adicional para las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo de aprenderlo o porque se sientan incapaces de hacerlo. Los editores en modo diseño nos permiten crear la página como si estuviéramos escribiendo un documento con un editor del tipo de Word. El editor de HTML es el encargado de vérselas con el lenguaje y programar internamente la página con el código HTML, según lo que nosotros estamos diseñando.

Con el editor HTML en vista diseño podemos colocar imágenes, definir estilos, utilizar negritas o cursivas, etc. sin preocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el editor el que conoce estas etiquetas y las utiliza convenientemente. Este tipo de editores HTML en modo diseño se denominan, en lenguaje técnico WYSIWYG (What You See Is What You Get) porque cuando trabajas con ellos lo que ves que estás creando con el editor es lo que obtienes luego cuando grabas la página.

Existen dos tendencias, por tanto, entre los desarrolladores que se dedican a realizar páginas web. Por un lado tenemos a las personas que prefieren crear las páginas programando el HTML y por otro las personas que utilizan editores HTML en modo diseño. Algunas diferencias entre hacerlo de un modo u otro son las siguientes:

Escribiendo el HTML Con un editor WYSIWYG
Dominas con mayor precisión el código de la página, queda más limpio. Si dominas bien el HTML nunca tendrás ningún problema para hacer lo que deseas. El código de la página tiene peor calidad, incluso puede llegar a tener errores, más o menos visibles, que cuestan arreglar. Es la máquina la que domina el trabajo.
Es más complicado el aprendizaje, más lento y cuando se llega a un nivel avanzado también se hace considerablemente más difícil El aprendizaje es muy sencillo, tal como puede ser trabajar en Word. Solo se trata de manejar un programa más.
Hacer una página cuesta más trabajo y tiempo. Es muy rápido.

Cada uno debe escoger el camino que más le convenga o el que le parezca más atractivo. De todos modos siempre se puede empezar de un modo y luego pasar al otro modo sin ningún tipo de problema. Incluso, por adelantarnos a los acontecimientos, diríamos que cuando una persona profundiza en el diseño de páginas web llega un momento en el que le hace falta conocer las dos maneras de construir webs. A los programadores en HTML les hará falta aprender un editor porque eso aumentará su productividad y los que utilizan editores necesitarán aprender un poco de HTML para arreglar alguna cosa que el editor ha hecho mal o realizar alguna cosa que el editor no puede hacer.

Este manual está escrito por una persona que aprendió a realizar sus primeras webs con el Block de notas y algunas veces puede verse mi mayor inclinación a escribir el código HTML uno mismo. Aunque mi consejo es aprender HTML, estoy seguro que muchos preferirán que un editor en modo diseño haga las cosas más sencillas. Si el editor HTML WYSIWYG es bueno y lo dominamos perfectamente se pueden obtener perfectos resultados.

Editores HTML modo diseño WYSIWYG

En el mercado existen multitud de editores de HTML WYSIWYG, es importante elegir un editor bueno porque nuestros trabajos van a depender de sus resultados. Actualmente el rey de los editores y el que os aconsejaríamos sin duda es el Dreamweaver, fabricado por Adobe.

Otras posibilidades son editores como

Editores de texto preparados para escribir código HTML

Las personas que después de estas líneas han decidido aprender el lenguaje HTML también tienen herramientas muy interesantes para aumentar su productividad sin dejar de escribir ellos mismos el HTML que desean. Se trata de unos editores de texto, como cualquier otro, que están preparados para escribir HTML y por lo tanto ofrecen multitud de ayudas a los diseñadores:
  • Pueden tener abiertos y editar varios ficheros a la vez
  • Colorean los códigos de las páginas para hacerlos más comprensibles
  • Suelen soportar otros lenguajes de programación con los que podemos llegar a trabajar en el desarrollo de páginas web.
  • Ofrecen ayudas a la programación, que muchas veces son contextuales y se activan a medida que vamos realizando las páginas.
  • Y además muchos de ellos tienen herramientas integradas para hacer cosas tan variadas como la generación de código, asistentes, módulos de conexión por FTP con el servidor, etc.
Dependiendo del programa escogido tendremos unas herramientas y ayudas u otras. Simplemente es elegir el que más se adapte a nuestras necesidades. Algunos ejemplos son:
  • Notepad++, gratuito y código libre.
  • Home Site, que estaba bien, aunque Adobe hace años que no lo actualiza.
  • UltraEdit, que es un editor para programadores de los más populares.
  • Arachnophilia, que funciona en todos los sistemas operativos.
Si nos decidimos por escribir el código fuente en HTML será muy recomendable utilizar cualquiera de estos programas, para sentirnos más a gusto al programar las páginas y poder hacerlas más rápido. No obstante cabe recordar que cualquier editor de textos serviría para hacer páginas web, incluso el Block de notas, que es el editor más sencillo que existe para texto plano, pero utilizar un programa de estos será imprescindible con el tiempo.

En la sección de programas de desarrolloweb tenemos descripciones de algunos editores de HTML, tanto en modo diseño como escribiendo el código.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Ju@njo

10/2/2002
Existe otro programa que no tiene interfaz "WYSIWYG", sino que sólo ves el código fuente. Se llama AceHTML y es Freeware. Es de Viscom Media. Web: http://www.visicommedia.com/acehtml/
P.D.: Tiene hasta corrector de código!!

Miguel Angel Alvarez

22/2/2002
Quiero apuntar un posible problema a la hora de crear páginas HTML con el Block de Notas, que tiene fácil solución. Veamos:

Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una página web. Lo que está pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensión .txt y en realidad lo que está guardando en el disco duro es mi_pagina.html.txt

Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos acceder a MI-PC y en el menú de Ver seleccionáis "Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de selección que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". (Así se hace en Win98, puede variar un poco en otras versiones de Windows.)

Con ello conseguiremos que se vea siempre la extensión del archivo con el que estamos trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensión que no sea .txt

mapjmx

15/10/2002
..haciendo alusión a lo referente a guardar archivos que creemos guardar con la extensión HTML y no txt,en el block de notas, una solución muy simple sin tener que configurar al sistema operativo (ya que no siempre estan las cosas donde no las sugieren y esto acarrea un sin fin de problamas), baste con guardar el nombre de archivo entre comillas dobles "nobrearchivo.html", naturalmente que aplica para cualquier procesador o editor y por supuesto la extensión que inclusive se nos llegara a ocurrir, saludos :-)

zega

15/2/2003
Otro truco para trabajar con el Bloc de Notas o cualquier editor de txt plano:

- Abrimos con el editor un archivo html cualquiera.
- Borramos todo el contenido excepto las etiquetas elementales de la página básica html.
- Al grabar el archivo seleccionamos "todos los archivos" y ponemos OTRO nombre, para no sobre-escribir el archivo origonal.

Este truco sencillo te permite que los archivos se guarden con extensión .html sin necesidad de cambiar nada del sistema. Lo empleo de vez en cuando y me funciona.

eli

25/4/2003
Otro editor freeware es First Page 2000, que se puede descargar en www.evrsoft.com

angelica

28/4/2003
El mejor es HTMLkit lo obtienes en http://www.chami.com es freeware y no es WYSIYWG es para el que quiere aprender elk código como para el programador avanzado que quiere desechar el bloc de notas.

Recomiendo 100%

José Luis Planes

11/6/2003
Me gustaría que agregaran el editor de HTML que viene incorporado en el paquete del StarOffice 5.2 de Sun Microsystem (que es gratuito), por ser de muy buena calidad.

Pero siempre teniendo en cuenta sus consejos de que hay que aprender el lenguaje HTML en forma pura para corregir algunos errores que el editor de HTML no los detecta.

verbalkint

15/9/2003
para linux: QUANTA, no es WYSIWYG, y resalta codigo HTML y PHP, tiene gestion de proyectos,debugger,te controla el comienzo y fin de bucles y llaves...mu gueno

jose lenin

04/11/2003
es un tips, para trabajar un poco mas rapido al agregar color ya sea de fondo o en el texto puedes en el bloc de notas escribir en ingles el nombre del color (nota:puedes no utilizar comillas), esto simpre funcionara, o si no es así hay una escala en el abcdario o numeracion que podras utilizar de la sig. manera. ejemplo (azazaz)y dara como rezultado un gris, ya que cada par de letras corresponde un tono, contraste y color, así az es el mas alto y el mas bajo de c/u y esto dara como resultado griss (nota:esto si debe ir en comillas)

Robin

29/5/2004
HTML-Kit es el mejor editor que he probado. Colorea los tags HTML diferenciando tags de atributos y codigo ASP o PHP. Es tremendo se lo recomiendo. Y es gratuito, sin trucos.

www.chami.com

Emilio

01/4/2006
Pues yo utilizo frontpage y actualmente estoy trabajando en frontpage 2003; creo que como todos los programas (en este caso editores de web) deben tener sus cualidades, por lo que me permito estar en desacuerdo con el autor del artículo en cuanto a su desabrobación de este programa, de mal gusto me parecio el comentario.

Que estén bien Gracias

victor

19/4/2007
Considero al HTML como la mejor etiquetación, y de acuerdo a la evolución de estos últimos años, es considerable su vigencia, hasta que salga al mercado otro tipo de tecnología. (Desde Perú)

Chaves

29/8/2007
El mejor WYSIWYG para Linux (también dismponible para Mac OS o Windows) que conozco es Kompozer, hermano no oficial de NVU. Es un programa libre y gratuito, por supuesto, y aunque no le llega al Dreamweaver ni a la cintura (a la suela si), es la mejor alternativa libre.

Sergio

15/10/2007
el GoLive, que lo mencionábais en otro comentario, está retrasado y según Adobe tienes que pasarte al Dreamweaver.
Muchos problemas deberá de tener...

BlueFox_W

24/11/2007
Que Tal!! No creo que sea de mal gusto postear sus opiniones... y en cuanto al diseño con Frontpage, concuerdo con él.. has visto el código de las páginas?? la mayoria es basura.. y esto no puede ser para nada bueno en ningun sentido.. y no solo es eso, hay varias cosas mas.. pero en fin.. Cuando uno comienza a utilizar otro tipo de editores es cuando comienzas a ver estos detalles.. todo está en safarse del primer editor que uno aprendió, y practicar en las demás opciones.. entonces.. te darás cuenta de porqué no es recomendable algunos editores.. Saludos!!!!

Pepe

16/12/2007
Emilio, al parecer el autor del articulo finalmente tuvo razon sobre el uso de FrontPage ya que a esta fecha con la llegada del nuevo Microsoft Office 2007 esta aplicacion finalmente paso a la historia para dejar su lugar a SharePoint Designer y Expression Web

Juan

16/2/2008
Pues yi me he diseñado la web de mi empresa sin tener ni idea con un software que se llama Web To Date. Es facilísimo y me lo actualizo yo.

autoquad

18/11/2008
Para los que trabajamos en MAC, existe el CODA, que es muy bueno y sencillo de manejar. www.panic.com

Van por la versión 1.6

Saluditos a los "makeros"

Jesmari Velásquez

14/4/2009
Editores de Html
Me parece muy buena la información, el contenido está muy bién estructurado y redactado de forma muy sencilla, por lo que resulta bastante didáctico.

Gracias

cesar_luis-498906

16/4/2009
Recomiendo : notepad++
"Notepad++ es un editor gratuito de código fuente, que soporta varios lenguajes de programación y se ejecuta en MS Windows."

despues de pasar por frontpage y dreamweaver, me he quedado con este editor multilenguaje porque es excelente:

pueden visitar su pagina, de verdad que es bueno:
http://notepad-plus.sourceforge.net/es/site.htm

Santiago

28/4/2009
Gracias
He encontrado un edito Gratuito y que no esta mal.
http://www.nvu.com/

Saludos.

midesweb

20/5/2009
Sobre el editor HTML NVU
Para contestar a Santiago, que recomendaba el editor HTML gratuito NVU, quiero hablar de Kompozer, que es la versión evolucionada de NVU. NVU se ha dejado de mantener y Kompozer ha seguido la línea de desarrollo de ese programa y ha reparado varios errores y añadido funcionalidades.

Os paso la dirección del artículo donde hablamos del editor HTML gratuito Kompozer: http://www.desarrolloweb.com/articulos/kompozer.html

Pedro

23/9/2009
Amaya
¿Qué opináis de Amaya, el editor del W3C? El que esté hecho por la gente que establece las normas para la web en principio hace pensar que debería ser un bueno editor, y el que sea gratuito y disponible para varios sistemas operativos es muy atractivo, sin embargo el hecho de que no lo use mucha gente, y que incluso en la mayoría de los manuales, como el vuestro, ni siquiera se menciona da qué pensar. ¿Tenéis alguna opinión, sea positiva o negativa, de este editor?

Saludos.

Gaston_Mekalogman

11/12/2009
Elección...
Lo pense y quiero empezar con los editores de texto, aprender bien con estos y despues pasar a usar los editores en modo diseño para saber corregir y limpiar el codigo que generen. Me parece mas emocionante probar una etiqueta en el notepad y despues ver como queda que ver como queda directamente ¿se entiende? Quiero decir que me hace sentir mejor ver todas letras y codigo que parece una maraña sin sentido y despues abrir el archivo y ver una página prolija, ordenada, con estilo, imagenes, sonidos, videos etc.

No creo que alguien se sienta incapaz de aprender html, o por lo menos no creo que lo sea. Si creo que les pueda faltar tiempo o sean unos vagos ^^.

comentario Nº [9]

pedro_germn_rodrguez_sierra

21/12/2009
Homesite
Homesite ya no existe, pertenece a Adobe y éste no lo edita más, en su lugar, Adobe, ofrece el Dreamweaver CS4.
Si es posible, quisiera saber si la Dreamweaver CS4 tiene las mismas ayudas contextuales en menús desplegables como el Homesite. Son muy útiles.

Muchas Gracias.

pANAMEÑITAVIDAMIA1

05/1/2010
Que son los editores de HTML.
Hola Feliz año ante todo, mi comentario desde Panamá, he buscado información sobre este tema, me interesa aprender sobre la computadora, y sobre todo este tema, pero en todo mi recorrido por Internet, el único que me ayuda a entender esta Introducción al Html esta bien explicada como diria los panameños en nuestro idioma, le felicito
por haberse tomado el tiempo para explicar tan detalladamente este Curso sobre Html, creame que esta bien explicado, Yo buscaba algo menos complicado y usted me dió la oportunidad de enteder este programa. Le doy las gracias y buscare en esta misma sección a ver si tiene otros programas que pueda yo aprender para realizarme en la computadora tengo 66 años y aunque dicen el "Loro viejo no aprende hablar" yo me he demostrado a mí misma que si se puede si se tiene la paciencia y le damos el tiempo para hacerlo. Muchas gracias mi eterno agradecimiento, ya que me gusta participar en las comunidades de manualidades y tengo una pequeña página que estoy creando pero no sabia algunas formas para hacerlo. gracias nuevamente y lo exhorto a seguir adelante. saludos desde Panamá.

rafael

06/1/2010
programacion
por medio del prosente necsito ayuda para poder programar unos botones o ventanas que puse en mi pagina, como lo es "boton enviar" para que el usuario mande informacion a nuetra pagina,historia para la historia de la empresa,

Karlota

11/6/2010
Comentarios
Gente xfa, hay comentarios muy buenos.... Pro hay otros q hasta da pena verlos, son demasiado malos, inutiles y sin importancia alguna para la humanidad... Porfa, si van a invertir tiempo dejando un comentario escriban algo que valga la pena.... El articulo sta muy bueno pero hay cieros comentarios que nada que ver, estan totalmente desubicados....
Gracias y espero que no lo tomen a mal...

gif

23/7/2010
editor de html
ya esta claro que para las peersonas que deseen comprender el lenguaje a fondo la mejor forma es a traves de crear su propio programa en blokc de notas o un editor de texto pero si decide tener una tarea mas sencilla la mejor manera es a traves de un editor html

riki

19/9/2010
para responder a miguel
es ta facil si tu en el bok de nota le dices k lo guarde como html el lo guardara como html y nada mas lo k pasa es k tenemos k fijarnos bien el lo k escribimos jaja

Emilce

23/9/2010
miprimer pagina web
como estoy empezando de cero a programar en html, quiero saber como ejecuto mi programita si lo escribi en block de notas, gracias

AA

25/11/2010
SS
<script language='JavaScript' src='http://www.inegi.org.mx/sistemas/widget/flash.js' ></script><noscript><object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='200' height='200' id='Object1' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='allowFullScreen' value='false' /><param name='movie' value='http://www.inegi.org.mx/sistemas/widget/Widget.swf' /><param name='quality' value='high' /><param name='bgcolor' value='#ffffff' /> <embed src='http://www.inegi.org.mx/sistemas/widget/Widget.swf' quality='high' bgcolor='#ffffff' width='200' height='200' name='Widget' align='middle' allowScriptAccess='sameDomain' allowFullScreen='false' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer_es' /></object></noscript>

kikubv

15/12/2010
editar codigo html
Hola amigos no se que me pasa en el pc que abro una pagina html i no se puede escribir codigo de ningunas de las maneras no se que sin querer haya tocado algun comando i me impida escribir directamente en la web abierta en mi pc.
Gracias por vuestra ayuda de antemano.
kikubv

eugenia alejandra coello escobar

18/2/2011
para un saludo cordial
sus acciones benefician a muchos por sus grandes ideas y comentarios

fidel antonio osorio marin

28/2/2011
Felicitaciones po rel articulo
Soy un emprendedor de ParqueSoft Pereira Risaralda actualmente desarrollo una empresa de software educativa y estudio en el Sena Virtual me encuentro realizando un tarea de investigacion y su articulo es muy interesante me ayudo mucho gracias.

Flor

10/3/2011
block de notas para mac
Hola, me gustaría saber cuál es el equivalente del block de notas para mac. Estoy aprendiendo a hacer webs y primero probamos las etiquetas en el block de notas y yo en el text edit no puedo realizarlo.
Gracias!

Andress

21/6/2011
Simplificar un html
A veces me guardo como apuntes no la pagina completa, sino solo el html.

El cual contiene partes que no me interesan.

Si lo edito en Word, y me quedo solo con lo que me interesa, y guardo en html, luego el archivo es mucho mas pesado.

Supongo que para vosotros será facil la solucion.

Cual?

aberinsky

29/2/2012
home site macromedia 5
Hola, buen dia para todos! Alguien sabe como hago para bajar el homesite macromedia 5?Intente de todas las formas pero no pude, saludos!

Carlos

31/3/2012
no puedo
Eske...ya Cree la PAGINA..Pero...Quite el EDITOR y Ya No sè COMO poner el ''EDITOR''..D:' (pbviamente para editarlo xD)

Konespresion

03/5/2012
elijo HTML
Hola, estoy en la carrera de programación informática. Y bueno se me viene un trabajo práctico en el cuál tengo que crear una página web. Creo que es momento de que me vaya adaptando al lenguaje HTML (tal vez también use después editores para facilitar el trabajo) porque lo veré en mas de una ocasión en la carrera, como programador ;)

ERGOTRON

31/3/2014
Que tal el pagebreeze ?
Hola, que me comentan del pagebreeze ? lo he utilizado en mi pagina web y hasta el momento le doy un 8 o 9

Saludos.

nico555

12/7/2014
curiosidad
apartes de estos cuales otros me puedan servir también
gracias.