<!doctype html>
<html lang="xx1">
<head><title>xxxx2</title></head>
<body> </body>
</html>
Pagina HTML minimale. xx1 ed xxxx2 sono stringhe di testo modificabili all’evenienza. xx1 è sempre costituita da 2 lettere ed identifica la lingua della pagina web, mentre xxxx2 può essere lunga al piacere e ne determina il titolo. Qui sotto sono elencati i principali tag inseribili in una pagina web .
Guida di riferimento: HTML.it
Organizzazione del testo:
<p>paragrafo</p>
paragrafo: permette di inserire un paragrafo
<br>
tag break line. permette di andare a capo con il testo. Elemento inline
<hx>titolo paragrafo</hx>
Definisce il titolo di un paragrafo. x può valere da 1 a 7 per definire sottoparagrafi in modo gerarchico
Tipologia di carattere:
<strong>testo in grassetto </strong>
oppure
<b>testo in grassetto</b>
Definiscono il testo in grassetto. Elementi inline. Il tag strong ha significato semantico più che grafico ed indica una porzione importante del testo.
<em>testo in corsivo</em>
oppure
<i>testo in corsivo</i>
Definiscono il testo in corsivo. Elementi inline. Il tag em ha significato semantico più che grafico ed indica una frase pronunciata con un tono diverso rispetto al resto (dall’inglese emphasys).
<sup>apice</sup>
testo con carattere in apice
<sub>pedice</sub>
testo con caratteri a pedice
<del>testo cancellato</del>
oppure
<s>testo cancellato</s>
testo cancellato con una barra
<mark>testo evidenziato</mark>
testo evidenziato (di default in giallo)
<time datetime="1-1-2000">il primo gennaio 2020</time>
riporta un tempo.
<small>testo poco importante</small>
Questo testo di solito è renderizzato con un carattere più piccolo.
Citazioni:
<blockquote>testo citato</blockquote>
Blocco con citazione letterale di un testo da un’altra fonte
<cite>fonte bibliografica</cite>
Cita una fonte bibliografica in un testo. Elemento inline. Appare in corsivo.
<q>fonte bibliografica></q>
Come blockquote ma è un elemento inline.
<abbr title="abbreviazione">abbrev.</abbr>
Abbreviazione. L’attributo title contiene il corrispondente nome completo che viene rappresentato a schermo come tooltip al passaggio del mouse. Elemento inline.
<pre>testo preformattato</pre>
Testo preformattato. Questo blocco rende a schermo il testo come viene digitato, spazi inclusi.
<code>codice sorgente</code>
Riporta il codice sorgente di un software.
<kbd>testo inserito dagli utenti</kbd>
Riporta testo inserito dagli utenti.
<samp>output riga di comando</samp>
Riporta l’output di una riga di comando
<ins datetime="1-1-2000">testo aggiornato</ins>
indica un testo aggiornato. l’attributo datetime mostra quando.
Commenti:
<!--commento-->
oppure
<!--
commento
-->
Inserisce commenti nel codice che vengono ignorati dal browser.
Elenchi:
Elenco non ordinato
<ul>
<li>elemento</li>
<li>elemento</li>
</ul>
Elenco ordinato:
<ol type="x" start="y">
<li value="z">primo elemento</li>
<li>secondo elemento</li>
</ol>
Dove la variabile x può essere così assegnata:
1: numeri interi arabi
a: lettere alfabetiche minuscole
A: lettere alfabetiche maiuscole
i: numeri romani minuscoli
I: numeri romani maiuscoli
La variabile y indica l’eventuale valore di partenza, la variabile z indica un valore preciso per l’elemento interessato e modifica di conseguenza i suoi successivi
Liste di definizioni:
<dl>
<dt>primo elemento</dt>
<dd>prima definizione</dd>
<dt>secondo elemento</dt>
<dd>seconda definizione</dd>
</dl>
Tabella:
<table>
<caption>
<p>titolo della tabella</p>
</caption> <colgroup id="id1" span="s1"> <col id="id2" span="s2"> <col id="id3" span ="s3"> </colgroup>
<thead>
<tr><th scope="sc">intestazione prima colonna</th><th>intestazione seconda colonna</th><th>intestazione terza colonna</th></tr>
</thead>
<tfoot>
<tr><td>ultima cella colonna 1</td><td>ultima cella colonna 2</td><td>ultima cella colonna 3</td></tr>
</tfoot>
<tbody> <tr><td colspan="cs" rowspan="rs">elemento 1-2.1-2</td><td>elemento 1.3</td></td> <tr><td>elemento2.3</td></tr> <tr><td>elemento 3.1</td><td>elemento 3.2</td><td>elemento 3.3</td></tr>
</tbody>
</table>
I valori id identificano i gruppi di celle, mentre quelli s1 la loro posizione. la variabile sl può avere questi valori:
- row: si riferisce alle righe
- col: si riferisce alle colonne
- rowgroup: si riferisce al gruppo di righe
- colgroup: si riferisce al gruppo di colonne
- auto: significato definito dal contesto
la variabile cs è un numero intero che indica un unione di celle di un numero di colonne pari al suo valore, la variabile rs fa lo stesso per le righe.
Link:
Link ad altra pagina web:
<a href="https://sitoweb.est" title="decrizione" hreflang="it" target="_blank" accesskey="k">ancora</a>
target=”_blank” apre la pagina web su una nuova finestra del browser se presente, mentre accesskey consente di aprire il link premendo sulla tastiera ALT+ k o ALT+SHIFT +k (k può essere qualunque lettera e la combinazione di tasti da usare dipende dal browser scelto)
Link ad indirizzo mail:
<a href="mailto:xxxxxx@xxxxx.xxx">ancora</a>
Percorsi assoluti e relativi:
percorso assoluto:
https://www.miosito.est/cartella/sottocartella/pagina.html
percorso relativo:
Per un file ubicato nella stessa cartella è sufficiente indicarne il nome.
da root a sottocartella (specificare il percorso delle cartelle sottostanti):
/cartella/sottocartella/pagina.html
da sottocartella a cartella (usare “../” per salire di livello):
../pagina.html
il tag <base>
specifica il percorso di base a cui fare riferimento per i successivi percorsi relativi, va inserito ad inizio pagina fra i tag <head>
<base href="/cartella/sottocartella/">
Ancore interne al documento:
<a name="destinazione"> in questo punto c'è la destinazione dell'ancora</a>
<a href="#destinazione">Questo link punta all'ancora</a>
Se a # non segue un nome l’ancora punta all’inizio del documento.
Immagini:
<img src="immagine.jpg" alt="testo alternativo" title="tooltip immagine" longdesc="/cartella/sottocartella/descrizione_lunga.html">
base64:
<img src="data:image/png;base64,FILEBASE64">
dove “FILEBASE64.” è l’immagine convertita in ASCII tramite appositi software
SVG (grafica vettoriale)
<img src="data:image/svg+xml,FILESVG">
Come sopra ma per i file in grafica vettoriale.
File audio
<audio controls autoplay loop>
<source src="musica.mp3" type="audio/mp3">
</audio>
L’attributo controls aggiunge l’interfaccia grafica per controllare la riproduzione del file audio. Se omesso questo è riprodotto in background. Autoplay e loop fanno quanto descritto dai loro nomi. Indicare più source con diversi formati garantisce compatibilità con tutti i browser. un tag di testo può essere usato come ultima alternativa per i browser non compatibili.
File video
<video width="xxx" height="yyy" controls>
<source src="video.mp4" type:video/mp4">
</video>
I tag controls, loop ed autoplay sono gestiti come il tag audio, così come differenti tag sources.
Il blog del dott. Antonello Galati 