Cómo editar archivos HTML

Coescrito por Travis Boylls

Si prefieres codificar manualmente sitios web, puedes editar HTML en un editor de texto básico como Bloc de notas (Windows) o TextEdit (macOS). Si prefieres mover elementos alrededor de la pantalla y ver vistas previas en vivo, puedes utilizar un editor WYSIWYG (siglas en inglés de “What You See Is What You Get” o “lo que ves es lo que obtienes”) como Dreamweaver o Kompozer. En este wikiHow, aprenderás a abrir y editar un archivo HTML en una aplicación de edición visual o estándar.

Método 1

Método 1 de 4:
Utilizar un Bloc de notas en Windows

1
Haz clic en el botón Inicio de Windows
. Es el botón que tiene un logo de Windows en la barra de tareas. De manera predeterminada, este botón se encuentra en la esquina inferior izquierda. Al hacer clic en él, se abrirá el menú Inicio.
2
Escribe Bloc de notas. Este Bloc de notas se encuentra en el menú Inicio.
3
Haz clic en Bloc de notas. Tiene un ícono similar a una libreta con una cubierta azul.
4
Haz clic en Archivo. Esta opción se encuentra en la parte superior de la barra de menú en Bloc de notas. Al hacerle clic, aparecerá un menú desplegable donde verás un explorador de archivos que puedes utilizar para abrir archivos en el Bloc de notas.
5
Haz clic en Abrir. Es la segunda opción en el menú desplegable Archivo.
6
Selecciona “Todos los archivos” en el menú desplegable tipo de archivo. Haz clic en el menú desplegable llamado “Documentos de texto (.txt)” y selecciona “Todos los archivos”. Aquí verás todos los tipos de documentos (incluyendo los archivos HTML) en el explorador de archivos.
7
Selecciona un archivo HTML y haz clic en Abrir. Esto abrirá el documento HTML en el Bloc de notas. Aquí, podrás editar el código HTML.
- También puedes crear un nuevo documento HTML en el Bloc de notas.
8
Edita el código HTML. Para editar el código HTML en el Bloc de notas, necesitarás aprender HTML. Los elementos comunes que puedes editar son los siguientes:
- <!DOCTYPE html>: este se ubica en la parte superior del documento HTML e indicará al explorador web que se trata de un documento HTML.
- <html></html>: estas etiquetas se encuentran en la parte superior e inferior del documento HTML. Indicarán dónde inicia y termina el código HTML.
- <head></head>: estas etiquetas se encuentran en la parte superior del documento HTML. Indican dónde empieza y termina el encabezado del documento HTML. El encabezado del documento HTML contiene información que no se ve en la página web, incluyendo el título de la página, los metadatos y CSS.
- <title>Título de página</title>: estas etiquetas indican el título de la página. El título se encuentra en el encabezado del documento HTML. Escribe el título de la página entre estas dos etiquetas.
- <body></body>: estas etiquetas indican dónde empieza y termina el cuerpo del documento HTML. El cuerpo es donde se escribe todo el contenido de la página web y se ubica después del encabezado.
- <h1>Texto del encabezado</h1>: estas etiquetas crean las etiquetas del título. El texto que va entre las etiquetas "<h1>" y "</h1>" aparece como un texto grande en negrita y se ubica en el cuerpo del documento HTML.
- <p>Párrafo</p>: estas etiquetas se utilizan para crear un párrafo en el documento HTML. El texto que va entre las etiquetas "<p>" y "</p>" aparece como un texto de tamaño normal y se ubica en el cuerpo del documento HTML.
- <b>Texto en negrita</b>: estas etiquetas se utilizan para crear un texto en negrita. El texto que va entre las etiquetas "<b>" y "</b>" aparecerá en negrita.
- <i>Texto en cursiva</i>: estas etiquetas se utilizan para crear texto en cursiva. El texto que va entre las etiquetas "<i>" y "</i>" aparece en cursiva.
- <a href="URL">Texto del enlace</a>: esta etiqueta se utiliza para crear un enlace a otro sitio web. Copia la dirección web que desees vincular y pégala donde dice "URL" (entre comillas). Luego escribe el texto para designar al enlace donde dice "Texto del enlace" (no se necesitan las comillas).
- <img src="imagen URL">: esta etiqueta se utiliza para publicar una imagen utilizando HTML. Reemplaza el texto que dice "imagen URL" con la dirección web de la imagen.
9
Haz clic en Archivo. Esta opción se encuentra en la barra de menú en la parte superior de la pantalla.
10
Haz clic en Guardar como. Al hacer clic en esta opción, se abrirá un cuadro de diálogo que puedes utilizar para guardar el archivo.
- Si quieres guardar el archivo como su nombre y tipo de archivo existentes, simplemente haz clic en Guardar en el menú desplegable debajo de "Archivo".
11
Selecciona "Todos los archivos". Utiliza el menú desplegable al lado de “Tipo” y selecciona “Todos los archivos”.
12
Escribe un nombre para el archivo. Utiliza el cuadro al lado de “Nombre de archivo” para escribir un nombre para el archivo.
13
Escribe .html al final del archivo. Después de escribir un nombre para el archivo en el cuadro “Nombre de archivo”, agrega la extensión ".html" al final. Sin ella, el archivo se guardará como “.txt” en lugar de como un archivo HTML.
14
Haz clic en Guardar. Esto guardará el archivo.

Método 2

Método 2 de 4:
Utilizar TextEdit en una Mac

1
Haz clic en el ícono de la lupa
. Se encuentra en la esquina superior derecha en el escritorio de la Mac. Al hacerle clic, aparecerá una barra de búsqueda.
2
Escribe TextEdit en la barra de búsqueda. Aparecerá una lista de aplicaciones que coincidan con los resultados de búsqueda.
3
Haz clic en TextEdit.app. Se encuentra en la parte superior de los resultados de búsqueda, al lado de un ícono semejante a una hoja de papel y un bolígrafo.
4
Haz clic en Archivo. Se encontrará en la barra de menú de la parte superior de la pantalla al abrir TextEdit.
5
Haz clic en Abrir. Se abrirá un explorador de archivos que puedes utilizar para navegar en la Mac y abrir los archivos.
6
Haz clic en un archivo HTML y luego en Abrir. Los archivos HTML tienen una extensión llamada ".html" después del nombre. Utiliza el explorador de archivos para encontrar un archivo HTML y hazle clic para seleccionarlo. Luego haz clic en Abrir para abrir el archivo HTML en TextEdit.
7
Edita el código HTML. Puedes utilizar TextEdit para editar un código HTML. Necesitas aprender HTML de modo que puedas editarlo manualmente. Los elementos comunes que puedes editar son los siguientes.
- <!DOCTYPE html>: este se ubica en la parte superior del documento HTML e indicará al explorador web que se trata de un documento HTML.
- <html></html>: estas etiquetas se encuentran en la parte superior e inferior del documento HTML. Indicarán dónde inicia y termina el código HTML.
- <head></head>: estas etiquetas se encuentran en la parte superior del documento HTML. Indican dónde empieza y termina el encabezado del documento HTML. El encabezado del documento HTML contiene información que no se ve en la página web, incluyendo el título de la página, los metadatos y CSS.
- <title>Título de página</title>: estas etiquetas indican el título de la página. El título se encuentra en el encabezado del documento HTML. Escribe el título de la página entre estas dos etiquetas.
- <body></body>: estas etiquetas indican dónde empieza y termina el cuerpo del documento HTML. El cuerpo es donde se escribe todo el contenido de la página web y se ubica después del encabezado.
- <h1>Texto del encabezado</h1>: estas etiquetas crean las etiquetas del título. El texto que va entre las etiquetas "<h1>" y "</h1>" aparece como un texto grande en negrita y se ubica en el cuerpo del documento HTML.
- <p>Párrafo</p>: estas etiquetas se utilizan para crear un párrafo en el documento HTML. El texto que va entre las etiquetas "<p>" y "</p>" aparece como un texto de tamaño normal y se ubica en el cuerpo del documento HTML.
- <b>Texto en negrita</b>: estas etiquetas se utilizan para crear un texto en negrita. El texto que va entre las etiquetas "<b>" y "</b>" aparecerá en negrita.
- <i>Texto en cursiva</i>: estas etiquetas se utilizan para crear texto en cursiva. El texto que va entre las etiquetas "<i>" y "</i>" aparece en cursiva.
- <a href="URL">Texto del enlace</a>: esta etiqueta se utiliza para crear un enlace a otro sitio web. Copia la dirección web que desees vincular y pégala donde dice "URL" (entre comillas). Luego escribe el texto para designar al enlace donde dice "Texto del enlace" (no se necesitan las comillas).
- <img src="imagen URL">: esta etiqueta se utiliza para publicar una imagen utilizando HTML. Reemplaza el texto que dice "imagen URL" con la dirección web de la imagen.
8
Haz clic en Archivo. Esta opción se encuentra en la barra de menú en la parte superior de la pantalla.
9
Haz clic en Guardar. Esta opción se encuentra en el menú desplegable debajo de "Archivo". Al hacerle clic, se guardará el archivo HTML.
- Para cambiar el nombre del archivo, haz clic en Renombrar en el menú desplegable "Archivo". Escribe un nombre nuevo para el archivo en la parte superior de la pantalla. Asegúrate de incluir la extensión ".html" en la parte superior de la página.

Método 3

Método 3 de 4:
Utilizar Dreamweaver

1
Abre Dreamweaver. Dreamweaver tiene un ícono similar a un cuadrado verde con las letras "Dw" en el medio. Haz clic en este ícono en el menú Inicio de Windows, o en la carpeta Aplicaciones en una Mac, para abrir Dreamweaver.
- Adobe Dreamweaver requiere una suscripción. Puedes comprar una suscripción a partir de $20.99 al mes.
2
Haz clic en Archivo. Esta opción se encuentra en la barra de menú en la parte superior de la pantalla.
3
Haz clic en Abrir. Esta opción se encuentra en el menú desplegable debajo de "Archivo".
4
Selecciona un documento HTML y haz clic en Abrir. Utiliza el explorador de archivos para seleccionar un documento HTML en tu computadora y hazle clic para seleccionarlo. Luego haz clic en Abrir en la esquina inferior derecha.
5
Haz clic en Dividir. Es la pestaña intermedia en la parte superior de la página. Al hacer clic en esta opción, aparecerá una pantalla que contiene un editor HTML en la parte inferior y una pantalla de vista previa en la parte superior.^{[1]
X
Fuente de investigación}
6
Edita el documento HTML. Utiliza el editor HTML para editar HTML. La forma de editar HTML en Dreamweaver no varía mucho a la de hacerlo en el Bloc de notas o en TextEdit. A medida que escribes una etiqueta HTML, aparecerá un menú de búsqueda con las etiquetas HTML que coincidan. Puedes hacer clic en una de ellas para insertar sus etiquetas de apertura y cierre. Dreamweaver verificará si hay etiquetas de apertura y cierre para todos los elementos HTML.
- También puedes hacer clic en la ubicación en la que deseas insertar un elemento HTML en el editor HTML, y luego hacer clic en Insertar en la barra de menú en la parte superior de la pantalla. Haz clic en el elemento que quieras insertar en el menú desplegable para agregar automáticamente el código HTML.
7
Haz clic en Archivo. Al terminar de editar un documento HTML, haz clic en Archivo en la barra de menú en la parte superior de la pantalla.
8
Haz clic en Guardar. Esta opción se encuentra en el menú desplegable debajo de "Archivo". Al hacerle clic, se guardará el archivo HTML.

Método 4

Método 4 de 4:
Utilizar Kompozer

1
Dirígete a https://sourceforge.net/projects/kompozer/ desde un navegador web. Puedes utilizar cualquier navegador web en una Pc o en una Mac. Esta es la página de descarga de Kompozer. Es un editor HTML (WYSIWYG) gratuito que funciona tanto en Windows como en Mac.
2
Haz clic en Download (descargar). Es el botón verde cerca de la parte superior de la página. Al hacer clic en este botón, irás a la página de descarga aparte. Al cabo de unos 5 segundos, se iniciará la descarga.
3
Haz doble clic en el archivo de instalación. De manera predeterminada, los archivos descargados pueden encontrarse en la carpeta "Descargas" en una PC o en una Mac. También puedes hacerles clic desde el navegador web para ejecutar el instalador de Kompozer. Sigue las instrucciones a continuación para instalar Kompozer:
- Windows:
  - Si se te pregunta si quieres permitir que el instalador realice cambios en tu sistema, haz clic en Sí.
  - Haz clic en Siguiente en las ventanas de introducción.
  - Haz clic en el botón radial al lado de "Acepto el acuerdo" y luego en Siguiente.
  - Haz clic en Siguiente para utilizar la ubicación de instalación predeterminada o en Explorar para seleccionar una ubicación de instalación distinta.
  - Haz clic en Siguiente y luego nuevamente en Siguiente.
  - Haz clic en Instalar.
  - Haz clic en Finalizar.
- Mac:
  - Haz doble clic en el archivo de instalación de Kompozer.
  - Haz clic en KompoZer.app.
  - Haz clic en el ícono de Apple en la esquina superior izquierda.
  - Haz clic en Preferencias del sistema.
  - Haz clic en Seguridad y privacidad.
  - Haz clic en la pestaña General.
  - Haz clic en Abrir de todos modos en la parte inferior de la ventana.
  - Haz clic en Abrir en la ventana emergente.
  - Arrastra el ícono de Kompozer hacia tu escritorio.
  - Abre el Finder.
  - Haz clic en la carpeta Aplicaciones.
  - Arrastra el ícono de Kompozer desde el escritorio hacia la carpeta Aplicaciones.
4
Abre Kompozer. Utiliza los pasos a continuación para abrir Kompozer en una PC o en una Mac:
- Windows:
  - Haz clic en el menú Inicio de Windows.
  - Escribe "Kompozer".
  - Haz doble clic en el ícono de Kompozer.
- Mac:
  - Haz clic en el ícono de la lupa en la esquina superior derecha.
  - Escribe "Kompozer" en la barra de búsqueda.
  - Haz doble clic en Kompozer.app.
5
Haz clic en Archivo. Se encuentra en la barra de menú en la parte superior de la aplicación.
6
Haz clic en Abrir archivo. Es la segunda opción en el menú desplegable debajo de “Archivo”. Al hacerle clic, se abrirá un explorador de archivos que puedes utilizar para seleccionar un archivo HTML abierto.
7
Haz clic en un archivo HTML y luego en Abrir. Esto abrirá el archivo HTML en Kompozer.
8
Haz clic en Dividir. Es la pestaña intermedia en la parte superior de la página. Al hacer clic en esta opción, aparecerá una pantalla que contiene un editor HTML en la parte inferior y una pantalla de vista previa en la parte superior.
- Probablemente debas agrandar la aplicación para que tengas más espacio en el que trabajar.
9
Edita el documento HTML. La pantalla del código fuente HTML se encuentra en la parte inferior y puedes emplearla para editar HTML de la misma manera en que lo harías con el Bloc de notas o TextEdit. También puedes utilizar la pantalla de vista previa para editar el HTML utilizando los pasos a continuación:
- Utiliza el menú desplegable en la esquina superior derecha para seleccionar el tipo de texto (p.ej., encabezado, párrafo, etc.)
- Haz clic y escribe para agregar texto.
- Utiliza los botones en el panel de la parte superior de la pantalla para agregar negritas, cursivas, alineación de texto, sangrías o listas en el texto.
- Haz clic en el cuadrado de color ubicado en el panel de la parte superior de la pantalla para modificar el color del texto.
- Haz clic en el ícono Imagen en la parte superior de la pantalla para agregar una imagen en el documento HTML.
- Haz clic en el ícono que se asemeja a un eslabón de cadena para agregar un enalce al documento HTML.
10
Haz clic en el ícono Guardar. Al terminar de hacer los cambios en el documento, haz clic en el ícono Guardar en la parte superior de la pantalla. Se encuentra debajo de un ícono parecido a un disquete. Al hacerle clic, se guardará tu trabajo.