PDF download Descargar el PDF PDF download Descargar el PDF

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

PDF download Descargar el PDF
  1. 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. Este Bloc de notas se encuentra en el menú Inicio.
  3. Tiene un ícono similar a una libreta con una cubierta azul.
  4. 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. Es la segunda opción en el menú desplegable Archivo.
  6. 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. Esto abrirá el documento HTML en el Bloc de notas. Aquí, podrás editar el código HTML.
  8. 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. Esta opción se encuentra en la barra de menú en la parte superior de la pantalla.
  10. 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. Utiliza el menú desplegable al lado de “Tipo” y selecciona “Todos los archivos”.
  12. Utiliza el cuadro al lado de “Nombre de archivo” para escribir un nombre para el archivo.
  13. 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. Esto guardará el archivo.
    Anuncio
Método 2
Método 2 de 4:

Utilizar TextEdit en una Mac

PDF download Descargar el PDF
  1. Aparecerá una lista de aplicaciones que coincidan con los resultados de búsqueda.
  2. 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.
  3. Se encontrará en la barra de menú de la parte superior de la pantalla al abrir TextEdit.
  4. Se abrirá un explorador de archivos que puedes utilizar para navegar en la Mac y abrir los archivos.
  5. 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.
  6. 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.
  7. Esta opción se encuentra en la barra de menú en la parte superior de la pantalla.
  8. 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.
    Anuncio
Método 3
Método 3 de 4:

Utilizar Dreamweaver

PDF download Descargar el PDF
  1. 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. Esta opción se encuentra en la barra de menú en la parte superior de la pantalla.
  3. Esta opción se encuentra en el menú desplegable debajo de "Archivo".
  4. 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. 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]
  6. 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. Al terminar de editar un documento HTML, haz clic en Archivo en la barra de menú en la parte superior de la pantalla.
  8. Esta opción se encuentra en el menú desplegable debajo de "Archivo". Al hacerle clic, se guardará el archivo HTML.
    Anuncio
Método 4
Método 4 de 4:

Utilizar Kompozer

PDF download Descargar el PDF
  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. 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. 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 .
      • 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. 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. Se encuentra en la barra de menú en la parte superior de la aplicación.
  6. 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. Esto abrirá el archivo HTML en Kompozer.
  8. 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. 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. 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.
    Anuncio

Advertencias

  • No olvides guardar el documento mientras lo editas. Algo podría salir mal en cualquier momento.
Anuncio

Acerca de este wikiHow

Esta página ha recibido 15 908 visitas.

¿Te ayudó este artículo?

Anuncio