¿Cómo crear un archivo HTML?

Autor: | Última modificación: 24 de febrero de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

¿Quieres comenzar a dar tus primeros pasos en desarrollo web con HTML? Hasta ahora tienes una idea breve de qué es y cómo funciona pero, ¿Todavía no logras comenzar? Aquí te explicaremos cómo puedes crear un archivo HTML y así dar tus primeros pasos en el desarrollo web.

Estructura principal de un archivo HTML

Para comenzar a crear un archivo HTML, primero debes entender la estructura básica de un archivo, en otras palabras, cada uno de los aspectos que tu archivo debe de tener. Cada uno de estos archivos son etiquetas, muy especificas, que obligatoriamente debes tener para que el navegador las lea y logre identificar que lo que estás haciendo, efectivamente es un archivo HTML de forma correcta.

Etiquetas base

  • DOCTYPE: Esta etiqueta es la cabecera del documento, se encarga de especificar el tipo de archivo. Se podría decir que es el primer comando que le anuncia al navegador que, toda la información que pondrás a continuación es de un archivo HTML.
  • <html>: Esta etiqueta es el nodo raíz del documento HTML, es decir, en donde va a estar ubicado todo el documento, su información, imagínalo como el área de escritura disponible en una hoja de documento de Word. Una característica importante de la etiqueta es es es el lugar donde especificas el idioma del contenido.
  • <head>: Esta etiqueta se encuentra dentro de la etiqueta <html> y su función es ser el bloque de cabecera, es decir, se encarga de agregar o almacenar los datos de los datos, en otras palabras, los metadatos del documento.
  • <body>: Por último está el cuerpo de contenido, el lugar donde podrás colocar toda la información necesaria para tu documento, esta información es la que será visualizada en un navegador por parte del usuario final.

Crea un archivo HTML

Ya que conoces la estructura base de un archivo HTML, es hora de crear el archivo. Aquí te explicaremos cómo hacerlo desde Visual Studio Code con una guía básica y rápida.

  • Desde el menú de opciones de VSCode seleccionamos «Archivo -> Nuevo archivo» (o mediante las teclas de atajo Ctrl + N)
  • Ahora en la ventana de edición procederemos a codificar un archivo HTML básico:
  • Todavía no aparecen las etiquetas HTML coloreadas ya que no hemos guardado el archivo en el disco duro donde indicaremos con la extensión el tipo de archivo.
  • Para grabar el archivo desde el menú de opciones elegimos «Archivo->guardar» (o mediante las teclas de atajo Ctrl + S):
  • Ahora seleccionamos en el diálogo la carpeta y nombre de archivo que le asignaremos:
  • Después de ésta acción el contenido que hemos escrito en VSCode queda almacenado en el archivo ‘pagina1.html’ en la unidad C:\TutorialVSCode
  • Si introducimos un cambio con el editor VSCode podemos comprobar que en la pestaña cambia la cruz por un círculo indicando que debemos grabar los cambios introducidos:
  • Para actualizar los cambios en el archivo debemos seleccionar nuevamente la opción «Archivo guardar» o (Ctrl + S).
  • Podemos crear varios archivos y tenerlos abiertos en forma simultanea, cada uno en una pestaña diferente.

¿Cómo dominar por completo HTML y más?

Ahora que sabes cómo crear un archivo HTML, pero lo tuyo no es el autoaprendizaje, KeepCoding tiene la solución con nuestro Bootcamp Full Stack en Desarrollo Web dominarás múltiples herramientas para desarrollar y así conseguir el trabajo de tus sueños. ¡Da un giro a tu vida profesional!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]