Introducció

En el següent document s'explicaran les etiquetes relacionades amb el contingut d'una plana web. Els elements que es cobriran en aquest document són:

  • Títols
  • Paràgraf
  • Imatges
  • Llistes
  • Enllaços

Títols

Per a crear un títol en HTML 5 utilitzem l'etiqueta h seguida per un número entre 1 i 6 (ambdós inclosos). Cal tenir en compte que com més petit sigui el número més important serà el títol i, per tant, més gran serà el tamany de visualització de la lletra per defecte en el navegador.

Codi Result

Paràgraf

Per a inserir un paràgraf en la nostra plana web utilitzem l'etiqueta p . Un paràgraf pot contenir múltiples elements: un enllaç, una llista, una taula, una imatge.... o simplement texte. Els salts de línia que incloem dins un paràgraf no es visualitzaran en el navegador. Si volem utilitzar un salt de línia, cal utilitzar l'etiqueta br . L'etiqueta br no té contingut.

Codi Result

Observeu com en el codi s'ha optat per a no tancar l'etiqueta br . Cal tenir en compte que en HTML5 no és obligatori tancar totes les etiquetes. Una alternativa al codi amb exactament el mateix resultat seria:


<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="utf-8">
       <title>Etiqueta p</title>
   </head>
   <body>
       <h1>Paràgraf</h1>
       <p>El contingut d'aquest paràgraf és molt simple i només conté text.<br />2ona línia</p>
   </body>
</html>

Imatges

Utilitzem l'etiqueta img per a incloure una imatge en la nostra plana web. L'etiqueta img és una etiqueta sense contingut: només permet atributs. 2 atributs són obligatoris per tal que la nostra plana es pugui validar de forma correcte:

  • src : indica l'ubicació de la imatge.
  • alt : alternativa al text. La funció d'aquest atribut és la d'explicar la imatge per tal de fer accessible la plana a les persones amb deficiències visuals.

Exemple


<!DOCTYPE html>
<html lang="en">
   <head>
       <title>Etiqueta p</title>
       <meta charset="utf-8">
   </head>
   <body>
       <img alt="Logo plana web" src="logo.png" />
   </body>
</html>

Atribut alt - etiqueta img

El contingut de l'atribut alt dependrà del tipus i de la funcionalitat de la imatge. Podem diferenciar els següents tipus:

  • Informatives:

    • Imatges que representen conceptes i informació. El contingut de l'atribut alt haurà de ser un text descriptiu que descrigui almenys la informació essencial de la imatge.

  • Decoratives:

    • Imatges que milloren la presentació de la plana web. En aquest cas, com que no transmeten cap mena d'informació, inicialitzarem l'atribut "alt" (obligatori) a "". (alt="")

  • Funcionals:

    • Imatges que enllacen amb altres planes web, per enviar informació al servidor, enviar un correu,... o qualsevol altre funcionalitat inclosa en la nostra plana web. En aquest cas el contingut de l'atribut "alt" serà la descripció de la funcionalitat de l'enllaç.

  • Imatges de text:

    • Les imatges de text són aquelles que el seu contingut està format per text. Cal evitar aquest tipus d'imatges (excepte que sigui el logo), però en el cas que s'incloguin, el contingut de l'atribut "alt" haurà de ser el mateix que el de la imatge.

  • Diagrames i gràfics:

    • El contingut de l'atribut "alt" serà la descripció de la informació visualitzada en el diagrama o en el gràfic.

  • Mapa d'imatges:

    • Un mapa d'imatges consisteix en una imatge amb diverses zones interactives: l'usuari pot interactuar en cada una d'elles. Per a cada una de les zones interactives de la imatge, caldrà incloure un atribut "alt" que descrigui la funcionalitat de la zona.

Atribut src - Etiqueta img

Quan s'ha d'incloure una imatge en una plana web cal tenir en compte l'ubicació física de la imatge: on està emmagatzemada la imatge que volem visualitzar. Utilitzem l'atribut src per a referenciar l'ubicació de la imatge.

Les diferents opcions són:

  1. En un altre servidor
  2. En el mateix servidor on hi ha la plana web 2.1. En el mateix directori de la plana web 2.2. En un directori diferent

En un altre servidor

Per a referenciar una imatge d'un altre servidor web serà precís saber el nom del servidor i l'ubicació de la imatge dins d'aquest servidor. Per tant, cal saber com accedir a la imatge. La forma més simple, és accedir a través del navegador a la imatge, copiar la seva url, i associar aquesta "url" a l'atribut src del tag img .

Vídeo: com enllaçar amb imatges externes

No es recomana l'accés a imatges externes al nostre servidor excepte en el cas que se'n tingui el control: cal tenir en compte que es poden produir canvis que afectin al funcionament de la nostra plana web.

ATENCIÓ: només es permet l'enllaç a les imatges de les quals disposis dels drets o sigui públiques.


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>External image</title>
    <meta charset="utf-8">
  </head>
  <body>

    <img alt="Google logo"
         src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />

  </body>
</html>

En el mateix servidor

Quan les imatges estan ubicades en el mateix servidor on resideix la plana web, sempre cal utilitzar rutes relatives: es referencia la imatge des de l'ubicació de la plana web que conté la imatge. Per a realitzar aquesta refereǹcia és necessari navegar per l'arbre de directoris, tenint en compte:

  • / (barra): utilitzarem la barra com a separador de directoris o carpetes. Per exemple, "images/small" és una referència al directori "images" i dins d'aquest directori a "small".
  • . (punt): fa referència al directori actual. Per exemple, "./images/small" equival a "images/small". L'utilització del "." és opcional.
  • .. (2 punts): accés al directori anterior.
Codi Result

Vídeo: utilització imatges amb HTML 5 - atribut src de l'etiqueta img

Llistes

Una llista és una col·lecció d'elements que mantenen certa relació entre ells. Utilitzem les llistes quan ens cal enumerar una sèrie d'elements: per exemple, els productes que hem de comprar, o les pel·lícules que tenim a casa, ...

HTML 5 defineix tres tipus de llista que es diferencien per la seva funció:

  1. Llistes ordenades.
  2. Llistes desordenades.
  3. Llistes de descripció.

Llistes ordenades

S'utilitzen les llistes ordenades quan es volen citar a una sèrie d'elements i l'ordre és important . Alguns exemples de quan s'utilitza una llista ordenada són: elaboració d'una recepta de cuina, guia telefònica , ...

Per a crear una llista utilitzem l'etiqueta ol (Ordered List). Per a cada un dels ítems que conformen la llista ordenada, s'utilitza l'etiqueta li (List Item). El propi navegador és l'encarregat d'enumerar els diferents elements de forma automàtica.

Codi Result

Atribut start

L'atribut start de l'etiqueta ol ens permet especificar el número inicial de la llista ordenada. Així, per exemple, el següent codi HTML inicia la llista pel número 100.

Codi Result

Atribut reversed

L'atribut reversed de l'etiqueta ol ens permet ordenar la llista de forma inversa: la numeració es va decrementant a partir del nombre especificat ( atribut start ). En el cas que no s'indiqui l'atribut start, l'últim element de la llista serà sempre el número 1.

Codi Result
Codi Result

Nota : en HTML5 l'atribut reversed no té associat cap valor. Per tant, si apareix indica que es vol la llista en ordre invers, en cas contrari la numeració dels elements serà la natural. Els 2 exemples anteriors no compleixen amb la normativa de codificació XML on tot atribut ha de tenir associat un valor!

Llistes desordenades

S'utilitzen les llistes desordenades quan es volen citar a una sèrie d'elements i l'ordre NO és important , per exemple, una llista de la compra.

Per a crear una llista utilitzem l'etiqueta ul (Unordered List). Per a cada un dels ítems que conformen la llista desordenada, s'utilitza l'etiqueta li (List Item). La visualització de la llista dependrà del navegador que utilitzem.

Codi Result

Nota : tot i que amb l'atribut type associat a l'etiqueta ol es pot canviar la visualització de la llista ("bullet") la seva aplicació no està recomanada (atribut obsolet) . Més endavant s'estudiaran alternatives a aquest atribut.

Llistes de descripció

Les llistes de descripció són aquelles que ens permeten associar una sèrie de termes (mots) i incloure la seva descripció. Per a definir una llista de descripció utilitzem l'etiqueta dl (Description List).

A diferència dels altres tipus de llistes, les llistes de descripció incorporen termes conjuntament amb la seva descripció: es necessita una etiqueta dt (data term) per a definir el terme, i una segona etiqueta dd (data description) per adjuntar la seva descripció.

Codi Result

Enllaços (links)

Els links són els elements que ens permeten navegar entre diferents planes web d'una mateixa aplicació o d'aplicacions diferents o bé dins una mateixa plana, podent accedir directament al contingut d'una determinada secció. Els links es poden incloure en diferents elements, tot i que habitualment aquests estan associats a un determinat text o a una imatge.

Per a crear un enllaç utilitzem l'etiqueta a conjuntament amb l'atribut href que ens permet especificar l'ubicació de l'enllaç on es vol accedir. El valor de l'atribut href dependrà d'on estigui la plana web que es vol accedir. Les diferents opcions són:

  1. En un altre servidor
  2. En el mateix servidor de la plana web 2.1. En el mateix directori de la plana web 2.2. En un directori diferent
  3. A una secció d'una plana web

En un altre servidor

Per a crear un enllaç a una plana web d'un altre servidor, cal saber l'URL de la plana web (podem obtenir la informació de la barra de direccions del navegador). Associarem aquesta URL a l'atribut href de l'etiqueta a .


<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Flags of our fathers</title>
      <meta charset="utf-8">
   </head>
   <body>
   <!-- ******* FLAGS OF OUR FATHERS ***** -->
      <h1>Flags of our fathers</h1>

      <dl>
         <dt>Directed by</dt>
         <dd>
             <a href="https://en.wikipedia.org/wiki/Clint_Eastwood">
                 Clint Eastwood
             </a>
         </dd>
      </dl>
    </body>
</html>

En el codi anterior s'ha creat un enllaç a Wikipedia pel director Clint Eastwood. El problema que té aquest enllaç és que la plana enllaçada s'obre en la mateixa finestra: deixem d'estar en la nostra plana web per accedir a una plana d'un altre servidor. Aquest comportament no sempre és desitjable: hem de facilitar l'accés a l'usuari a la nostra plana web. La solució passa per a obrir la nova plana web en una finestra nova.

Atribut target etiqueta a

L'atribut target ens permet obrir un enllaç en una nova plana web. Quan aquest atribut està present assigna el valor de l'atribut target al nom de la finestra en la qual s'ha d'obrir la plana web. El seu funcionament és el següent:

  1. Si el valor de l'atribut target és el de _blank , sempre s'obre una finestra nova.
  2. Si el valor de l'atribut target és diferent de _ _blank:
    1. El valor de l'atribut target no està associat a cap finestra
      1. S'obre una finestra nova en el navegador
      2. S'associa el valor de l'atribut target com a nom de la nova finestra oberta.
      3. S'obre l'URL de l'enllaç a la finestra.
    2. El valor de l'atribut target està associat a un nom de finestra oberta
      1. S'obre l'URL en la finestra associada al nom del valor de l'atribut target.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Flags of our fathers</title>
      <meta charset="utf-8">
   </head>
   <body>
   <!-- ******* FLAGS OF OUR FATHERS ***** -->
      <h1>Flags of our fathers</h1>

      <dl>
         <dt>Directed by</dt>
         <dd>
             <a href="https://en.wikipedia.org/wiki/Clint_Eastwood" target="eastwood">
                 Clint Eastwood
             </a>
         </dd>
      </dl>
    </body>
</html>

El codi anterior, quan es clica sobre el text "Clint Eastwood" obre una nova finestra en el navegador i amb el contingut de la plana "https://en.wikipedia.org/wiki/Clint_Eastwood".

Video - Com crear enllaços a planes públiques d'Internet amb HTML

En el mateix servidor

Quan les dues planes web (la que es vol enllaçar i la que es crea l'enllaç) estan ubicades en el mateix servidor, sempre cal utilitzar una ruta relativa: l'enllaç depèn de l'ubicació de la plana que conté l'enllaç i de la plana referenciada per l'enllaç. Per a realitzar l'enllaç és necessari navegar per l'arbre de directoris, tenint en compte:

  • / (barra): utilitzarem la barra com a separador de directoris o carpetes. Per exemple, "main/products" és una referència a la carpeta "products" ubicada dins la carpeta "main".
  • . (punt): fa referència al directori actual. Per exemple, "./main/products" equival a "main/products". L'utilització del "." és opcional.
  • .. (2 punts): accés al directori anterior.

Per a explicar les diferents alternatives utilitzarem l'estructura de carpetes de la imatge on hi consten 3 pàgines web: index.html, Flags.html i Mystic.html .

En la mateixa carpeta

El primer exemple consistirà en enllaçar la informació de dues planes web que estan en la mateixa carpeta: Flags.html i Mystic.html .

El codi que final és:

Fitxer: Flags.html


<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Flags of our fathers</title>
      <meta charset="utf-8">
   </head>
   <body>
   <!-- ******* FLAGS OF OUR FATHERS ***** -->
      <h1>Flags of our fathers</h1>

   <!-- MES CONTINGUT -->

     <h2>Other films</h2>
       <ul>
            <li>
              <a href="Mystic.html">Mystic river</a>
            </li>
       </ul>
   </body>
</html>

En aquest cas l'única cosa que hem de fer és indicar l'ubicació de la plana web en relació a l'ubicació de la plana que s'està editant.


    <a href="Mystic.html">

En carpetes diferents

El segon exemple consistirà en referenciar a una plana web que està en una altra carpeta. Així, per exemple, des de la plana web "Flags.html" ens pot interessar accedir a la plana inicial: "index.html" .

La plana que volem referenciar, "index.html", està ubicada en la carpeta "main" mentre que el fitxer que conté l'enllaç està en una carpeta fill: "films". Per accedir al directori pare d'una carpeta utilitzem .. .

El codi que final és (fitxer Flags.html):


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Flags of our fathers</title>
        <meta charset="utf-8">
    </head>
    <body>
            <!-- ******* FLAGS OF OUR FATHERS ***** -->
            <h1>Flags of our fathers</h1>
            <!-- MES CONTINGUT -->
            <a href="../index.html"> 
                <img src="images/goback.jpeg" alt="Go to main page" width="64" height="64" />    
            </a>
    </body>
</html>

En aquest cas, el link està associat a una imatge.

Una segona opció és que des de la plana "index.html" es vulgui accedir a la plana "Flags.html". En aquest cas, des de la carpeta pare hem d'accedir a la carpeta fill: només cal indicar el nom de la carpeta fill seguida del caràcter de separador de carpetes: "/".

El codi que final és:

Fitxer: index.html


<!DOCTYPE html>
<html lang="en">
   <head>
    <title>Films</title>
    <meta charset="utf-8">
   </head>
   <body>
    <!-- ************** INDEX HTML ****************** -->
    <h1>Films</h1>
    <ul>
       <li>
           <a href="films/Flags.html">
               Flags of our fathers
           </a>
       </li>
       <!-- ************** MES CODI ****************** -->

    </ul>
   </body>
</html>

Video - Com enllaçar planes web dins del mateix servidor

A una secció de la plana

La tercera possibilitat que ens ofereixen els links és la de poder enllaçar a una secció determinada d'una pàgina web. Aquesta opció és molt útil quan es vol incloure un índex a la nostra plana web que permeti accedir a l'usuari de forma ràpida a aquella informació que sigui del seu interés. Per exemple, és habitual l'ús d'aquesta tècnica en les planes de wikipedia.
Exemple de links a secció de documents

Per a crear un link a una secció d'una plana web primer, és necessari:

  1. Identificar la secció destí de l'enllaç amb l'atribut id .
  2. Crear l'enllaç amb l'etiqueta a .
  3. Associar el valor de l'atribut id associat a la secció a l'atribut href de l'etiqueta a . Utilitzem el símbol '#' (sostingut) per a especificar que es fa referència al valor d'un identificador i no d'una plana web.

Enllaç a una secció d'una mateixa plana

Fitxer: Flags.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Flags of our fathers</title>
        <meta charset="utf-8">
    </head>
    <body>  
        <!-- FLAGS OF OUR FATHERS -->   

        <!-- .... -->   

        <ul>
             <li>
                 <a href="#cast">
                     Cast
                 </a>
             </li>
             <li>
                 <a href="#video">
                     Videos
                 </a>
             </li>
             <li>....</li>

        </ul> 

        <h2 id="cast">Cast</h2> 
        <!-- .... -->   

        <h2 id="video">Videos</h2>   
        <!-- .... -->   
    </body>
</html>

En l'exemple anterior estem identificant dues parts en el document. La primera pel títol h2 "Cast", que hem identificat amb el valor de "cast" i per la segona etiqueta h2 que hem identificat amb el valor de "video" . En els elements de la llista desordenada podem veure l'utilització del valor de l'identificador en l'atribut href pels dos casos.

Enllaç a una secció d'una altra plana

Tot i que no és el més habitual, a vegades ens interessa enllaçar a una secció d'una plana des d'una altra plana. La tècnica per aconseguir-ho és semblant a la d'enllaçar a una secció d'una plana, però en aquest cas caldrà especificar l'ubicació de la plana i posteriorment la identificació de la secció on es vol accedir dins la plana.

A continuació es mostra un exemple pràctic de l'aplicació.

Fitxer: index.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Home</title>
        <meta charset="utf-8">
    </head>
    <body>  

    <!-- ************** INDEX HTML ****************** -->
        <h1>Films</h1>
        <ul>
           <li>Flags of our fathers
            <ul>
             <li>
                 <a href="films/Flags.html#cast">
                    Cast
                 </a>
             </li>
             <li>
                 <a href="films/Flags.html#video">
                    Videos
                 </a>
             </li>
             <!-- .... -->
            </ul>
           </li>
           <li>Mystic River
           <!-- .... --> 
        </ul>
        <!-- .... --> 
    </body>
</html>

Fitxer: Flags.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Flags of our fathers</title>
        <meta charset="utf-8">
    </head>
    <body>
        <!-- FLAGS OF OUR FATHERS -->
        <!-- .... -->
        <ul>
            <li>....</li>
            <!-- .... -->
        </ul>
        <h2 id="cast">Cast</h2>
        <!-- .... -->
        <h2 id="video">Videos</h2>
        <!-- .... -->
    </body>
</html>

Per l'exemple s'està utilitzant l'estructura de carpetes de la imatge

Cal observar com els links s'han creat a partir de url_plana_web#nom_identificador_secció

Vídeo - enllaços a seccions de documents (anglès)

results matching ""

    No results matching ""