La página principal tiene que tener contenido: por ejemplo, una sección del equipo, un rótulo principal, y un menú para ir a las páginas de cada integrante.
Conviene empezar a armar ese rótulo. Y ver trabajos anteriores (TPS) para inspirarse.
Si exportamos desde Photoshop, usamos Guardar para web y elegimos jpg o png optimizado para web.
Siempre importante optimizar los archivos. Aunque esta clase no se trata de eso en profundidad, es clave tenerlo en cuenta.
Antes en HTML4 se usaban cajas (divs) para todo. Por ejemplo: caja para el header, para el contenido, menú, pie de página, etc.
Con HTML5 eso se resolvió con etiquetas semánticas: header, nav, article, footer, y otras como main para contenido principal.
También hay etiquetas específicas para imágenes o para contenido más puntual.
Recordar el uso de la etiqueta doctype para iniciar el archivo HTML. Dentro del head van las meta, como la de codificación UTF-8.
Vamos a ver la estructura semántica con un header, un h2 como subtítulo, y un footer.
En HTML toda página debería ser navegable. Para eso usamos un menú de navegación que esté entre las etiquetas nav.
Los enlaces se hacen con la etiqueta a y su atributo href.
Importante entender cómo moverse entre carpetas y subcarpetas. Para ir “para atrás” se usa ../.
Si movemos un archivo, hay que corregir la ruta en el código. Mejor evitar tildes, espacios, “ñ” o caracteres raros en los nombres.
Para insertar una imagen ya subida (por ejemplo en la carpeta img), se usa la etiqueta img con el atributo alt.
Vamos a armar un archivo html5 con el nombre del equipo en el title, y en el body toda la estructura semántica: header, contenido, footer, etc.
Debe tener datos de cada integrante y un menú para navegar a cada página.
HTML no tenía control visual al principio. En 1994 apareció CSS, que se fue mejorando hasta permitir animaciones, grillas, autolayout, etc.
CSS modifica las etiquetas HTML con reglas. Por ejemplo: body { background-color: red; }
Las unidades pasaron de ser fijas (px, cm) a relativas (em, rem, vw, vh) para que se adapten a distintas pantallas.
Una regla CSS tiene un selector (por ejemplo h1), y entre llaves van propiedades como color, font-size, etc. Separadas por ; y usando : para asignar valor.
Hay tres formas: en línea (en la misma etiqueta), en el head del HTML, o en un archivo externo.
Vamos a usar un archivo externo, así afecta a todas las páginas.
El CSS va en una carpeta css, y se conecta con el HTML usando la etiqueta link dentro del head.
Por ejemplo: si quiero aplicar estilos a todas las páginas, hago que todas usen ese archivo estilos.css.
Para cambiar el fondo: body { background-color: black; }
Para cambiar el color de un título: h1 { color: red; }
Podemos usar colores con nombre, códigos hexadecimales, o rgba.
Para cambiar la fuente, se necesita que esté disponible: o instalada localmente o importada (como con Google Fonts).
Eso lo vemos en una clase futura.
Cada estudiante va a tener su propia hoja de estilos, además de una general. La general va a estar en su carpeta css y va a modificar todo lo que esté conectado al body.