<!DOCTYPE html>
<html lang="es">
<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>Portafolio de [Tu Nombre]</title>
<link rel="stylesheet" href="style.css"> </head>
<body>
<header>
</header>
<main>
<h1>Hola, soy <strong>[Tu Nombre]</strong></h1>
<p>Soy un(a) apasionado(a) desarrollador(a) web con experiencia en [Tus habilidades]. Me encanta crear soluciones innovadoras y funcionales.</p>
<div class="botones"> <a href="https://www.instagram.com/[TuUsuario]" target="_blank">Instagram</a>
<a href="https://github.com/[TuUsuario]" target="_blank">GitHub</a>
</div>
<img src="ruta/a/tu/imagen.jpg" alt="Foto de [Tu Nombre]">
</main>
<footer>
<p>© 2023 [Tu Nombre] - Todos los derechos reservados.</p>
</footer>
</body>
</html>
Explicación detallada:
Etiquetas semánticas: Se usan <header>, <main> y <footer> para estructurar el contenido de forma lógica.
Etiquetas meta:
lang="es": Indica que el idioma principal del documento es español.
charset="UTF-8": Establece la codificación de caracteres para asegurar una correcta visualización.
X-UA-Compatible: Mejora la compatibilidad con Internet Explorer.
viewport: Optimiza la visualización en dispositivos móviles.
Título: La etiqueta <title> define el título que se muestra en la pestaña del navegador y en los resultados de búsqueda.
Encabezado (h1): El título principal de la página, con parte del texto resaltado usando <strong>.
Párrafo (p): Introduce brevemente al desarrollador o la empresa.
Enlaces (a): Permiten acceder a perfiles de Instagram y GitHub en nuevas pestañas (target="_blank").
Imagen (img): Muestra una imagen, con el atributo alt proporcionando una descripción para la accesibilidad.
CSS (style.css): Se enlaza una hoja de estilos externa para dar formato visual al contenido (colores, fuentes, diseño, etc.).
Recomendaciones:
Personaliza: Reemplaza "[Tu Nombre]", "[Tus habilidades]", "[TuUsuario]" y la ruta de la imagen con tus datos reales.
Diseño: Crea un archivo style.css y añade reglas CSS para dar estilo a tu portafolio según el diseño de Figma.
Contenido: Amplía la información en el <main> con más detalles sobre tus proyectos, experiencia y habilidades.
