Contenidos

Presentación del proyecto

Repaso
dev tools
—--------------------------

Clase 1
En esta primera clase vamos a empezar a escribir páginas web sencillas con etiquetas
HTML.

Para ello antes de comenzar debemos crear una carpeta a la que llamaremos “misitio”,
dentro de ella, crearemos otra con el nombre “imagenes” dentro de ambas carpetas
guardaremos toda la información relativa a nuestro proyecto.

IMPORTANTE: Las carpetas creadas no pueden tener nombre con tilde. Por ejemplo, si
queremos crear la carpeta “imágenes” el nombre debería ser “imagenes”

A lo largo de estas clases llevaremos adelante el proyecto “Google Clone” el mismo

consiste en la creación de una página web similar a la de la imagen:

Repaso

Comencemos con un breve repaso: HTML y CSS NO son lenguajes de programación.

HTML es un lenguaje que nos permite estructurar la información que será mostrada al
usuario en nuestro proyecto. mientras que, CSS es el lenguaje que nos permitirá dar estilo a
aquella información que forma parte de nuestro proyecto.

En html trabajamos con etiquetas, que cuando son contenedoras, se abren y se cierran.
Mientras que, cuando son de contenido no siempre se cierran como es el caso de la
etiqueta img.

A lo largo de nuestro proyecto trabajaremos con las etiquetas body, head, p, section, img,
etc

Como mencionamos anteriormente CSS nos permitirá darle estilo a nuestras etiquetas de
html a partir de reglas que se componen por el selector, por lo general el nombre de nuestra
etiqueta, y la propiedad por ejemplo color.

Sin embargo, además de selectores, en CSS también tenemos clases, invocadas

anteponiendo un punto, e identificadores (id) llamados a partir de la anteposición de un #.

Nuestro proyecto

Clonar la página de Google

A grandes rasgos podemos ver que la página a clonar contiene un header con una barra de
navegación, una sección principal que contiene el logo de la empresa, un input y botones y
termina con un footer con links.

Estructura de html

En años anteriores vimos la estructura básica de html y algunas etiquetas meta importantes
que debemos colocar dentro del head (estructura no visible para el usuario pero importante
para la configuración de la página).
Dentro del body irá todo el contenido principal con el que el usuario podrá interactuar.

Una herramienta importante

A lo largo de cualquier proyecto que tengamos por delante es importante mejorar nuestro
proceso de desarrollo por eso será necesario implementar el uso de Dev Tools ya que nos
permitirá ver en el navegador cómo nuestro código se comporta haciendo debugging
(depuración) en tiempo real de los problemas que se puedan presentar.

Con Dev Tools podremos manipular nuestro CSS en tiempo real y así hacer los cambios
que sean necesarios.

Para acceder a las Dev Tools haremos clic derecho en nuestra página y luego clic en
inspeccionar finalmente tendremos habilitadas las herramientas de desarrollo.

IMPORTANTE: En este curso sólo usaremos la pestaña elements que contiene la

información del html en la parte superior y de CSS en la parte inferior.
Para comenzar a practicar la escritura de estas etiquetas debemos ingresar a la plataforma
www.programacion.educabot.com y vamos a escribir nuestra primera página web como la
que se indica a continuación

Una vez que hayas terminado descarga el archivo, guardalo con el nombre head.html y
pruebalo. ¿Qué cambios observás?

Al código

Iremos poniendo las etiquetas semánticas empezando por el header que como vemos tiene
embebido una etiqueta nav

HEADER NAV

Para hacerlo pondremos una etiqueta ul, lista no ordenada, con elementos li.
dado que son 4 los elementos de navegación (Gmail. imágenes, icono, perfil) pondremos 4
li acompañados de la etiqueta a href para incluir enlaces

IMPORTANTE: Tanto el icono como la foto debemos modificarlos pero eso lo haremos más
adelante.

Descarga el archivo y ejecutalo. Con la ventana de la página abierta abramos el dev tools

A partir de ahora nos concentraremos en tratar de armar una buena arquitectura de

etiquetas contenedoras para que el contenido se pueda posicionar solo.

Para posicionar de manera adecuada los elementos del header, main y footer usaremos 3
layouts: Display layouts, display grid y flex.

Comencemos dando algo de estilo al body reseteando los margenes con las propiedades
margin, padding y estableciendo el tamaño y tipo de fuente.

Por último le damos estilo al header asegurando el ancho al 100% y la altura a 60px
tambien le pediremos a CSS que busque la etiqueta nav que está dentro del header y la
modifique con display flex que justificará el contenido de la etiqueta y con flex.end lo
enviamos a la derecha.
Descarga, guarda el proyecto con el nombre clase1.html y ejecutalo.