Sesión 2: Desarrollo práctico de una página WEB acerca de su vida personal

Laboratorio 1: Desarrollo práctico de una página web acerca de mi vida personal.
Se realizó un laboratorio para mostrar el uso y manejo de las herramientas de aplicaciones web, HTML, CSS y Bootstrap. El laboratorio consistió en la elaboración de una página web personal, donde se debía incluir información de mi persona, por ejemplo, una presentación, mis estudios y hobbies.
La página web debía seguir el siguiente diseño en lo que respecta las páginas:

  • Elementos HTML y CSS utilizados:
    • HTML:
  1. nav: Definir un menú de navegación, donde contiene enlaces a las diferentes secciones de una web.
  2. div: Se emplea para definir un bloque de contenido o sección de la página.
  3. a: Generar un enlace a otro documento de la web.
  4. ul: Define una lista no ordenadas de elementos.
  5. h1: Utilizado usualmente para identificar la cabecera más importante en una página web.
  6. p: Representa un párrafo de texto.
  7. br: Representa el salto de línea.
  8. footer: Representa al pie de una sección o documento.
  9. img: Representa una imagen en el documento.
    • CSS:
  1. background-color: Permite cambiar el color de fondo comúnmente de un contenedor o bloque.
  2. color: Permite establecer el color de un componente.
  3. padding: Establece el espacio de relleno requerido por todos los lados de un elemento.
  4. text-align: Define la alineación de un componente dentro de un bloque.
  5. margin: Permite establecer de forma abreviada el valor de una o más propiedades individuales, especificamente de 1 a 4 márgenes (top, right, bottom, left).
  • Bootstrap:
Bootstrap al ser un framework para diseño de sitios y aplicaciones web, con un diseño espectacular, de una forma fácil y sencilla, además de ser responsive, al momento de querer utilizarlo en distintos sitios web, se debe obtener de alguna manera todos los recursos que este excelente framework brinda, es por esto que cada vez que se desee utilizarlo se debe incluir, especificamente, en la etiqueta <head> ... </head> lo siguiente:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Por tanto, una vez realizado este paso seremos capaces de trabajar con las herramientas que el framework ofrece en nuestra página web.
    • div:
      • container: Proporciona un contenedor de ancho fijo responsive.
<div class="container">
  ...
</div>

      • container-fluid: Proporciona un contenedor de ancho completo, que abarca todo el ancho de la ventana.
<div class="container-fluid">
  ...
</div>

  • Repositorio del sitio web personal: Github


Referencias bibliográficas
Bootstrap 3 Tutorial

Comentarios

Publicar un comentario