Ahora que nos ha visto crear un archivo HTML y una hoja de estilo externa, crearas una propia.
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`
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
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.