Laboratorio 1 : Desarrollo práctico de una página WEB acerca de su vida personal

Para este laboratorio se tomará en cuenta únicamente la parte visual de la página web, es decir no se realizará funcional. Para entender mejor lo solicitado se presenta el enunciado del Laboratorio 1:

Para acceder al código HTML y CSS de la  página web creada como resultado del laboratorio use el siguiente link: https://drive.google.com/drive/folders/1byjlM9hELTEGUPWGojJ3YUDIHoQddy8v?usp=sharing

NOTA: En el los archivos subidos, el link al CSS contiene un path local, basta con cambiar el path a  "css/custom.min.css"

Elementos usados

HTML

• <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">:  se encarga de que la página realizada tenga la característica responsive, esto diciéndole al navegador como debe ajustarse.
•  <li><a class="active" href="home.html">Home</a></li>: usado para representar un item en una lista, en este caso, se usó como elemento del menu de navegación creado a base de una lista (por ello el atributo href).
• <div class="hero-image">: div realiza una división en e documento html, además funciona como contenedor, en este caso, fue usado para crear un banner con el título de la página (con ayuda de css).
• <h1 style="font-size:50px">Un poquito de mí...</h1>: representa un encabezado que es usado como título en la página, además este elemento posee css empotrado psts modificar su tamaño.
• <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">: define un enlace entre el documento y un recurso externo, en este caso se llama a un css en Internet con el fin de que pueda cargar los logos de las redes sociales.
• <p>Michael Pérez Ocampo</p>: identifica bloques de texto, es decir párrafos.
• <a href="https://twitter.com/jorocamp" class="fa fa-twitter"></a>: usado para vrear un hyperlink, en este caso a una cuenta de twitter, el atributo class es para hacer uso del css.
• <title>Un poquito de mí...</title>: define el titulo de la página, esta será desplegada en la pestaña del navegador.
• <img class="roundimg" src="css/media/me.jpg" alt="me" >: inserta una imagen en el HTML, esta imagen contiene un CSS para redondear bordes.
•  <input class="button" type="submit" value="Escuela y Colegio" onclick=" document.studies.action = 'school.html';" />: usados en forms para aceptar entradas del usuario, en este caso es un botón, que contiene un poco de javascript para redireccionar a otra página.

CSS

• .button {  background-color: #b56044; border: none;  color: white;  padding: 20px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 16px;  margin: 4px 2px;  cursor: pointer;  border-radius: 8px;  height: 60px;  width: 200px;}: esta clase se encarga de dar estilo a los elementos de clase color, redefine un color de fondo y elimina el borde, pinta las letras del mismo de color blanco y define el relleno, la alineación del texto entre otras cosas.
• .hero-text {  text-align: center;   position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);   color: #ffffff; }: toma un texto y lo agrega al centro de la pantalla, este CSS es usado en el título de la pantalla principal.
• .footer {    position: fixed;   left: 0;    bottom: 0;   width: 100%;    background-color: #5b1010;   color: white;   text-align: center;}: crea un pie de página, moviendo el elemento al final, además hace que abarque el máximo de la página de manera horizontal y lo rellena oara dar el efecto de footer legítimo.
• .active {  background-color: red;}:agrega un color a de fondo a un elemento, en este caso es usado para diferenciar la página actual o activa en el menú de navegación.
• ul {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  background-color: #5b1010;  position: fixed;  top: 0;  width: 100%;  z-index: 500 }: crea el menú de navegación, para esto asigna valores al elemento ul, y latrata como si fuera una barra de navegación.

Referencias

Category: HTML Tags. (n.d.). Retrieved from https://html.com/tags/

CSS Selectors. (n.d.). Retrieved from https://www.w3schools.com/csSref/css_selectors.asp