Embedded Files
Tutto inizia al CERN di Ginevra, quando Tim Berners-Lee inventa l’HTML e il sistema dei Tag nel 1989.
Ad oggi, partendo da HTML siamo giunti (tra alti e bassi) all’HTML 5: linguaggio con una buona retrocompatibilità e buoni risultati. Nell’HTML ruolo chiave è definito dai Tag, gli elementi che costituiscono la pagina. HTML è un linguaggio di markup.
A complicare le cose è la nascita nel 2000 di XHTML: linguaggio che si ispira a XML (entrambi linguaggi di markup). In XHTML mutiamo le regole del più rigido XML.
XHTML è più (formalmente) rigido, ciò dal lato della programmazione risulta più comodo (perché il codice diventa più efficiente). Se però sono presenti degli errori, viene interrotta la visualizzazione della pagina (con la struttura in HTML invece i browser riescono a fare una interpretazione abbastanza generica).
HTML5
HTML5
Nato dalla necessità di liberarsi dei formalismi di XHTML, si proponeva 5 obiettivi:
compatibile anche con le vecchie versioni
introdurre nuovi elementi
migliorare la gestione dei moduli
consentire l’utilizzo di nuovi elementi senza l’utilizzo di plugin esterni
gestione flessibile degli errori
Per tutti questi linguaggi è possibile utilizzare anche un banale blocco note, basta usare la giusta estensione (ma un ambiente di sviluppo è estremamente comodo).
Per visualizzare il risultato utilizzeremo invece un browser, con cui vengono aperti automaticamente tutti i file con estensione .htm e .html.
Come?
Come?
Si lavora per comparti. In ogni file scritto in HTML compare la seguente struttura:
dichiarazione tipologia di file
head
body
<!DOCTYPE HTML> <!--Dichiarazione-->
<html> <!--"Contenitore" 1-->
<head> <!--"Contenitore" 2: l'head è l'intestazione-->
<title>Pagina di Esempio</title>
<meta charset = "utf-8"/>
</head>
<body> <!--"Contenitore" 3: il body è il corpo della pagina-->
<h1>Intestazione 1</h1>
<p>Paragrafo</p>
</body>
</html>
Liste
Liste
Vediamo come scrivere le liste in HTML. Per prima cosa diciamo che le liste si introducono all’interno del body e possono essere di 3 tipologie:
- ordinate:
<ol type="1aAIi">
<li>Val_1</li>
<li>Val_2</li>
<li>Val_3</li>
<li>Val_n</li>
</ol>
- non ordinate:
<ul type="disc or circle or square”>
<li>Val_1</li>
<li>Val_2</li>
<li>Val_3</li>
<li>Val_n</li>
</ul>
- descrittive:
<dl>
<dt>JS</dt> <!--con spazio prima-->
<dd>Il linguaggio Javascript</dd> <!--senza spazio prima-->
</dl>
Se tra un <li></li> e il successivo inserisco una nuova lista ad un livello di tabulazione maggiore, ci pensa il browser da sé (creando una lista annidata).
Tabelle
Tabelle
Strumento utile quando si lavora su file HTML sono le tabelle. Vediamo la struttura di una tabella:
<table>
<caption>TABELLA DI PROVA</caption>
<tr>
<th>intestazione colonna 1</th>
<th>intestazione colonna 2</th>
<th>intestazione colonna 3</th>
</tr>
<tr>
<td>dato (1;1)</td>
<td>dato (2;1)</td>
<td>dato (3;1)</td>
</tr>
<tr>
<td>dato (1;2)</td>
<td>dato (2;2)</td>
<td>dato (3;2)</td>
</tr>
</table>
Unire due o più celle
Unire due o più celle
Per unire due celle in una tabella scritta in Html, occorre utilizzare colspan o rowspan (che uniscono rispettivamente due celle sulla stessa riga e due sulla stessa colonna.
Per utilizzarli, basta inserirli all’interno del tag di inizio della prima cella dell’intervallo (subito seguiti da un uguale e il numero di celle da unire tra apici. Vediamo un esempio.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Colspan esempio</title>
</head>
<body>
<table>
<tr>
<th colspan="4">Dato</th>
</tr>
</table>
</body>
</html>
Immagini
Immagini
<img src="percorso del file" alt="testo alternativo (ipovedenti, disabilità, errori di visualizzazione" title="Titolo_immagine"/>
SRC (percorso immagine), ALT(descrizione immagine: testo alternativo (ciò permette una maggior accessibilità e una buona soluzione a eventuali problemi in caso di indisponibilità del file)), TITLE(titolo immagine).
Mettere l'immagine in un paragrafo permette di allinearla al testo.
La particolarità del tag img è che non necessita del tag di chiusura ma solo di /> .
Collegamenti ipertestuali
Collegamenti ipertestuali
I collegamenti ipertestuali (i link) possono essere inseriti in una pagina web con il tag a: vediamo come.
<a href="URL/collegamento" target="modalità di apertura">Testo che apparirà nella pagina html</a>
L'attributo target influenza il browser, forzandolo ad aprire il link nella stessa scheda o aprendone una nuova. I due valori per le funzionalità appena citate sono rispettivamente:
_service
_blank
CMS
CMS
I Content Management System (CMS) sono veri e propri applicativi, ambienti di sviluppo, che danno la possibilità di realizzare delle pagine web anche senza conoscere i linguaggi che normalmente servirebbero. Permettono la gestione totale dei contenuti: interfacce grafiche che permettono di inserire contenuti nella pagina e di posizionarli come desiderato (si lavora per contenitori e file connessi). I CMS permettono di gestire le condivisioni con gli utenti (vari livelli di autorizzazioni per gli utenti). Gestire ad alto livello tutti questi accorgimenti è una cosa eccezionale. Esempi di CMS sono Wix e WordPress.
Cookies🍪
Cookies🍪
Sono piccoli file di testo, con chiavi con valori, che vengono salvati sul disco per avere una traccia dalle abitudini su una determinata pagina (aumentano la rapidità di accesso).
Page updated
Google Sites
Report abuse