4 – Elenchi Tabelle Multimedia

Pubblicato il di

Mentre il tag paragrafo manda a capo il tag successivo, in quanto tag html detti di blocco, altri tag come img o a non si comportano così e vengono detti in linea . Oltre ai paragrafi esistono tag  head, cioè di titolo che vanno da <h1> a <h6>  .

Altri tag sono gli elenchi che possono essere <ul> unordered list che contengono i tag <li> list item

<ul>
    <li> prima opzione</li>
    <li> secoda opzione</li>
    <li> terza opzione</li>
</ul>

Di predefinito i list item vengono indicati con un pallino, con le opportune regole css, tale simbolo, può essere cambiato.

In modo analogo ci sono gli <ol> ordered list o liste ordinate

<ol>
    <li> prima opzione</li>
    <li> secoda opzione</li>
    <li> terza opzione</li>
</ol>

Con i CSS si possono cambiare i numeri con le lettere, con la numerazione romana e molte altri tipi di numerazioni.

Sempre più in disuso, ma ancora usate sono le tabelle <table> formate da righe <tr> (table row) che a loro volta includono <td> (table data). Non più supportati in html5 sono gli attributi delle tabelle cellpadding , cellspacing, frame, rules, summary e width.

<table border="1">
    <tr>
        <td>1,1</td>
        <td>1,2</td>
        <td>1,3</td>
    </tr>
</table>

Questo esempio è solo con 1 riga, ovviamente se ne possono aggiungere quante se ne vogliono.

Si possono aggiungere delle intestazioni alle tabelle tramite il tag <thead>, quindi i contenuti andranno inseriti nel tag <tbody>. Si può aggiungere anche una parte finale che sarà il <tfoot> che con l’attributo colspan si può estendere il <td> di quante caselle si vuole:

<table border="1">
    <thead>
    <tr>
        <td>prima colonna</td>
        <td>seconda colonna</td>
        <td>terza colonna</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1,1</td>
        <td>1,2</td>
        <td>1,3</td>
    </tr>
    </tbody>
    <tfoot>
    <td colspan="3">Ecco le note in fondo</td>
    </tfoot>
</table>

Si può lasciare fissa sia l’intestazione che il footer in tabelle  che scorrono, ma la compatibilità di tale proprietà va adattata in maniera articolata per tutti i browser.

Una regola CSS aggiunta all’head del file html tramite il tag <style> imposta tale regola globale su tutto il documento html

<head>
    <title>Title</title>
    <style type="text/css">
        td {width: 50px;}
    </style>
</head>

Questa regola che ho applicato vale per tutti i <td> della mia pagina. Mentre se applico una regola su un tag specifico viene detta regola locale e prevale su quella globale inserita nell’head e sarebbero sovrascritte. Applico una regola specifica al <thead>

<thead style="display: block">

Questa regola dice di far comportare l’elemento come se fosse in block. Aggiungo regole anche sul <tbody>

<tbody style="display: block; overflow: auto; height: 200px; color: red; width: 500px">

l’ overflow indica qualora un’elemento abbia un contenuto più ampio di quello a sua disposizione, di poterlo scorrere con le classiche barre si scorrimento  .

Aggiungo la visualizzazione a blocco anche sul <tfoot>

<tfoot style="display: block">

Ho ottenuto lo scorrimento funzionante testato su alcuni browser.

La maggiore caratteristica dell’html5 è il supporto nativo ad audio e video. Il tag html5 per inserire i video è <video> .

<video width="320" height="240" controls="controls">
    <source src="001.mp4" type="video/mp4">
</video>

Gli attributi previsti sono le dimensioni, inoltre si possono avere i controlli del player tramite l’attributo controls che viene abilitato anche se il valore rimane vuoto. Con il tag <source> specifichiamo il percorso del video ed il tipo.  Posso aggiungere più tag <source> in cascata, che verranno letti dal browser qualora non supporti il primo format inserito.

<video width="320" height="240" controls="controls">
    <source src="001.mp4" type="video/mp4">
    <source src="001.ogg" type="video/ogg">
    Spiacenti video nn supportato
</video>

Quindi se il browser non sopportasse l’mp4 proverebbe con il formato ogg , potrei inserire anche inserire come formato supportato il webm. Qualora non supporti nessun formato, possiamo inserire dopo i tags <source> un testo di warning.

Una altro attributo utile è l’autoplay per far partire il video automaticamente e il loop per abilitare la riproduzione continua a ciclo.

<video width="320" height="240" controls="controls" autoplay loop>

Si può anche impostare un immagine copertina per il video tramite l’attributo poster (se nn si specifica verrà mostrata un immagine presa dal primo frame del video).

<video width="320" height="240" controls="controls" poster="img/facocero.jpg">

In maniera analoga si comporta l’audio col tag <audio> , ovviamente senza le dimensioni, il poster e cambiano i formati (mp3 , ogg , wav):

<audio controls="controls">
    <source src="001.mp4" type="video/mp3">
    <source src="001.ogg" type="video/wav">
    Spiacenti video nn supportato
</audio>