¿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 crear un archivo HTML Visual Studio Code y así dar tus primeros pasos en el desarrollo web.
Estructura principal de un archivo HTML
Para comenzar a crear un archivo HTML Visual Studio Code, 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 archivo 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 en Visual Studio Code
Ya que conoces la estructura base de un fichero HTML, es hora de aprender cómo abrir un nuevo archivo en Visual Studio Code y crear un archivo HTML.
Aquí te explicaremos cómo iniciar un HTML en 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 crear 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!
