Skip to content

Index.html

Jump to bottom
Carolina Mamani edited this page Nov 6, 2023 · 3 revisions

Estructura básica del documento:

  • <!DOCTYPE html>: Es una declaración que define que el documento es un documento HTML5.
  • <html lang="en">: Es el elemento raíz del documento.
    • lang="en": Especifica que el lenguaje del contenido del documento es inglés.

Cabecera del documento (<head>):

  1. <meta charset="UTF-8">: Define la codificación de caracteres del documento como UTF-8.
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge">: Es una directiva para que Internet Explorer use su motor de renderizado más reciente.
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que la página web sea responsive, adaptándose al ancho del dispositivo.
  4. Links a fuentes: Se vinculan las fuentes de Google Fonts y Font Awesome.
  5. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">: Se incluye el CSS de Bootstrap 5, un marco de diseño popular.
  6. Sweet Alert: <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>: Es una biblioteca de JavaScript para crear alertas personalizadas.
  7. Meta tags: <meta name="keywords" content="ecommerce"> y <meta name="description" content="Daba store">: Se definen las palabras clave y la descripción del sitio para motores de búsqueda.
  8. <link rel="stylesheet" href="./css/style.css">: Se vincula un archivo CSS personalizado.
  9. <link rel="shortcut icon" href="./img/FAVICON.png" type="image/x-icon">: Es un icono que aparece en la pestaña del navegador.
  10. <title>Daba store</title>: Define el título que aparece en la pestaña del navegador.

Cuerpo del documento (<body>):

  1. CABECERA:
    • <nav class="navbar ... > ... </nav>: Es una barra de navegación que incluye el logo de "Daba Store" y enlaces como Home, Productos, Ofertas, Novedades, Contacto y un ícono de carrito de compras.
  2. BANNER:
    • <section class="imagenCarrusel" id="carruselInicio"> ... </section>: Parece que se intentó hacer un carrusel de imágenes, pero hay algunas partes del código comentadas. Las imágenes se repiten en la sección de <div class="slide">.
  3. Búsqueda:
    • <section class="search" id="search"> ... </section>: Se proporciona una barra de búsqueda con un campo de entrada para que los usuarios busquen productos.
  4. Productos:
    • <section> <div class="container_card" id="cartas"> ... </div> </section>: Hay una sección con un contenedor para tarjetas de productos y un mensaje "Loading...".
  5. Detalles del Producto:
    • <section class="bloque seis detallesVista" id="seis"> ... </section>: Una sección para mostrar detalles de productos seleccionados.
  6. FOOTER:
    • <footer class="footer ... > ... </footer>: Es un pie de página que incluye enlaces a redes sociales y un mensaje sobre la "UTN Tecnicatura en programación Cohorte 2022".
  7. Scripts:
    • <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" ... ></script>: Se incluye el JavaScript de Bootstrap.
    • <script src="./js/Index.js"></script>: Se vincula un archivo JavaScript personalizado llamado "Index.js".

Es importante mencionar que este código HTML solo proporciona la estructura y el diseño del sitio web. La funcionalidad (como qué sucede cuando se hace clic en un enlace o se busca un producto) dependerá de los scripts de JavaScript vinculados y de cualquier backend que pueda estar en funcionamiento.

Clone this wiki locally