Editor de HTML/IDE para principiantes

Soy nuevo en la programación HTML. En este momento estoy usando Notepad ++ para escribir código HTML y luego guardarlo. Luego lo abro en Firefox y veo cuál es el resultado.

¿Hay algún tipo de editor o compilador de HTML (compilador no es la palabra correcta, lo sé) que:

  1. comprueba mi código HTML en busca de errores
  2. simplemente haciendo clic en algún botón "ejecutar" me permite ver la salida
  3. se ejecuta en Windows y Linux
  4. es gratis y no es complicado de usar para principiantes
No se ajusta completamente a sus requisitos, pero hay un complemento para Notepad ++ que ofrece una vista previa de HTML . Esto encajaría con sus artículos 1+4, y podría continuar usando su "entorno conocido".
html no es un lenguaje de programación, por lo que no tiene compilador. En cambio, tiene renderizadores, eso es navegadores
por lo general, los editores no tienen botones de ejecución, sino que simplemente abre su navegador y escribe la URL/hace clic en el marcador
Uso Codelobster. Es gratis y tiene un excelente autocompletado de HTML/CSS/JS.

Respuestas (9)

Un editor dedicado para el desarrollo web es Adobe Brackets , una increíble pieza de software de código abierto. Aquí hay algunas características que no encontrará en otros editores:

  • Vista previa en vivo: puede configurarlo para que cuando realice un cambio en el editor, el cambio aparezca inmediatamente en el navegador
  • Edición rápida: puede acceder a los estilos CSS que afectan a un elemento simplemente colocando el cursor en el elemento y luego presionando CTRL-E. También puede usarlo para tener selectores de color fáciles y probablemente otras cosas que aún no conozco.
  • Está escrito en lenguajes web: una vez que se convierta en un desarrollador web con más experiencia, podrá realizar ediciones en el propio editor sin aprender nuevos idiomas.

También tiene muchos complementos disponibles, y está bastante bien pulido y actualizado con frecuencia. ¡Deberías probarlo!

Mi último IDE favorito = Netbeans

Tema personalizado: ingrese la descripción de la imagen aquí

Tema básico: ingrese la descripción de la imagen aquí

Es muy sencillo, cuanto más lo usas, más lo aprendes. Simplemente presione abrir y abra sus archivos html, o arrástrelos y suéltelos desde su escritorio y estará listo para codificar. O bien, comience a codificar correctamente y coloque sus archivos en un proyecto y deje que Netbeans lo maneje por usted. Además, el editor es personalizable. Puede cambiar la fuente, los colores de fondo, el tamaño, etc. Obtuve un buen apoyo de la comunidad y es de código abierto.

revisa mi código HTML en busca de errores: - Lo tengo y muy bien hecho + formatea sus códigos HTML y muestra etiquetas en colores.

simplemente haciendo clic en el botón "ejecutar" puedo ver el resultado: tiene su propio navegador integrado en un panel separado para mostrar el resultado + se puede vincular con su navegador favorito, por ejemplo, Firefox, Chrome. Si presiona ejecutar, Firefox se iniciará y ejecutará su página html.

se ejecuta en Windows y Linux: marcado. Ganar + Mac + Linux.

debe ser gratis y no complicado de usar para principiantes: Sí, gratis . ¿Para comienzos? hmmm, significa que no hay cosas complicadas, así que no uses las funciones avanzadas disponibles. Netbeans puede llevarlo de novato a profesional, cuanto más lo use, más aprenderá sobre él, lo que puede ahorrarle mucho tiempo en el futuro. (Digamos que desea cambiar todo <span>a <div>similar a notepad ++, puede buscar y reemplazar usando texto, expresiones regulares, comodines, etc., puede cambiar en archivos/directorio/proyecto)

En mi opinión, la mejor manera de aprender es codificarlo usted mismo. Los IDE que le permiten utilizar medios visuales para crear sus páginas HTML no son una forma muy buena de dominar HTML. Netbeans puede funcionar como un notpad ++ más fácil, aprecio incluso las cosas pequeñas, como si hace CTRL+ CLIC IZQUIERDO en una URL en un archivo html y lo llevará al código fuente de ese archivo html de URL.

Puede usarlo como un IDE de edición rápida de una sola vez para una sola página como notepad ++ o en un proyecto basado en el que compone todos sus archivos bajo un mismo techo/directorio/proyecto/espacio de nombres, etc. como lo llame. Permite abrir múltiples pestañas, paneles/ventanas iguales o diferentes, diferentes colores para las pestañas según el proyecto al que pertenezcan. Además, abra una página en un proyecto simplemente escribiendo su nombre, busque un archivo/palabra clave en el proyecto, navegue de un proyecto a otro o del archivo abierto a su proyecto base.

Tiene una verificación inteligente de etiquetas html, resalta errores , muestra sugerencias , autocompletado , panel de arrastrar y soltar HTML . Lo prefiero para aprender, ya que muestra sus errores y le brinda información sobre herramientas para saber qué agregar. Escriba <html>y presione CTRL+ SPACEy lo cerrará automáticamente agregando </html>.

Puede usar el editor de texto Sublime , con el complemento W3C Validator . Sublime es de pago pero puedes usar la versión de prueba sin límites. Pero te recomendaría comprar ya que es un editor increíble, créeme...

Proporcionaré un recorrido de cómo funcionará esto.

  • Abra Sublime Editor, instale Package Control (si no lo ha hecho)
  • Ahora instale el complemento W3C Validator utilizando el control del paquete. Puede consultar las imágenes a continuación para instalar el complemento.

Paso 1: haga clic en Preferencias , seleccione Control de paquetes

Paso 2

ingrese la descripción de la imagen aquí

Paso 3: escriba W3cValidators e instale

Ahora, ¿cómo usar esto?

Paso 1: haga clic en Herramientas y seleccione W3CValidators [1] ingrese la descripción de la imagen aquí

Paso 2: seleccione el DOCTYPE apropiado que desea validar, seleccione HTML5 a partir de ahora.

Ahora , cada vez que desee validar su documento, vaya al menú siguiendo los pasos anteriores o presione la tecla de acceso directo Win++ (si está en una máquina viuda)CtrlV

Y lo que verás es

ingrese la descripción de la imagen aquí

si por error

ingrese la descripción de la imagen aquí

Haga clic en la opción Abrir navegador para abrir en el navegador

ingrese la descripción de la imagen aquí

Obtendrá muchos complementos para actualizar automáticamente su CSS y editar en vivo.

Te sugiero que descargues Emmet para sublime, eso aumentará tu velocidad de codificación.

Fuente de las imágenes: mi propia PC

Puede usar el paquete de etiquetas ( sublime.wbond.net/packages/Tag ). Proporciona pelusa, finalización de etiquetas. Lo uso principalmente debido a la pelusa, ya que la finalización de etiquetas es una función integrada en Sublime Text 3.

Tweakstyle es una entrada relativamente nueva en el editor de código HTML. Actualmente se encuentra en versión beta pero tiene una buena cantidad de funciones.

Utiliza herramientas web de Chrome en el panel de vista previa para que pueda inspeccionar un elemento y editar las reglas de coincidencia.

Tiene un panel de vista previa que se actualiza cuando guarda su archivo HTML. Proporciona actualizaciones en vivo cuando cambia su CSS.

Cuando abre un archivo HTML, automáticamente intenta abrir cualquier archivo vinculado a él (CSS, Javascript, LESS, SASS). Puede tener varios archivos visibles a la vez para que pase menos tiempo haciendo clic de pestaña en pestaña.Captura de pantalla de TweakStyle

Señala los errores colocando una x roja junto a la línea con el error y una información sobre herramientas que explica por qué hay un error.

Se ejecuta en Windows, Mac y se ejecuta en varias distribuciones de Linux (tiene un archivo .deb o un archivo comprimido).

El único requisito que no cumple es el precio. Es como Sublime en el sentido de que tiene un precio, pero lo único con lo que tiene que lidiar es una ventana molesta con poca frecuencia. Parece aparecer una vez al día.

Ya respondí aquí sugiriendo Atom, de todos modos, si eres un principiante (e incluso si no lo eres) también te puede gustar un editor wysiwyg . El acrónimo "wysiwyg" significa "lo que ves es lo que obtienes", en general, un editor wysiwig te permite ver algo muy similar al resultado final desde la creación del documento e implica la capacidad de manipular directamente el diseño y el contenido de los documentos sin tener que escribir o recordar los nombres de los comandos de diseño, esto significa que un editor HTML de wysiwig proporciona una forma sencilla de crear páginas web sin el conocimiento previo de HTML, CSS o Javascript (pero le aconsejo que los estudie para tener ideas más claras sobre el tema). de creación de documentos web).

En este caso, siento sugerir BlueGriffon

ingrese la descripción de la imagen aquí

BlueGriffon es un editor web wysiwig basado en el motor de renderizado de Firefox, está disponible para Windows, Linux y OS X y está repleto de toneladas de funciones potentes que ya están en la versión gratuita (y puedes obtener aún más si compras una licencia).

Mención lateral:

Para completar, me gustaría mencionar aquí también a KompoZer .

ingrese la descripción de la imagen aquí

Al igual que BlueGriffon, KompoZer es un editor HTML wysiwyg (ambos se originan en NVU ) está disponible para Windows, Linux y OS X PERO la última versión estable (0.7.10) data del 30 de agosto de 2007 y la última versión de desarrollo (0.8b3 ) 2010-02-28... está prácticamente descatalogado.

Sugeriría a Geany como la alternativa para Linux. Tiene las siguientes características:

  • Resaltado de código (aunque no lo valida).
  • Es rápido y ligero.
  • Es fácil de usar.
  • Tiene un runbotón para probar su código en un navegador.
  • Tiene muchos complementos disponibles para él, incluso hay un complemento para la vista previa de pantalla dividida y para insertar códigos de caracteres HTML especiales, por ejemplo &nbsp; &gt; &lt;.
  • Se ejecuta en ambos Windowsy Linux.
  • Tiene plantillas HTML con licencias GNU/GPL adecuadas y una estructura de documento HTML básica.
  • Es 100% gratuito y de código abierto.

No es una herramienta profesional de nivel de producción, pero es excelente para principiantes. Es posible que desee darle una oportunidad.

Como nadie lo sugirió hasta ahora, les presentaré a Atom.

ingrese la descripción de la imagen aquí

Atom es un editor de texto que es moderno, accesible, pero pirateable hasta la médula: una herramienta que puede personalizar para hacer cualquier cosa, pero que también puede usar productivamente sin tener que tocar un archivo de configuración.

Atom es de código abierto, multiplataforma (OS X, Windows y Linux) y proporciona autocompletado inteligente. También está disponible un paquete de validación w3c .

Solo una nota final: dado que necesita un editor gratuito para trabajar con Windows o Linux, Coda está automáticamente fuera de los juegos aquí... ¿verdad?

HTML Editor es un editor de HTML en línea con un enfoque minimalista. Edite su código HTML, CSS y JavaScript y monitoree la vista previa instantánea en vivo. Este editor de HTML en tiempo real es perfecto para principiantes, aunque no cumple con su primer requisito.

Puede usar http://jsfiddle.net/ : cumple completamente con sus requisitos.

Gratis, formateador de HTML, WYSIWYG (lo que ves es lo que obtienes).

Y puedes compartirlo con cualquiera. Es un patio de recreo de HTML y Javascript.

ingrese la descripción de la imagen aquí

Además de los errores ortográficos obvios (que corregiré en una edición posterior), esta parece ser una herramienta en línea (es decir, ¡sin operación local! Esto puede ser importante, por ejemplo, para privacidad o NDA) para la edición de Javascript. Lo probé para HTML y no validó el código. Además, no es adecuado para principiantes.
Editor de HTML/IDE para principiantes
RespuestasAquíPolítica de privacidad1y, 1v