Per definir una estructura HTML s’ha de tenir clar quin tipus de pàgina volem obtenir. Desprès hi aplicam el CSS per definir el seu estil.

Alhora de crear una pàgina web es pot seguir un patró fent un recull de pàgines semblants per tals que ens serveixin de guia.

En principi la pàgina ens queda com una idea que s’ha de desenvolupar. El procediment bàsic per desenvolupar i impementar la idea és:

1. Dibuixar per saber quina distribució de continguts hi volem tenir.
2. Crear l’estructura bàsica HTML.
3. Classificar i identificar els elements que formen l’estructura.
4. Estilar la pàgina. Quan ja tenim creada la estructura, o part d’ella, podem procedir amb els estils CSS.

Pràctica guiada

Aquesta pràctica guiada ens servirà per entendre els conceptes clau. Posam un exemple de pàgina web i la construïm pas a pas:

1. Dibuixar la distribució

Dibuixam una distribució d’exemple per la pàgina on han de quedar clares les divisions d’espais.

Aquest és l’exemple que ens servirà de guia.

El dibuix ens serveix per mostrar la idea de com volem tenir la pàgina. El següent punt és implementar l’estructura HTML.

2. Crear l’estructura HTML

De la pàgina guia cream el seu codi amb elements HTML.

1. Definim les divisions amb un element <div> … </div>
   <div>títol pàgina</div>
   <div>enllaços a seccions</div>
   <div>contingut1</div>
   <div>contingut2</div>
   …
   <div>contingutX</div>
2. Elements de cada divisió:
   • Títol pàgina:
     • Té un títol que el posam dins un element <h1>.
     • Té un subtítol que el posam dins un element <h2>.
       
       <div>
       <h1>Títol de la pàgina</h1>
       <h2>Subtítol de la pàgina</h2>
       </div>
       
   • Seccions: És una llista d’enllaços als continguts.
     • Té una llista <ul> o <ol>
     • Té elements de llista <li> que són enllaços <a href=”enllaç”>
       
       <div>
       <ul>
       <li><a href=”contingut”>contingut1</a></li>
       <li><a href=”contingut”>contingut2</a></li>
       …
       <li><a href=”contingut”>contingutX</a></li>
       
   • Fitxa de contingut: Cada fitxa de contingut segueix un patró on cada fitxa té els elements:
     • Títol de contingut que el posam dins un element <h2>
     • Contingut de text que el posam dins un paràgraf <p>
     • Imatge de contingut que el posam dins un element <img>
       
       <div>
       <h2>Titol de contingut</h2>
       <p><paràgraf de contingut</p>
       <img src=”http://aula.gimnesia.net/fotos/3.jpg“>
       </div>

Exercicis:

1. Implementació sobre un nou pen de l’estructura anterior. Amb tres enllaços a la llista i tres continguts. En principi no posam la direcció d’enllaç.
2. Canvia el títol i el subtítol de la pàgina. Posa un títol i de subtítol el teu nom.
3. Afegeix un element div per tal que sigui el peu de pàgina. Ha de tenir un paràgraf i dos enllaços.
4. Canvia el número (de 1 fins a 98) de l’enllaç de les fotografies per tal que cada una de les imatges sigui diferent. No te preocupis si la fotografia és massa grossa o massa petita. L’estil es treballa amb el CSS.
5. Analitza i comenta al paràgraf el contingut d’href.
   
   

3. Identificar i Classificar elements

Aquest és un punt clau per entendre una pàgina HTML és la de classificar i identificar els elements.
Aquesta tasca és pot concretar damunt el dibuix de la pàgina i ens servirà per poder treballar sobre ella d’una manera controlada.

Idenficar:

És posar un nom a un element mitjançant l’atribut id.

1. A una pàgina hi pot haver tants d’identificadors com es vulguin.
2. Un identificador identifica a un sol element.
3. No es pot repetir el nom d’identificador dins una mateixa pàgina.
   

<p id=”paragrafPrincipal”>Aquest és un paragraf identificat com a paragrafPrincipal, l’identificador pertany a un sol element. Com ja hem vist l’identificador ens serveix per “identificar” un element desde Javascript i podem interactuar (veure i modificar) els seus valors.</p>

See the Pen identificador by PereAntoni (@pereantoni) on CodePen.

Classificar:

Alguns elements de l’estructura poden de la mateixa classe. Per exemple el conjunt de continguts de la pàgina que estam treballant, un conjunt de botons a un programa, …

Ens per formar grups d’elements de la mateixa categoria, classe.

Un element pot pertanyer a zero, una o vàries classes.

See the Pen Classes by PereAntoni (@pereantoni) on CodePen.

4. Aplicar estils amb CSS

Quan tenim els elements identificats i classificats els hi podem donar estil amb CSS, són fulles d’estil en cascada.

Per entendre els estils css mirau el manual de w3schools:

1. Introducció.
2. Sintaxi.
3. Selectors
4. Com posar CSS.

On s’aplica l’estil:

1. Arxiu extern: desde un arxiu .css on s’especifiquen els estils CSS. Aquesta modalitat és la més adequada alhora de fer una pàgina web coherent.
2. Dins l’arxiu html: a la capçalera de l’arxiu html entre
   
   <style>
   .estilSobreUnaClasse{color:blue;}
   #estilSobreUnIdentificador{color:red;}
   p {color:black}
   </style>
   <p>Seré un paràgraf de color negre perqué som un paràgraf.</p>
   <p class=”estilSobreUnaClasse”>Seré un paràgraf de color vermell perque som de la classe estilSobreUnaClasse</p>
   <p id=”estilSobreUnIdentificador”>Seré un paràgraf de color blau perque estic identificat com estilSobreUnIdentificador</p>
   
3. Inline: directament sobre els atributs dels elements. És la forma menys apropiada per aplicar estils.
   <p style=”color: red”>Seré un paràgraf de color vermell perqué m’ho posa dins la marca.</p>

See the Pen Aplicar CSS by PereAntoni (@pereantoni) on CodePen.

Exercicis:

Treballa sobre el mateix pen dels exercicis anteriors dels exercicis anteriors

1. Identifica el div de títol, com a “titol”. Al CSS canvia les propietats per tal de tenir un capçalera com la del disseny.
   Recorda que has de posar #titol {propietats…}
   Segueix el tutorial de w3schools i canvia:
   1. Colors
   2. Fons
   3. Costats
   4. Marges
   5. Padding
   6. Model de capça
2. Identifica el div de seccions com a “seccions”. Fes el mateix que a l’exercici anterior, afegim que aquest element ha d’estar al costat esquerra. Mira la propietat de float i fes que sigui de 200px i estigui a l’esquerra.
3. Classifica cada element del llistat com a “titolSeccio”. Canvia de font https://www.w3schools.com/css/css_text.asp

https://www.optimizesmart.com/introduction-to-dom-nodes-css-selectors-for-google-tag-manager/