¿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 ¿cómo comenzar? Aquí te explicaremos cómo crear un archivo HTML en 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 en Visual Studio Code, primero debes entender la estructura básica de un archivo, es decir, 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. Debes tener en cuenta las siguientes etiquetas para crear un archivo HTML.
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, donde va a estar ubicado todo el documento, su información. Puedes imaginarlo como el área de escritura disponible en una hoja de documento de Word.
- <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 visualizará en un navegador el usuario final.
Crear un archivo HTML en Visual Studio Code
Crear un archivo HTML en Visual Studio Code es un proceso sencillo y rápido. A continuación, te proporcionamos los pasos detallados:
- Abre Visual Studio Code: Inicia Visual Studio Code en tu sistema. Puedes descargarlo desde el sitio oficial si aún no lo tienes instalado.
- Crea un nuevo archivo: Haz clic en “File” (Archivo) en la esquina superior izquierda. Después, selecciona “New File” (Nuevo Archivo).
- Guarda el archivo con extensión HTML: Escribe tu código HTML en el nuevo archivo. Luego, guarda el archivo con una extensión “.html”. Puedes hacerlo presionando
Ctrl + S(oCmd + Sen Mac) y eligiendo la ubicación y el nombre del archivo. - Visualiza en el navegador: Abre el archivo HTML en el navegador para ver el resultado.
- Puedes hacer clic derecho en el archivo HTML en Visual Studio Code y seleccionar “Open with Live Server” si tienes la extensión Live Server instalada. Esto abrirá tu archivo en un servidor local y lo mostrará en el navegador predeterminado.
- Alternativamente, simplemente puedes abrir el archivo HTML con tu navegador favorito.
- Escribe tu código HTML: Dentro del archivo HTML, puedes comenzar a escribir tu código HTML. Un ejemplo básico podría ser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primer HTML en VS Code</title>
</head>
<body>
<h1>Hola, Mundo!</h1>
</body>
</html>Ten en cuenta que puedes personalizar este código según tus necesidades.
¡Listo! Con estos pasos, has creado y guardado un archivo HTML en Visual Studio Code. Puedes seguir editándolo y visualizándolo en tu navegador para ver los cambios en tiempo real.
Ahora que sabes cómo crear un archivo HTML, si quieres seguir aprendiendo muchísimo más no puedes perderte el Bootcamp Full Stack en Desarrollo Web, la formación con la que dominarás múltiples herramientas para desarrollar páginas web. ¿Listo para aprender todo lo necesario para conseguir el trabajo de tus sueños? ¡Da un giro a tu vida profesional y únete a nosotros ahora!
