Desenvolupament web estàtic amb HTML + CSS
Conceptes¶

Sessió 4: Estructura Web¶

Objectiu Sessió 4

L'objectiu d'aquesta 4a sessió és treballar l'estructura bàsica del sistema de fitxers que tindrà una web estàtica i l'arquitectura dels enllaços que permetrar navegar-hi per tota ella funcionalment.

Estructura Web¶

Bé, fins ara hem fet bàsicament una sola pàgina web. Normalment un lloc web serà un conjunt més gran de diferents pàgines html, organitzades amb arxius .html.

Suposem que tenim un botiga virtual i exposem 100 articles, on cada un té la seva pàgina html amb diferent informació. Tenir-ho tot en una mateixa carpeta no serà fàcil de mantenir. Pel servidor o servei web, no seria un problema, però per nosaltres, si.

Per tant, el que farem serà tenir-ho tot ben organitzat en carpetes per conceptes. D'aquesta manera podrem accedir a les diferents pàgines html de contingut usant els enllaços i les rutes. D'aquesta manera tindrem més organitzat tot el seu contingut web. I la URL ens permetrà moure d'una carpeta o arxiu a un altre.

Warning

Quan es desenvolupa una aplicació web amb arquitectura MVC, els diferents elements de cada capa, no correspondran a la ruta URL. Però això queda fora del nostre treball ara.

Carpetes

De fet el que si farem a la part final d'aquest curs és tenir una pàgina generada dinàmicament al backend, a on li passarem la referència de l'article i s'omplirà amb les dades concretes. Així el format de la pàgina serà el mateix per a tots els articles.

Podem crear una estructura de carpetes web similar a:

Això ens implicarà alguns conceptes a consolidar:

Ruta base: Ruta de la URL a partir de la qual es referencia la web en global.
Ruta relativa: Ruta de la URL que fa referència des del directori al qual està el fitxer
Ruta absoluta: Ruta de la URL que indica de manera complerta des de la base.

Exemple

Tenim de ruta base:
http://www.apunts.cat
Si tenin un arxiu a dins de la carpeta Articles, i volem accedir a una imatge img1.jpg, farem segons:

ruta relativa: ../Imatge/img1.jpg
ruta absoluta: /Imatge/img1.jpg

Warning

Si usem rutes relatives i canviem la ubicació de l'arxiu que conté l'etiqueta <IMG> això farà que l'arxiu de la imatge no sigui accessible.

Ara bé, si posem l'etiqueta <base> a dins del <head>, canvia el seu comportament i passen a ser relatives del domini al qual s'ha referenciat, per exemple:

<base href='http://apunts.institutmontilivi.cat'>

Només serà absoluta si posem la ruta complerta:

<a href="http://www.diari.cat/article/23">Article 23</a>

Warning

Si posem l'etiqueta <base> amb un href d'un domini, aquesta serà la referència per a tots els enllaços del web. Si canviem el codi a un altre domini, això no funcionarà. I caldrà canviar-lo.

Una altra possibilitat més bàsica seria tenir:

<a href="http://www.diari.cat/articles/article.php?id=23">Article 23</a>

Enllaços¶

Info

Un enllaç és el que realment fa que un web sigui un web

Amb aquesta definició el que es vol indicar és que la navegació pels diferents continguts que genera que trobem en un lloc web serà usant els enllaços o links. Això permet que l'experiència de navegació de l'usuari sigui complerta i pugui moure's lliurement per diferents pàgines web o seccions del web. D'aquesta manera la quantitat d'informació d'una pàgina es pot ajustar més a la que es visualitza a la interfície.

Un dels elements claus que intervenen en la creació i usabilitat d'un enllaç és l'adreça web URL a la qual es refereix. Això permetrà navegar al fer click a aquesta URL

Els enllaços es visualitzen als navegadors, per defecte amb el següent estil:

Enllaç no visitat: subratllat i blau
Enllaç visitat: subratllat i lila
Enllaç actiu: subratllat i vermell

Tip

Evidentment tot això es pot modificar amb estils CSS

Usarem l'etiqueta <a> d'àncora, amb el següent format bàsic:

<a href='DESTÍ' target="ON OBRIM EL DESTÍ">Text</a>

Com a destí, tindrem:

Una ruta URL absoluta la navegació web serà cap a aquesta nova pàgina web: http://www.apunts.com/PHP
Una ruta relativa, la petició serà cap a una pàgina a dins de la mateixa estructura web: apunts/links.html
També podem anar a una posició a dins de la mateixa pàgina: #links, per fer-ho identificarem a la secció, element o etiqueta amb el seu atribut id.

Els valors de a on podem obrir el destí:

_self: navega en el mateix lloc, frame, context ...
_blank: navega en una nova pàgina (es pot configurar al navegador).
_parent: navega al context, frame de pare.
_top: navega al context més alt de navegació.
“un_de_propi": podem definir un de propi per que vagi obrint en aquesta pestanya.

Exemples¶

Exemple 1

Exemple 1:
Tenim un menú de navegació d'una web comercial d'una fleca
Tindrem un <nav> amb diferents opcions:

Sobre nosaltres
Productes
El·laboració
Novetats
On trobar-nos

p1-s4-ex1.html
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fleca</title>
  </head>
  <body>
    <header>
      <h1>Benvinguts a la nostra Fleca</h1>
    </header>

    <nav>
      <ul>
        <li><a href="sobre-nosaltres.html">Sobre nosaltres</a></li>
        <li><a href="productes.html">Productes</a></li>
        <li><a href="elaboracio.html">El·laboració</a></li>
        <li><a href="novetats.html">Novetats</a></li>
        <li><a href="on-trobar-nos.html">On trobar-nos</a></li>
      </ul>
    </nav>

    <main>
      <p>Explora el nostre menú per conèixer més sobre la nostra fleca, productes i novetats.</p>
    </main>
  </body>
</html>

Explicació:

<nav>: El menú de navegació està creat amb l'element <nav>, dins del qual hi ha una llista desordenada (<ul>) amb elements de llista (<li>). Cadascuna de les opcions enllaça a una pàgina HTML corresponent (ex.: sobre-nosaltres.html, productes.html, etc.).
Enllaços: Els enllaços utilitzen l'etiqueta <a> per redirigir l'usuari a les diferents pàgines del lloc web.
Estructura: El codi inclou un títol de la pàgina dins de <header> i un text d'introducció dins de <main>.

p1-s4-ex1.html p1-s4-ex1.html :fontawesome-solid-download:

Exemple 2

Exemple 2:

Volem generar un petit paràgraf sobre animals i enllaços a la wikipedia.

El regne animal és molt divers, amb espècies fascinants com els elefants, coneguts per la seva gran memòria, els tigres, depredadors elegants dels boscos, i els dofins, mamífers marins extremadament intel·ligents. Els ocells han desenvolupat la capacitat de volar, mentre que els rèptils, com les serps i els cocodrils, es distingeixen per la seva pell escatada. Entre els invertebrats, destaquen els insectes, que són el grup més nombrós, i les meduses, amb el seu cos gelatinós i tentacles urticants.

p1-s4-ex2.html
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slots</title>
  </head>
  <body>
    <h1>Exemple 2</h1>
    <hr>
    <h3>Volem generar un petit paràgraf sobre animals i enllaços a la <a href="https://ca.wikipedia.org/" target="_blank">wikipedia</a>  </h3>
    <p>
      El regne animal és molt divers, amb espècies fascinants com els<a href="https://ca.wikipedia.org/wiki/Elefant" target="_self"> elefants</a>, coneguts per la seva gran memòria, els<a href="https://ca.wikipedia.org/wiki/Tigre" target="_parent"> tigres</a>, depredadors elegants dels boscos, i els<a href="https://ca.wikipedia.org/wiki/Dof%C3%AD" target="_top"> dofins</a>, mamífers marins extremadament intel·ligents. Els<a href="https://ca.wikipedia.org/wiki/Ocells" target="contingutIframe"> ocells</a> han desenvolupat la capacitat de volar, mentre que els<a href="https://ca.wikipedia.org/wiki/R%C3%A8ptils" target="wikipedia"> rèptils</a>, com les serps i els cocodrils, es distingeixen per la seva pell escatada. Entre els invertebrats, destaquen els<a href="https://ca.wikipedia.org/wiki/Insecta" target="wikipedia"> insectes</a>, que són el grup més nombrós, i les<a href="https://ca.wikipedia.org/wiki/Medusa" target="wikipedia"> meduses</a>, amb el seu cos gelatinós i tentacles urticants.
    </p>

    <hr>

    <em>* Fixeu-vos com l'estil dels enllaços no és controlable per nosaltres sense usar estils.</em>
    <br>
    <em>* Fixeu-vos com els diferents target tenen efectes diferents. Per exemple obrir l'enllaç d'ocells al marc just de sota.</em>
  </body>
</html>

<br />

Explicació:

<a href=''> amb rutes a diferents articles que cal cercar a wikipedia

els 4 primers links amb target diferent en cadascun d'ells per veure com obrir-los a diferents emplaçaments
els 3 últims amb target="wikipedia", així obrirà tots els enllaços a la mateixa pestanya a part.

p1-s4-ex2.html p1-s4-ex2.html :fontawesome-solid-download:

Exemple 3

Exemple 3:
Ara usarem una imatge d'una placa base d'un ordinador i farem enllaços a informació específica.

p1-s4-ex3.html
<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placa Base</title>
  </head>
  <body>
    <h1>Placa Base d'un Ordinador</h1>
    <img src="placa_base.png" alt="Placa Base" usemap="#placaMap" width="400" height="400">

    <map name="placaMap">
      <!-- Àrea CPU -->
      <area shape="rect" coords="140,100,220,200" href="info-p1-s4-ex3/cpu.html" alt="CPU">
      <!-- Àrea RAM -->
      <area shape="rect" coords="260,30,340,250" href="info-p1-s4-ex3/ram.html" alt="RAM">
      <!-- Àrea DISC -->
      <area shape="rect" coords="10,20,50,250" href="info-p1-s4-ex3/ports.html" alt="DISC">
      <!-- Àrea SLOTS -->
      <area shape="rect" coords="40,240,250,360" href="info-p1-s4-ex3/slots.html" alt="SLOTS">
    </map>

    <p>Fes clic a les diferents parts de la placa base per obtenir més informació.</p>
  </body>
</html>

Explicació:

Imatge: L'etiqueta <img> carrega la imatge placa_base.jpg. Hauràs de reemplaçar-la amb la teva pròpia imatge de la placa base.
Mapes d'imatge (<map>): El codi defineix quatre zones clicables sobre la imatge mitjançant l'element <map> i les etiquetes <area>. Cada zona té una forma rectangular (shape="rect") amb coordenades (coords) que indiquen la seva posició dins de la imatge.
Carpeta info-p1-s4-ex3: Cada àrea enllaça a una pàgina dins la carpeta info-p1-s4-ex3, on hauràs de tenir les explicacions de cada component (cpu.html, ram.html, disc.html, slots.html).

p1-s4-ex3.html p1-s4-ex3.html :fontawesome-solid-download:

Desenvolupament web estàtic amb HTML + CSS Conceptes¶

Sessió 4: Estructura Web¶

Estructura Web¶

Enllaços¶

Exemples¶

Desenvolupament web estàtic amb HTML + CSS
Conceptes¶