ebolzico / homework-prep-course

Tareas de curso de preparacion

Homework: HTML

Ahora que nos ha visto crear un archivo HTML y una hoja de estilo externa, crearas una propia.

Ejercicio I

Crear un nuevo archivo dentro de la carpeta homework llamado homework.html donde deberás realizar lo siguiente:

I. Cree una página HTML básica.
  A. Cree el diseño básico para una página HTML usando html, head y body.
  B. Agregue un elemento de título y asigne a su página el título de "Tarea HTML de [Su nombre]".
  C. En el cuerpo, crea tres divs.
    1. En el primer div crea:
      * un elemento h1 que contiene [Tu nombre].
      * un elemento h3 que contiene "Henry".
      * un elemento h4 que contiene "tarea de HTML / CSS".
    2. En el segundo div crea:
      * un elemento span que contiene texto que describe su comida favorita.
      * un elemento 'a' que se vincula a su restaurante favorito.
    3. En el tercer div crea:
      * una lista desordenada con dos elementos dentro de la lista
      * una etiqueta img en cada elemento de la lista que se vincula a su comida favorita. (Use la búsqueda de imágenes de Google para encontrar una foto y copiar la dirección de la misma o sino puede usar esta: "https://i.picsum.photos/id/1080/400/200.jpg").

II Añade un poco de estilo
  A. Agregue la etiqueta de estilo a su documento HTML.
  B. Asignar al tercer div el id "thirdDiv".
  C. Asignar a los otros divs la clase "divClass".
  D. Asignar al span que se encuentra dentro de su segundo div el id "spanId".
  E. Agregue una regla de estilo a su elemento h1 cambiando el color del texto (Listado de colores: https://www.crockford.com/wrrrld/color.html).
  F. Agregue una regla de estilo al elemento img dándole un ancho de 400px.
  G. Agregue una regla de estilo a 'thirdDiv' cambiando la altura a 600px y el ancho a 500px.
  H. Agregue una regla de estilo a 'thirdDiv' cambiando el color de fondo por el que quiera.
  I. Cambie el tamaño de la fuente para 'spanId' a 18px.
  J. Asignar al id 'spanId' un margen de 50px.
  K. Asignar al id 'thirdDiv' un relleno (padding) de 50px.
  L. Asignar al id 'thirdDiv' un borde con cualquier ancho de color y estilo que elija.

III. Cree una hoja de estilo externa y mueva todas las reglas de estilo anteriores a la nueva hoja de estilo.
  A. Cree un archivo llamado styles.css en esta carpeta.
  B. COPIE todas sus reglas de estilo en este nuevo archivo.
  C. Agregue una etiqueta de enlace a su html que importe su nuevo archivo css.

IV. Suba su trabajo a su repositorio de github`

Crédito adicional:

Para hacer los extra credits, generalmente será necesario que investigue algunas cosas por su cuenta en Internet.

• Establecer una imagen como fondo de toda la página
• Centrar los div en la página
• Centrar todos los elementos en la página
• Lea sobre el posicionamiento y use la regla de posición en sus estilos
• Lea sobre flexbox y use flexbox para centrar todos los elementos en la página

Ejercicio II

Usando lo que aprendiste de HTML vas a crear un nuevo documento dentro de la carpeta de 'homework' llamado 'cv.html'. En el mismo vas crear tu propio Curriculum, deberá tener las siguientes secciones:

* Titulo
* Descripción Personal
* Educación
* Experiencias Laborales
* Skills
* Tu foto
* Hobbies

Además agregá una sección más donde expliques por qué estás estudiando esta carrera y cuáles son tus expectativas al finalizar la carrera.

Subir también este archivo a su repositorio de github

Para este ejercicio vos vas a tener que elegir que tags html usar para darle la mejor estructuración al html. Acordate que en el futuro vamos a ver más en profundidad los estilos CSS, por lo que por ahora no te preocupes tanto del layout más allá de las reglas básicas.