HTML

HTML
HTML
HTML(Hyper Text Markup Language).
Non è un linguaggio di programmazione, ma è un linguaggio di markup: descrive la struttura delle pagine web: dove e
come rappresentare gli elementi.Il codice si sviluppa attraverso i tag che permettono di descrivere le caratteristiche di
formattazione e la posizione degli elementi in una pagina web.
É un linguaggio interpretato dai browser: i documenti di codice sorgente Html stanno immagazzinati in server e
vengono inviati da questi ultimi al browser dell’utente (client) che sta visitando la pagina e il browser lo interpreta
mostrando il suo contenuto grafico.
STORIA DELL’HTML
1980: prima apparizione del linguaggio HTML , sviluppato da Tim Berners-Lee e Robert Cailliou al CERN di Ginevra.
Inizialmente nacque come un sistema per condividere documenti e prese il nome di sistema di hyperText, cioè una rete di
documenti, una struttura no sequenziale, connessi l’uno a l’altro da link.
1991: si creò la prima versione HTML.
1993: venne ufficializzata e si parlò di standard web.
1995: nacque il primo standard chiamato HTML2.0 e ci fu una grande diffusione e nacque il W3C.
1997: il W3C creò lo standard HTML3.2 che aveva le novità di incorporare applet Java e poter inserire testi nelle
immagini.
1998: con lo standard HTML4.0 ci fu una svolta nel web, con la nascita del CSS e la capacità di eseguire il codice sul
computer dell’utente.
1999: il W3C pubblicò la loro ultima versione HTML4.01, considerata una attualizzazione dell’HTML4.0, dopo si
concentrò in un altro linguaggio, l’XHTML.
2004: le imprese di Internet più importanti al mondo si riunirono e crearono una nuova organizzazione: la WHATWG, per
dedicarsi ed avanzare con lo standard HTML.
2008: il WHATWG creò una nuova e potente versione standard dell’HTML chiamata HTML5 che è il linguaggio attuale.
Con la sua potenza e diffusione il W3C fa retromarcia e collabora insieme al WHATWG.
STRUMENTI NECESSARI
L’HTML e il CSS sono linguaggi che sviluppano in testo semplice, per questo possiamo usare semplicemente un
qualsiasi editor di testo.Esistono molti altri strumenti e programmi che rendono più facile la creazione di pagine web.
Dato che sono linguaggi interpretati per vedere il contenuto del codice sorgente basta aprire il file di testo con un
browser.
DOVE PUBBLICARE UN SITO WEB

Create pagine web, bisogna caricarle in Internet e per questo abbiamo bisogno di:
- un Dominio: è un nome che si da a un sito web (www.html.com) e si riferisce all’IP di una macchina che rappresenta
l’indirizzo unico e si può acquistare in vari portali in Internet.
- un posto dove devono alloggiare fisicamente i file HTML e CSS creati (server), dato dagli stessi portali Internet.
FUNZIONAMENTO DI PAGINE WEB

1) Per accedere a una pagina web in un browser, si digita l’URL nella barra degli indirizzi e si fa clic su invio;
2) Interviene il DNS che traduce il nome di dominio in indirizzo IP e ci ritorna una IP pubblica WAN, in questo modo si
stabilisce una connessione con il server dove alloggia la pagina web.
3) Il browser chiede al server se può servirgli la pagina sollecitata. Un server può avere più di un dominio.
4) Se va tutto bene, il server, tramite il protocollo http, invia il file sorgente .html della pagina.
5) Il browser riceve il file e lo interpreta mostrando il suo contenuto.
SERVER XAMPP
È un pacchetto di programmi utile per la creazione di un ambiente server che permette di contenere, gestire ed eseguire le
proprie pagine web in locale sul proprio computer, prima di pubblicarle in Internet. È scaricabile su Internet e deve essere
installato sul computer.
X: cross-platform, gira su diverse piattaforme (S.O).
A: Apache (server http)
M: MySQL (database)
P: PHP (interprete)
P: PEARL (interprete)
In Linux, dal terminale:
- per lanciarlo: sudo/opt/lampp/xampp start
- per chiuderlo: sudo/opt/lampp/xampp stop
STRUTTURA DEL FILE HTML
DTD: Definizione Tipo di Documento
<HTML>
<head>
<title>...</title>
</head>
<body>
...
</body>
</HTML>
È consigliato chiamare la pagina iniziale di un sito index.html.
DTD: DEFINIZIONE TIPO DI DOCUMENTO

è la definizione della versione del codice HTML che andiamo a utilizzare e stabilisce le componenti ammesse.
Versione DTD
HTML2.0 <!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML2.0//EN”>
HTML3.2 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML3.2 Final//EN”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01 Strict//EN”>
esclude tutti gli elementi desprecated(esiste una versione più recente) e quelli riguardo i frame
HTML4.01 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01 Transitional//EN”>
include il DTD Strict più gli elementi desprecated
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01 Frameset/EN”>
include il DTD Transitional più i frame
HTML5 <!DOCTYPE html>
<head> . . . </head>
Tra questi tag scriviamo la parte di codice non visibile in una pagina web, contiene informazioni come:
- titolo della pagina: nel tag <title>… </title> si scrive il titolo della pagina che appare sopra la scheda della pagina web
del browser e nei risultati di ricerca. Deve definire concretamente il contenuto della pagina.
- Meta-tags: servono per dare informazioni della pagina web ai motori di ricerca.
- Stili: vengono definiti gli stili CSS.
-Script: codice di linguaggi di programmazione come javascript.
<body . . . </body>
In questi tag si scrive quello che si chiama corpo delle pagine web, ovvero la parte visibile.
META-TAGS
Danno informazioni addizionali delle pagine web ai browser e motori di ricerca e permettono una migliore indicizzazione
e posizionamento. Sono:
-Description: <meta name=”description” content=”Descrizione della pagina”/>

Consente di dare una breve descrizione di quello che andiamo a trovare nella pagina e viene mostrata sotto un sito nei
risultati di ricerca.
Non deve superare i 150/160 caratteri.
Deve spiegare concretamente e fedelmente il contenuto della pagina.
Deve essere unica e non copiata da un’altra pagina.
-Robots: <meta name=”robots” content”… , … “/>

Detti anche spider o crawler è un software del motore di ricerca che scansiona la rete ed esamina le pagine web al fine di
controllarne il tracciamento e indicizzarle, cioè dire che una certa pagina esiste e può essere inserita nel database del
motore di ricerca.
I “i di content più importanti sono:
- index: indica al robot che la pagina può essere indicizzata
- noindex: indica che la pagina corrente non dovrà essere indicizzata e quindi non apparirà nei motori di ricerca.
- follow: indica al motore che lo spider deve seguire i link in questa pagina, per indicizzare anche quelle successive.
- nofollow: indica al motore che dopo l'indicizzazione della pagina corrente non deve seguire altri link e quindi non
indicizzare altre pagine.
- Content-Type: <meta http-equiv=”Content-Type” content=”text/html; charset= . . .”/>
Definisce il contenuto e il set di caratteri della pagina, che sono:
- ISO-8859-1 e UTF-8 (consigliato): usati per la maggior parte delle lingue dell’Europa Occidentale;
- ISO-8859-5: supporta l’alfabeto cirillico;
- SHIFT-JIS e EUC-JP: codificazioni giapponesi;
- Author: <meta name=”Author” content=”nome autore”/>

Indica chi è il creatore della pagina web.
- Keywords: <meta name=”Keywords” content=”…”/>

Lista di parole chiave, separate da virgole, che indicano al motore di ricerca i termini di cui tratta la pagina web.
Si inseriscono in content e devono essere tra 4 a 10 parole.
Da alcuni anni i motori di ricerca hanno abbandonato questo meta-tag creando loro stessi la lista di parole estraendole dal
contenuto della pagina.
- Locality: <meta name=”locality” content=”… , … , …, … “/>

Indica se la pagina è a una zona concreta o se il prodotto che contiene è per un luogo.
Non si usa molto, ma può essere utile hai sistemi web con GPS per cellulari per dare priorità a alcune o altre pagine.
- Lang: <meta name=”lang” content=”…”/>

Serve al motore di ricerca per indicizzarla alla lingua corrispondente.
In content si indicano le iniziali di una lingua (es, it…).
- Revisit-after: <meta name=”revisit-after” content=”…”/>

Indica al motore di ricerca che ogni x tempo si va a modificare qualcosa nelle nostre pagine e le torna ad indicizzare.
- Category: <meta name=”category” content=”… , … , … ”/>

Indica la tematica, la categoria della pagina.
La struttura in content è: lingua, Paese, categoria.
- Canonical: <link rel=”canonical” href=”URL”/>

Indica quale URL indicizzare, ignorando tutti gli altri. I seguenti indirizzi corrispondono alla stessa identica pagina, con
identici contenuti e sono raggiungibili tutti dai seguenti URL:
https://www.miosito.com https://miosito.com/ https://www.miosito.com/index.html
Va utilizzata solamente per le pagine presenti su un unico dominio.Nonostante rappresentino la stessa pagina, risultano
differenti agli spider di motore di ricerca e per evitare di indicizzare contenuti duplicati, dovrà scegliere quale URL è il
più adatto ad essere indicizzato. Google capirà che tali pagine duplicate sono riferite all’URL canonico.
- Refresh <meta http-equiv=”refresh” content=”30”>

Aggiorna documento ogni 30 secondi.
ELEMENTI HTML
Paragrafo <p> . . . </p>

Dentro possiamo scrivere il testo che vogliamo.
Genera un paragrafo indipendente di testo.
Dopo di esso ci sarà un salto di linea.
Andare a capo <br/>

Ci permette di andare a capo con qualsiasi elemento.
Centrato <center> . . . </center>

Permette di centrare nella pagina qualsiasi elemento.
Di default qualsiasi elemento che inseriamo verrà allineato sulla sinistra.
Non supportato in HTML5 si consiglia usare CSS.
Disegno di linea <hr>

Disegna una linea nella pagina.
Può contenere attributi come:
- size: spessore in px;
- width: larghezza in px;
- color: colore in rgb;
Titoli <h1>… </h1> , <h2>… </h2> , <h3>… </h3> , <h4>… </h4> , <h5>… </h5> , <h6>… </h6>
Questi tag fanno si che un testo diventi un titolo di una grandezza che va in ordine ascendente da <h1> a <h6>
Testo preformattato <pre> . . . </pre>

Visualizza testo pre-formattato con font fissato Courier .
All'interno del tag tutti gli spazi e ritorni a capo sono visualizzati come tali.
Testo in grassetto <b> . . . </b>

Mostra testo in grassetto.
Testo importante <strong> . . . </strong>

Dice al browser che si tratta di un testo importante e di mostrarlo con una enfasi maggiore.
Il browser è libero di decidere mostrarlo, anche se ormai tutti si stanno adattando a mostrare in grassetto.
Formato italico <i> . . . </i>

Testo in formato italic.
Testo più piccolo <small> . . . </small>

Mostra io testo con un carattere più piccolo, -1 di quello normale.
Evidenziato <mark>. . .</mark>

Mostra il testo nel tag evidenziato in giallo.
Testo inserito <ins> . . . </ins>

Indica che un testo è stato inserito in un documento.
Il testo viene mostrato sottolineato.
Testo cancellato <del> . . . </del>

Indica che un testo è stato rimosso da un documento. Il testo viene mostrato sbarrato.
Testo sottolineato <u> . . . </u>

Mostra il testo incluso nel tag sottolineato.
Pendice <sub> . . . </sub>

Mostra il testo come pendice.
Esponente <sup> . . .</sup>

Mostra il testo come esponente.
Testo sbarrato <s> . . . </s>

Mostra il testo sbarrato.
Tra virgolette <q> . . . </q>

Mostra il testo tra “virgolette”.
Citazione <blockquote> . . . </blockquote>

Mostra il testo come se fosse una citazione, più centrato e con spazi ai bordi rispetto resto.
Abbreviazioni <abbr>. . . </abbr>

Definisce una abbreviazione o un acronimo.
Da informazioni al browser.
Inserire l’attributo title con e l’estensione dell’abbreviazione.
Informazioni contatto <address> . . . </address>

Definisce informazioni di contatto(bigliettino da visita) di un documento o un articolo: (soggetto, indirizzo, contatto).
Il testo viene mostrato in corsivo.
Il carattere a capo non è dato in questo tag, quindi è necessario inserire <br>.
Titolo di un lavoro <cite> . . . </cite>

Si usa per indicare il nome di un lavoro, un opera, un quadro, ecc.
Mostra il testo in italic.
Si usa in genere per strutture come: <cite>lavoro</cite> by nome.
Direzione testo <bdo> . . . </bdo>
Permette di definire la direzione in cui viene scritto un testo: normale o osrevni.
Per il testo inverso e necessario inserire l’attributo e il e: dir="rtl"
Commenti 

È consigliato commentare quanto più possibile il codice per renderlo può comprensibile.
Non vengono mostrati nella pagina, ma solo nel codice.
URL predefinito <base>

Il tag <base> specifica l'URL / target di base per tutti gli URL relativi in un documento.
Ci può essere al massimo un elemento <base> in un documento, e deve trovarsi all'interno dell'elemento <head>.
Se è presente, deve contenere un attributo href o un attributo target o entrambi.
Elementi di codice
<code> . . . </code>
Si usa per definire, al suo interno, un pezzo di codice di programmazione.
Il testo viene mostrato in carattere monospace.
Questo tag non comprende spazi e andare a capo, per questo, spesso, è consigliato inserirlo in un tag <pre>…</pre>.
<kbd> . . . </kbd>
Si usa per definire, al suo interno, l’input da tastiera.
<samp> . . . </samp>
Si usa per definire, al suo interno, l’output di un programma.
<var> . . . </var>
Si usa per definire, al suo interno, una variabile di un programma o di una espressione matematica.
IMMAGINI
In una pagina web possono essere inserite immagini nei formati: GIF, JPG, PNG.
Il tag è: <img src=”...”>
L’attributo src è obbligatorio inserirlo e dentro si deve indicare il file di immagine o la sua url.
È consigliato anche inserire l’attributo alt=”...” con dentro un testo che rappresenta l’immagine, per consentire agli utenti
che non visualizzano l’immagine di capire di cosa si tratta.
LINK
Permettono di navigare tra differenti pagine HTML: nella propria pagina, pagine esterne e file di download.
Il tag è: <a href=”...”>Testo ancora</a>
In href si scrive il percorso di destinazione.
Il testo ancora è il testo che viene mostrato nella pagina come link, può essere anche una immagine.
Consigliato sempre inserire gli attributi title=”...” e target”...”
Di default i link appaiono nel browser sottolineati e:
- link non visitato: blu;
- link visitato: viola;
- quando si passa sul link con il mouse: rosso.
Questo stile può essere cambiato con i CSS.
1) Link Interni: sono quelli che si dirigono in altri punti della stessa pagina, si può creare una navigazione dentro una
unica pagina HTML. Per farlo:
- si crea, dove si vuole, il link da cliccare, con <a href=”#nome_punto”>punto dove andare </a>
- si crea il punto di destinazione, che si colloca nel punto dove vogliamo che si vada cliccando il link precedente,con:
<a name=”nome_punto”></a>
2) Link Locali: sono quelli che si dirigono ad altre pagine dello stesso sito web. Sono sempre usate dato che un sito a
sempre più di una pagina. Si deve creare un tag come:
<a href=”percorso/file.html”>Testo ancora</a>
In genere, i siti web hanno molti file e per questo vengono organizzati per cartelle. Per questo in href bisogna inserire il
percorso per arrivare ad un file. Si crea una gerarchia di cartelle e si usa ../ per regredire di un livello nella gerarchia.
3) Link Remoti: sono quelli che si dirigono a pagine esterne, fuori dal sito web.
Il tag è: <a href=”http://www.sitoesterno.com”>Nome sito esterno</a>
Si deve scrivere anche il protocollo http:// per indicare al browser che la pagina sta in Internet e non interna al sito.
4) Link a Email: sono usati in pagine che non hanno nessun tipo di programmazione, negli altri casi, i linguaggi, come
javascript, dispongono di librerie per mandare email. Questo link non fa altro che chiamare il programma per mandare
email configurato di default. Il formato è:
<a href=”mailto: email”>email</a>
Link immagine: è possibile anche far si che una immagine diventi un link, in cui è possibile cliccarci sopra. Questo
inserendo al posto del testo ancora il tag dell’immagine img:
<a href=”...”><img src=”...”></a>
TABELLE
È possibile creare tabelle nelle pagine HTML utili per esempio per un prezzario.
Il tag per definire la tabella, in cui devono essere poi definite le righe e colonne, è: <table> . . . </table>
Si definisce prima la riga con <tr> . . . </tr> e dentro di essa le celle delle colonne con <td> . . . </td>
Per dare dei titoli, nella prima riga, ai vari elementi della colonna, si usa il tag <th>. . . </th>, che per default mostra il
testo in grassetto e centrato.
È possibile annidare tabelle dentro altre tabelle, in una cella di un altra tabella.
Per disegnare il bordo della tabella bisogna inserire l’attributo border=”...” con un e numerico per lo spessore, altrimenti
la tabella è senza bordo.
Il bordo precedente è formato da due linee per lato, se si vuole un bordo normale si usa l’attributo border-collapse.
Si possono usare gli attributi:
- colspan=”n” per unire celle in orizzontale (n colonne);
- rowspan=”n” per unire celle in verticale (n righe).
LISTE
Permette di generare liste di dati.
È possibile dargli stili con i CSS.
1) Lista Ordinata: mostra gli elementi della lista numerati, si definisce con il tag <ol>. . . </ol> e dentro i suoi elementi
con i tag <li>. . . </li>, la struttura è:
<p>Nome lista</p>
<ol>
<li>elem</li>
<li>elem</li>
...
</ol>
L’ordine inizia dal numero 1, ma si può far iniziare il conto da un numero n con l’attributo start”n”.
2) Lista Non Ordinata: mostra gli elementi della lista con un pallino ●, si definisce con il tag <ul>. . . </ul> e dentro i
suoi elementi con i tag <li>. . . </li>, la struttura è:
<p>Nome lista</p>
<ul>
<li>elem</li>
<li>elem</li>
...
</ul>
3) Lista di definizioni: permette di creare una lista di termini con la corrispondente definizione. Si definisce nel tag
<dl> . . . </dl> e dentro si usa il tag <dt>… </dt> per i termini e il tag <dd>… </dd> per le loro definizioni:
<p>Nome lista</p>
<dl>
<dt>termine</dt>
<dd>definizione</dd>
...
</dl>
MAPPATURA DI IMMAGINI
Una mappa dell’immagine consiste nel creare in essa aree cliccabili con diversi link ad altre pagine.
1) Si aggiunge, nel tag dell’immagine <img>, l’attributo usemap=”#nome_mappa” che specifica il nome della mappa a
cui fare riferimento.
2) Si definisce la mappa con il tag <map name=”nome_mappa”> … </map>, dove in name si deve inserire lo stesso
valore di usemap.
3)Nel tag <map>… </map> vanno definite tutte le aree cliccabili dell’immagine con il tag:
<area shape=”” coords=”” href=””>
Sono obbligatori gli attributi:
- shape: definisce la figura geometrica (forma) dell’area, può avere i valori:
. rect:(rettangolo), circle(cerchio), poly(poligono).
- coords: definisce le coordinate per la posizione dell’area nell’immagine:
- Per rect si definiscono il vertice in alto a sinistra e il vertice in basso a destra del rettangolo, quindi quattro
. coordinate (x,y , x,y).
-per circle di definiscono le coordinate del centro (x,y) e la lunghezza del raggio L, quindi (x,y,L).
- per poly si definiscono le coordinate x,y per ogni punto.
- href: link di destinazione facendo clic sull’area dell’immagine.
FORMULARIO
Sono uno strumento che permettono nelle pagine web di avere un sistema per prendere dati, ovvero gli input dell’utente.
Gli elementi di un formulario si definiscono dentro il tag <form> . . . </form>.
Questo tag deve contenere tre attributi:
- name: per dare un nome al formulario, utile per javascript. Ogni elemento deve contenerlo.
- method: specifica il metodo HTTP da usare quando si inviano i dati del formulario, come valori si usano:
- post: non visualizza i dati del formulario nella URL nella barra degli indirizzi.
Usarlo se i dati del formulario contengono informazioni sensibili e personali.
- get: rende visibili i dati del formulario nella URL nella barra degli indirizzi, nella forma name=value.
Non usarlo per inviare dati sensibili, perché verranno mostrati nella URL.
- action: indica l’azione da realizzare quando l’utente invia il formulario, che può essere: la propria pagina, un’altra
pagina in cui vengono inviati i dati, o un CGI che sono piccoli programmi accessibili dal web che permettono alcune
funzionalità, come, tramite un semplice formulario, inviare email direttamente dalla pagina.
ELEMENTI DI UN FORMULARIO
Campo di Testo <input type=”text” name=”” id=”” value=””/>
Consente all’utente di inserire un testo in un campo.
Vediamo che esso può contenere una serie di attributi:
- name: si dà un nome all’elemento, nel caso in cui un formulario viene inviato ad un altra pagina.
- id: utile per javascript, si dà un e unico per permettere di accedere in dinamico a questo elemento per modificarlo.
- value: spesso si lascia vuoto, rappresenta un testo e già inserito nel campo.
- disabled: disabilita il campo e non è possibile scrivere al suo interno. È spesso usato in pagine con programmazione per
obbligare all’utente di compilare un campo prima di un altro.
- maxlength: limita il numero di caratteri che si possono scrivere nel campo (20 caratteri di default).
- size: definisce la lunghezza del campo, ma è consigliato usare i CSS.
Area di Testo <textarea> . . . </textarea>

Si usa per permettere all’utente di poter scrivere un testo più lungo, con varie righe.
Dentro il tag possiamo scrivere un testo che appaia già nell’area, no con value.
Si inseriscono gli attributi:
- cols: definisce le colonne dell’area (larghezza).
- rows: definisce le righe dell’area (altezza).
Contiene anche gli attributi name e id.
Password <input type=”password” name=”chiave”/>

Usati in pagine dove si richiede una registrazione o un login.
Mostra un campo di testo dove scrivendo appaiono asterischi.
Checkbox <input type=checkbox” name=”” id=”” value=””/> e da mostrare

Permette di creare caselle di controllo, elementi quadrati che possiamo marcare o desmarcare. Utili per chiedere all’utente
di marcare ad esempio le sue preferenze.
I checkbox che fanno parte di uno stesso campo, devono portare lo stesso name e un value differente.
L’ attributo checked quando inserito in un elemento checkbox, questo apparirà marcato per default.
Radiobuttons <input type=”radio” name=”” value=””/> e da mostrare
Permette di mostrare all’utente una serie di opzioni precedute da un cerchietto di selezione.
Selezionando una opzione si deselezionerà una già selezionata: solo una deve stare selezionata.
Per una lista, che fa parte di una selezione, tutti gli elementi devono avere lo stesso name. E un value differente.
Tendina di selezione
Mostra una tendina con una lista di opzioni selezionabili dall’utente.
Si usa quando si hanno liste con molte opzioni.
Il tag per creare la tendina è <select name=”selezione”> . . . </select>.
Può contenere gli attributi:
- size: definisce il numero di opzioni che si devono mostrare quando la tendina è chiusa.
- multiple: permette di selezionare più di una opzione (premendo ctrl).
Dentro il tag della tendina si inseriscono le opzioni con: <option value=””> e </option>.
Può contenere l’attributo selected che indica se una opzione sta selezionata di default.
Il tag <optgroup label=””> opzioni </optgroup> consente di raggruppare le opzioni correlate, che devono essere inserite
al suo interno, dandogli una etichetta, un titolo ad esse.
Bottoni
Ci consentono di interagire con il formulario e in generale con la pagina. Ci sono tre tipi di bottone:
1)Di invio di un formulario <input type=”submit” name=”bottone” value=”Invio” action=””/>
Invia il formulario a quanto specificato nell’attributo action.
In value si indica la scritta che deve apparire sul bottone.
2) Reset formulario <input type=”reset” name=”bottone” value=”Resetta”/>
Consente di resettare, svuotare quello gia scritto e selezionato nel formulario ripristinando i valori iniziali.
3)Bottone classico <button> … </button>
Non esegue nessuna azione in questo modo, per essere utile necessita di codice javascript.
Immagine come bottone <input type=”image” src=”img.jpg” name=”bottone” action=””/>

È possibile usare una immagine come bottone di un formulario, si usa l’oggetto image, che consente di inserire una
immagine che ha le stesse caratteristiche del bottone submit: invia il formulario in base a quello indicato in action.
Caricare un file <input type=”file” name=””/>

Consente di poter caricare un file nel formulario prima di fare l’invio.
È molto usato in pagine con programmazione PHP, in modo che l’utente possa caricare file di vario genere.
Raggruppare i campi <fieldset> . . . </fieldset>

In questo tag possono essere inseriti campi del formulario correlati ed esso li raggruppa creando intorno ad essi come una
cornice.
Può essere inserita una didascalia all’interno della cornice con il tag <legend>didascalia</legend>.
Tag etichetta <label for=”id_opz”>Opzione</label>

Fornisce un miglioramento per selezionare o marcare le opzioni,attiva il controllo anche se si fa clic sul mouse sul testo
del nome dall’opzione.
BLOCCHI
Ogni elemento HTML ha un e di visualizzazione predefinito, il base al tipo di elemento, che può essere block o inline.
Un elemento si dice block-level quando occupa tutta la larghezza disponibile e manda a capo l’elemento successivo.
Un elementi si dice inline quando occupa solo la larghezza necessaria dell’elemento e non inizia su una nuova riga.
In Html è possibile creare blocchi o sezioni che possono essere considerati come contenitori, all’interno dei quali è
possibile inserire altri elementi. I tag per i blocchi sono:
- <div> . . . </div>
È un elemento block-level.
Non ha attributi obbligatori, ma dato che è possibile dargli uno stile con CSS, gli attributi class e id sono molto frequenti.
- <span> . . . </span>
È un elemento inline, usato maggiormente per contenere e modificare parti di un testo.
Non ha attributi obbligatori, ma dato che è possibile dargli uno stile con CSS, gli attributi class e id sono molto frequenti.
PAGINA WEB CONTENUTA IN UN’ALTRA PAGINA

È possibile inserire in una pagina web principale uno spazio che contiene un’altra pagina web, questo con il tag
<iframe></iframe>.
È consigliato inserire un testo tra il tag per gestire il caso in cui non sia supportato da un browser.
È obbligatorio l’attributo src per l’Url della pagina da inserire.
Con i CSS si deve dare una dimensione allo spazio della pagina da inserire con width e height, ed è possibile dare uno
stile al bordo.
TESTARE PAGINE WEB

Html è un linguaggio non definito, ovvero si può scrivere in molti modi e funziona sempre correttamente.
Testare una pagina web significa vedere se rispetta gli standard HTML e le regole stabiliti dal W3C.
Testare una pagina web è importante perché assicura che funzioni correttamente con qualsiasi browser, è un fattore da
tenere in conto per il posizionamento della pagina nel motore di ricerca.
Ci sono due modi per testare pagine web:
- Al sito validator.w3.org: che genera una lista di errori e avvertenze del codice sorgente della pagina. Il problema è che
qui si necessita inserire la URL della pagina per testarla, quindi non si possono testare pagine che teniamo in locale sul
nostro computer.
- plugin di Mozilla: ufficiale della W3C scaricabile da https://addons.mozilla.org/es-ES/firefox/addon/249/ che permette
di testare il codice sorgente delle pagine web in costruzione in locale.
ACCENTI E SIMBOLI SPECIALI

È possibile che non tutti i sistemi usino la stessa codifica di caratteri, quindi può succedere che caratteri speciali non
vengano visualizzati correttamente nel browser dell’utente. Poi una tastiera non possiede tutti i caratteri e simboli di cui
abbiamo bisogno. Per questi motivi, possiamo scrivere tutti i caratteri e simboli e assicurarci che essi vengano visualizzati
correttamente usando il loro rispettivo codice HTML, i più importanti sono:
ñ ñ < < ‘ ' © © ← ← à à ù ù ∉ ∉
Ñ Ñ > > | &bribar; ® ® → → è è ∀ ∀ ≤ ≤
€ € & & ^ &ciric; ∼ &sim; ↑ ↑ ì ì ∃ ∃ ≥ ≥
“ " ∅ ∅ ≠ ≠ ↓ ↓ ò ò ∈ ∈ ♥ &hearts;
Molti altri è possibile cercarli su internet.
DINAMISMO
Il dinamismo si basa in eventi, cioè attributi, per elementi html, che permettono di eseguire azioni.
Queste azioni vengono eseguite sempre nel client, cioè le funzioni dinamiche si eseguono nel computer dell’utente che
visita la pagina.
Questi eventi generano una chiamata ad un linguaggio di script, quello più utilizzato è il javascript, ogni evento ha
sempre associata una funzione in javascript
Possiamo creare funzioni javascript direttamente nel file html nell’<head> tra il tag <script> . . . </script>, oppure,
consigliato, creare un file esterno con estensione .js che carichiamo poi nell’<head> del file html con:
<script type=”text/javascript” src=”file.js”>
EVENTI
Gli eventi sono attributi che permettono di eseguire azioni, generando una chiamata a un linguaggio di script (javascript).
Gli eventi sono sempre eseguiti al lato client, ovvero sul computer dell’utente che visita la pagina.
Come valori hanno il nome dello script, ovvero della funzione definita per compiere una determinata azione.
Eventi di pagina
Questi si inseriscono nel <body> della pagina:
- onload: si esegue dopo che la pagina si è completamente caricata.
- onunload: si esegue quando si chiude una pagina.
- onresize: si esegue quando l’utente cambia la dimensione della finestra.
- onscroll: si esegue quando si scrolla la pagina o elementi che contengono scroll, con mouse o tastiera.
Eventi di tastiera
Quando si hanno compi per scrivere, si possono usare in tutti gli elementi del <body>, tranne <br >e frames:
- onkeydown: si esegue quando si preme un qualsiasi tasto della tastiera.
- onkeypress: si esegue quando si premono tasti della tastiera che stampano a video.
- onkeyup: si esegue quando si rilascia il tasto della tastiera.
- onhelp: si esegue premendo il tasto F1.
Eventi di formulario
Si usa negli elementi di un formulario:
- onchange: si attiva quando viene modificato il valore di un elemento.
- onsubmit: si esegue quando viene inviato il formulario.
- onreset: si esegue quando si ripristina un formulario, cioè si fa clic sul bottone reset.
- onselect: si esegue quando si seleziona un testo di un elemento.
- onblur: si esegue nel momento in cui si esce dall’elemento.
- onfocus: si esegue nel momento in cui si entra nell’elemento.
Eventi del mouse

Si possono usare in tutti gli elementi del <body>, tranne <br> e frames:
- onclick: si esegue quando si fa clic sull’elemento che lo contiene.
- ondblclick: si esegue quando si fa doppio clic sull’elemento che lo contiene.
- onmousedown: si esegue quando viene premuto il pulsante sinistro del mouse sull’elemento.
- onmouseup: si esegue quando viene rilasciato il pulsante del mouse sull’elemento.
- onmousemove: si esegue quando il puntatore del mouse passa sull’elemento.
- onmouseout: si esegue quando il puntatore del mouse sta sull’elemento.
- onmouseover: si esegue quando muoviamo il mouse sopra un elemento.
- ondragdrop: si esegue quando si trascina un elemento nella pagina.
- ondragstart: si esegue quando un elemento inizia ad essere trascinato.
- ondrag: si esegue quando si trascina un elemento nella pagina o in un’altra pagina.
Eventi di contenuti
- oncopy: si esegue quando si copia il contenuto di un elemento.
- oncut: si esegue quando si taglia il contenuto di un elemento.
- onpaste: si esegue quando si incolla un contenuto nell’elemento.
INSERIMENTO DI UNA ANIMAZIONE FLASH

Abbiamo bisogno del file .swf che possiamo creare o scaricare da internet.
La prima cosa da fare e creare un blocco (span o div) dove poter inserire l’animazione flash.
Posizionare il blocco nella pagina tramite CSS.
Dentro il blocco si inserisce il tag <object> . . . </object> con gli attributi:
- codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0": Per indicare
la versione flash del file necessaria per poterlo visualizzare correttamente.
- width="" height="" align="": per definire larghezza, altezza e posizione all’interno del blocco.
Nel tag <object> . . . </object>, poi si inseriscono:

<param name="allowScriptAccess" value="sameDomain" />
indica che il flash ha permesso di eseguire scripts solo dentro il proprio dominio della pagina, per evitare accessi esterni.
<param name="nome_animflash" value="file.swf" />
indica il nome dell’animazione flash da caricare in object.
<param name="quality" value="high" />
si indica la qualità del flash.
<embed src="flash.swf" quality="high" width="259" height="105" name="bannerSuperior" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
per permettere ai browser che non riconoscono l’elemento di poterlo mostrare correttamente.
POSIZIONAMENTO SEO
Internet si basa sulle ricerche e data la enorme quantità di pagine diventa importante ottimizzarle per aumentarne la
visibilità. Con il termine SEO(Search Engine Optimization) si intendono tutte quelle tecniche volte a migliorare la
visibilità di un sito web sui motori di ricerca al fine di migliorarne il posizionamento o ranking con conseguente aumento
di traffico.
Il lavoro del posizionamento si basa in molti punti i più importanti:
Titolo
È visibile nella parte superiore di una pagina web e nei risultati della pagina nel motore di ricerca.
Deve essere un testo compreso da 40/80 caratteri e definire fedelmente il contenuto della pagina.
Meta-tag
Danno informazioni hai browser e motori di ricerca di come è creata la pagina web.
Per il posizionamento le più importanti sono: description, keywords, robots e canonical.
Struttura
Come è strutturata una pagina web è molto importante sia per gli utenti che per i motori di ricerca, deve essere semplice
da leggere e da seguire.
Si tende a dare una struttura gerarchica, ad albero a un sito, partendo da un punto di origine.
Si usano gli elementi lista html se si devono fare numerazioni dei link e di sezioni.
Elementi
È consigliato che tutte le immagini includano gli attributi alt e title che devono definire in testo il contenuto
dell’immagine, questo perché un utente vede l’immagine e sa di cosa si tratta, ma i motori di ricerca no.
Per i link invece, i motori di ricerca li leggono e sanno di cosa si tratta, ma necessitano sapere, tramite l’attributo title,
cosa c’è dall’altro lato, cioè a che pagina fanno riferimento.
Un altro punto strutturale e che elementi CSS e Javascript siano esterni.
Contenuto
Il contenuto di un sito deve essere unico, originale e relazionato con la tematica di cui tratta.
È concesso creare e saper catalogare tutte le pagine di cui si necessita per poter mostrare completamente il contenuto in
modo ordinato e coerente.
Abbiamo detto che si tende dare ad un sito una struttura ad albero. Questa struttura ha dei livelli, di pagine e sotto pagine,
dalla pagina iniziale, per questo gli esperti SEO consigliano che tutto il contenuto importante deve trovarsi a non più di
quattro livelli dalla pagina iniziale, in modo che i motori di ricerca li considerano come importanti.
Evitare pagine non originali con contenuto duplicato o simile ad un’altra pagina già esistente, i motori di ricerca
possono penalizzarle considerandole come pagine per ingannare gli utenti.
Evitare cloaking, ovvero fare in modo di nascondere testo agli occhi dell’utente, come inserire testo dello stesso colore
del fondo.
FOOTER SEMPRE IN BASSO

Per avere un footer che si mantenga sempre in fondo alla pagina:
1)
html, body {
height:100%;
}
2) Racchiudiamo tutto il contenuto della pagina in un div con id=”wrap”,fino alla sezione footer, e con i css:
#wrap{
min-height:100%;
height:auto;
height:100%;
margin:0 auto -100px; /* margine negativo altezza footer */
}
3)
footer{
height:100px; /* altezza footer */
clear:both; /* clear di eventuali float se presenti nel layout */
}
HTML 5
NUOVI ELEMENTI
HTML5 è supportato in tutti i browser moderni.
È possibile definire e aggiungere propri elementi con uno stile a una pagina HTML, ad esempio definiamo (nell’head)
un nuovo elemento <myelem> con:
<script> document.createElement(“myelem”)</script>
<style>
myelem {
display:block;
background-color: #ddddd;
font-size: 30px;
}
</style>
<body>
<myelem> Nuovo elemento</myelem>
</body>
HTML5 offre nuovi elementi per una migliore struttura del documento.
Elementi struttura di una pagina

Molti siti Web contengono codice HTML come: <div id = "nav"> <div class = "header"> <div id = "footer">
per il menu, l'intestazione e il piè di pagina.
HTML5 offre nuovi elementi semantici per definire parti diverse di una pagina Web che sono elementi a livello di blocco.
header, section, footer, aside, nav, main, article, figure {

display: block;
}
Elemento <section>
L' elemento <section> definisce una sezione in un documento.
Una sezione è un raggruppamento tematico di contenuti, tipicamente con un'intestazione.
Normalmente una homepage può essere suddivisa in sezioni per l'introduzione, il contenuto e le informazioni di contatto.
Elemento <article>
L' elemento <article> specifica contenuti indipendenti e autonomi. Un articolo dovrebbe avere senso da solo, e
dovrebbe essere possibile leggerlo indipendentemente dal resto del sito web.
Esempi di dove un <article> può essere utilizzato: Post sul forum, Post sul blog, Articolo di giornale.
Elemento <header>
L' elemento <header> dovrebbe essere usato come contenitore per i contenuti introduttivi, un'intestazione per un
documento, una sezione, un article.
Ci possono essere diversi elementi <header> in un documento.
Elemento <footer>
L'elemento <footer> specifica un piè di pagina per un documento o una sezione, dovrebbe contenere informazioni sul
suo elemento contenitore, in genere contiene: l'autore del documento, informazioni sul copyright, collegamenti a termini
di utilizzo, informazioni di contatto, ecc.
Elemento <nav>
L'elemento <nav> definisce una serie di collegamenti di navigazione, inteso solo per il blocco principale dei link di
navigazione (menu).
NON tutti i collegamenti di un documento devono essere all'interno di un <nav>.
Elemento <aside>
L'elemento <aside> definisce contenuti esterni che non fanno parte strettamente alla pagina (barra laterale), ma il
contenuto dovrebbe essere correlato a quello circostante.
È consigliato l'utilizzo di questo elemento per contenuti pubblicitari ed elementi di navigazione che puntino all'esterno del
documento.
Elementi <figure> e <figcaption>

Nell’elemento <figure> possiamo racchiudere contenuti, opzionalmente con una didascalia <figcaption>, che
rappresentano unità indipendenti rispetto al contenuto principale.
Si può utilizzare l’elemento <figure> per annotare illustrazioni, schemi, foto, elenchi di codice, etc…
L’elemento <figcaption> quindi rappresenta una didascalia o una leggenda per l’elemento <figure> padre.
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Perché elementi semantici?

Con HTML4, gli sviluppatori hanno utilizzato i propri nomi id / classe per gli elementi di stile: intestazione, superiore,
inferiore, piè di pagina, menu, navigazione, principale, contenitore, contenuto, articolo, barra laterale, topnav, ecc.
Ciò ha reso impossibile per i motori di ricerca identificare il contenuto corretto della pagina web.
Con i nuovi elementi HTML5 ( <header> <footer> <nav> <section> <article>), questo diventerà più
facile.
Secondo il W3C, un Web semantico: "Consente di condividere e riutilizzare i dati tra applicazioni, aziende e comunità".
NUOVI ELEMENTI DI FORMULARIO
Opzioni predefinite campo di testo

Per specificare un elenco a discesa di opzioni predefinite per un campo di testo mentre si inseriscono i dati, è stato
introdotto il tag <datalist> </datalist>.
La sintassi per questo elemento è:
<input list="nome_list">
<datalist id="nome_list">
<option value="...">
...
</datalist>
Il valore dell’attributo list deve far riferimento all’id del tag <datalist>.
Colore <input type="color" name="favcolor" value="">

Crea un riquadro che cliccandolo apre una tabella in cui è possibile specificare un colore in esadecimale.
Con l’attributo value è possibile specificare il colore iniziale nel riquadro che di default è nero.
Data <input type="date" name=””>

Campo che visualizza e permette di selezionare una data.
È possibile inserire delle restrizioni con gli attributi min e max, con valore gg-mm-aaaa.
Data e ora <input type="datetime-local">

Campo che permette di selezionare anche l’ora oltre alla data.
Mese e anno <input type="month">

Permette di specificare il mese e l’anno
Email <input type="email">

Campo per inserire un indirizzo email.
Effettua anche la validazione.
Campo numerico <input type="number">

Definisce un campo numerico, è consigliato inserire sempre gli attributi min e max per specificare i numeri da inserire.
Range <input type="range">

Definisce un cursore per poter specificare un valore, non importante che sia preciso.
Campo di ricerca <input type="search">

Definisce un campo di ricerca.
Time <input type="time">

Definisce un campo in cui è possibile specificare un orario.
URL <input type="url">

Definisce un campo di input in cui consente di inserire un URL e lo valida
automaticamente.
ATTRIBUTI DEGLI ELEMENTI DI FORMULARIO

Gli elementi di un formulario possono ricevere vari attributi, abbiamo già visto:
- value specifica il valore iniziale per un campo di input.
- readonly specifica che il campo di input è di sola lettura (non può essere modificato).
- disabled specifica che il campo di input è disabilitato, cioè inutilizzabile e non selezionabile e il suo valore non verrà
inviato quando si invia il modulo.
- size specifica la dimensione (in caratteri) del campo di input.
- maxlength specifica la lunghezza massima consentita per il campo di input, il numero di caratteri consentito, il campo
non accetterà più caratteri.
- action=”...” Definisce l'azione da eseguire quando viene inviato il modulo. Normalmente, i dati del modulo vengono
inviati a una pagina Web sul server quando l'utente fa clic sul pulsante di invio.
Nell'esempio, <form action="/action_page.php"> i dati del formulario vengono inviati a una pagina sul server chiamata
"/action_page.php", che a sua volta contiene uno script sul lato server che gestisce i dati del modulo. Se viene omesso,
l’azione viene impostata sulla pagina corrente.
HTML5 ha aggiunto i seguenti attributi:

- autocomplete specifica se un formulario o campo di input deve avere il completamento automatico attivato o
disattivato, quindi i valori che può ricevere sono on e off.
Quando è attiva, il browser completa automaticamente i valori di input in base ai valori inseriti dall'utente in precedenza.
Si usa in <form> e gli <input> di tipo: text, search, url, tel, email, password, datepickers, range, e color.
- novalidate si usa in <form>, specifica che i dati del formulario non devono essere validati quando inviati.
- autofocus specifica che il campo di input deve essere attivo per ricevere il dato al caricamento della pagina.
- form assegna ad un <form> un eventuale campo <input> situato fisicamente al di fuori del form stesso, facendo
riferimento all’id del form assegnato.
- formaction permette di inviare il formulario a destinazioni diverse, praticamente oltre a quanto dichiarato con l’attributo
action di form. Si usa con gli elementi <input> type image e submit, anzichè creare tanti form uguali, se ne crea uno solo
e si decide con formaction a chi inviarlo.
- formenctype specifica in che modo i dati del formulario devono essere codificati quando vengono inviati. Si può
applicare solo per i moduli con method = "post" e con gli elementi type="submit" e type="image".
- formmethod sovrascrive l'attributo method dell’elemento <form>, permette di cambiare il metodo di invio post o get.
Si usa con gli elementi <input> type image e submit.
- formnovalidate esclude il formulario da una validazione, si usa solo con l’elemento bottone submit. Per inviare un
formulario senza validazione, o si dichiara l’attributo novalidate in <form> oppure si usa formnovalidate in un secondo
bottone di invio per avere entrambe le possibilità di validazione o no.
- formtarget sostituisce l'attributo target in <form> può essere usato in elementi di tipo submit e image e permette di
scegliere dove visualizzare l’invio del formulario, se su una nuova finestra del browser formtarget=”_blank”.
- width e height servono per specificare la larghezza e l’ altezza delle immagini,quindi può essere applicato al solo
elemento input type image. È consigliato usarli sempre.
- list viene usato nell’elemento <datalist> per richiamare una lista di dati selezionabili.
- min e max specificano valori minimi e valori massimi che un campo può accettare. Si usa con gli elementi <input> di
tipo number, range, date, datetime-local, month, time.
- multiple specifica che l'utente può immettere più di un valore ma solo negli elementi <input> di tipo email e file.
- pattern specifica una regular expressions, praticamente permette di vincolare quantità e tipo di dato da inserire. Si usa
in elementi <input> di tipo text, search, url, tel, email, e password. È consigliato aggiungere l'attributo title per
descrivere il pattern per aiutare l'utente.
- placeholder inserisce provvisoriamente una indicazione scritta di un colore grigio chiaro nella casella di input che
sparisce nel momento in cui l’utente compila il campo stesso, utile per indicare il tipo di dato o lo scopo atteso da un
campo. Si usa in elementi <input> di tipo: text, search, url, tel, email e password.
- required specifica che un campo di input, non può essere omesso, deve essere obbligatoriamente compilato prima di
inviare il formulario.
Si usa negli elementi <input> di tipo: text, search, url, tel, email, password, date, number, checkbox, radio e file.
- step specifica l’incremento degli intervalli di numeri concessi.

Funziona con gli elementi <input> di tipo: number, range, date, datetime, datetime-local, month, time e week.

HTML

Caricato da

Informazioni sul documento

Copyright

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

HTML

Caricato da

Copyright:

HTML

DOVE PUBBLICARE UN SITO WEB

FUNZIONAMENTO DI PAGINE WEB

È consigliato chiamare la pagina iniziale di un sito index.html.

DTD: DEFINIZIONE TIPO DI DOCUMENTO

HTML5 <!DOCTYPE html>

-Description: <meta name=”description” content=”Descrizione della pagina”/>

-Robots: <meta name=”robots” content”… , … “/>

- Author: <meta name=”Author” content=”nome autore”/>

- Keywords: <meta name=”Keywords” content=”…”/>

- Locality: <meta name=”locality” content=”… , … , …, … “/>

- Lang: <meta name=”lang” content=”…”/>

- Revisit-after: <meta name=”revisit-after” content=”…”/>

- Category: <meta name=”category” content=”… , … , … ”/>

- Canonical: <link rel=”canonical” href=”URL”/>

- Refresh <meta http-equiv=”refresh” content=”30”>

Paragrafo <p> . . . </p>

Andare a capo <br/>

Centrato <center> . . . </center>

Disegno di linea <hr>

Testo preformattato <pre> . . . </pre>

Testo in grassetto <b> . . . </b>

Testo importante <strong> . . . </strong>

Formato italico <i> . . . </i>

Testo più piccolo <small> . . . </small>

Evidenziato <mark>. . .</mark>

Testo inserito <ins> . . . </ins>

Testo cancellato <del> . . . </del>

Testo sottolineato <u> . . . </u>

Pendice <sub> . . . </sub>

Esponente <sup> . . .</sup>

Testo sbarrato <s> . . . </s>

Tra virgolette <q> . . . </q>

Citazione <blockquote> . . . </blockquote>

Abbreviazioni <abbr>. . . </abbr>

Informazioni contatto <address> . . . </address>

Titolo di un lavoro <cite> . . . </cite>

Commenti

URL predefinito <base>

Area di Testo <textarea> . . . </textarea>

Password <input type=”password” name=”chiave”/>

Checkbox <input type=checkbox” name=”” id=”” value=””/> e da mostrare

Immagine come bottone <input type=”image” src=”img.jpg” name=”bottone” action=””/>

Caricare un file <input type=”file” name=””/>

Raggruppare i campi <fieldset> . . . </fieldset>

Tag etichetta <label for=”id_opz”>Opzione</label>

PAGINA WEB CONTENUTA IN UN’ALTRA PAGINA

TESTARE PAGINE WEB

ACCENTI E SIMBOLI SPECIALI

Molti altri è possibile cercarli su internet.

Eventi del mouse

INSERIMENTO DI UNA ANIMAZIONE FLASH

Nel tag <object> . . . </object>, poi si inseriscono:

FOOTER SEMPRE IN BASSO

Elementi struttura di una pagina

header, section, footer, aside, nav, main, article, figure {

Elementi <figure> e <figcaption>

Perché elementi semantici?

Opzioni predefinite campo di testo

Colore <input type="color" name="favcolor" value="">

Data <input type="date" name=””>

Data e ora <input type="datetime-local">

Mese e anno <input type="month">

Email <input type="email">

Campo numerico <input type="number">

Range <input type="range">

Campo di ricerca <input type="search">