# Exercici 1: Estructura de la pàgina web Aquesta web ha de tenir diversos apartats. En aquest primer lliurament serà: * L’estructura de la plana inicial * Capçalera amb logo , títol de l’app i cercador a Google. * El menú de la pàgina * Realització dels apartats: presentació. Després d'aquests exercicis la web ha de quedar més o menys amb les vostres dades: ![](https://i.imgur.com/sm9GTpU.png) No us preocupeu: En el futur anirà millorant l'aspecte. # Exercici 1.1. Estructura de la pàgina El primer a fer és crear l’estructura de la pàgina web. Podeu veure-ho als apunts Heu d’obrir un fitxer en l’editor de text preferit per vosaltres (podeu mirar a https://liveweave.com/) I escriviu el codi següent: ``` <!DOCTYPE html> <html language="ca"> <head> <title>la meva app</title> <meta charset="UTF-8" /> </head> <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> </html> ``` ## Significats de les etiquetes: ``` <!DOCTYPE html> ``` En aquest cas la primera línia ens identifica l’arxiu que serà per a una pàgina web. L’element ```<html>``` indica que comença el codi HTML. L’atribut language li donem el valor de l’idioma amb el que escrivim el contingut de la nostra pàgina. L’element ```<head>``` ens permet definir aspectes que no es visualitzen a la pàgina web. per exemple la instrucció ```<meta charset="UTF-8" />``` fa que es mostrin bé els accents a la pàgina web i ```<tittle>``` que es mostri el títol a la finestra del navegador. ***Heu de fer aquesta primera versió de la vostra pàgina web, canviant:*** * el títol (segons web que trieu) * nom de la vostra app * de la botiga * el nom del personatge / grup música / sèrie * l’equip * l’atribut language pel valor que correspongui: * “ca” (català) * “en” (anglès) * “es” (castellà) # Exercici 1.2. Realitzar la capçalera Heu de fer la capçalera de la vostra pàgina web o sigui posar contingut dins l'element header. Ha d’aparèixer: * un logo (us l'inventeu si no existeix) * el títol de la pàgina web Per fer-ho just després de la línia que obre el `<body>` heu de posar l’element `<header>`. Per posar el logo heu de fer servir l’element `img`. Vegeu com es posen [imatges aquí](https://hackmd.io/@6IhQff4ES86IyEMPfQMkXQ/H1ubsWHCt#Imatge), No oblideu al final de tot tancar el header (`</header>`) [Consulteu aquí com fer-ho un header](https://hackmd.io/@6IhQff4ES86IyEMPfQMkXQ/H1ubsWHCt#L%E2%80%99element-de-cap%C3%A7alera-header). # Exercici 1.3. Realitzar el menú Ara heu de fer el menú de la vostra pàgina web. Inicialment només tindrà l'apartat: **presentació**. Com es fa un menú? Es posa dins els elements `<nav>` i és una llista d'enllaços. Mireu aquí que és [l'element nav](https://hackmd.io/@6IhQff4ES86IyEMPfQMkXQ/H1ubsWHCt#L%E2%80%99element-de-secci%C3%B3-de-navegaci%C3%B3), com es fa [una llista](https://hackmd.io/@6IhQff4ES86IyEMPfQMkXQ/H1ubsWHCt#Llistes) i com es fa un [enllaç](https://hackmd.io/@6IhQff4ES86IyEMPfQMkXQ/H1ubsWHCt#Enlla%C3%A7). Vegeu un exemple ``` <!DOCTYPE html> <html language="ca"> <head> <title>la meva app</title> <meta charset="UTF-8" /> </head> <body> <header></header> <nav> <ul> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> </ul> </nav> <main></main> <footer></footer> </body> </html> ``` el que fa als enllaços han d'enllaçar als apartats que fareu després. Són enllaços interns. Per ara només heu de posar Presentació que enllaçarà a #presentació. # Exercici 1.4. Peu de la pàgina web. També heu de crear el peu de pàgina, això es fa dins del tag footer. Podeu veure una explicació [aquí](https://hackmd.io/@6IhQff4ES86IyEMPfQMkXQ/H1ubsWHCt#Peu-de-p%C3%A0gina-footer). Per això posareu: * un paràgraf amb el vostre nom. * un paràgraf el mes i any actual. * un paràgraf amb un enllaç a la web de l'institut. * un paràgraf si voleu contacte amb vosaltres: podeu posar el vostre email o twitter o instagram. I enllaçar-ho. # Exercici 1.5. Realitzar la presentació. Ara anem a posar contingut a dins del tag `<main>`. [Aquí per veure els apunts](https://https://hackmd.io/@6IhQff4ES86IyEMPfQMkXQ/H1ubsWHCt#Agrupador-main). Heu de posar tota la vostra presentació dins d'un [tag div](https://hackmd.io/fmhDLzQcRg6qhNqsjicyIA?view#Element-div) que l'identificarem amb `id="presentacio"` així el menú anirà aquí. Per tant posareu: ``` <main> <div id="presentacio"> <p></p> </div> </main> ``` [En el paràgraf amb el tag p](https://hackmd.io/@6IhQff4ES86IyEMPfQMkXQ/H1ubsWHCt#Par%C3%A0graf) escriviu una explicació amb: * qui sou * per què la vostra pàgina web * explicació de l'app o de la botiga o de l'equip o del grup o la sèrie. El que sigui.