TronWeb

Il Web Developing a portata di studente

HTML5

Benvenuto nella pagina del corso di HTML5. Qui troverai gli argomenti svolti a lezione. Cerca quello che ti interessa qui sotto:

Immagini in HTML

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <img src="/immagini/default.png" alt="immagine" style="width:128px;height:128px;">
 </body>
</html>

Qui possiamo vedere la dichiarazione di un’immagine in HTML, essa è caratterizzata dal tag img e in particolare dall’attributo src che ci permette di inserire l’URL o il percorso della nostra immagine, per poi essere visualizzata sul sito.

l’attributo alt fornisce una descrizione dell’immagine mentre style, attraverso width e height ci permette di deciderne le dimensioni.

I form in HTML

<!DOCTYPE html>
 <html>
  <head>
  </head>
  <body>
   <form>
    Nome:<br>
    <input type="text" name="nome" value="nome"><br>
    Cognome:<br>
    <input type="text" name="cognome" value="cognome"><br>
    Sesso:<br>
    <input type="radio" name="sesso" value="maschio">Maschio<br>
    <input type="radio" name="sesso" value="femmina">Femmina<br>
    Veicoli posseduti:<br>
    <input type="checkbox" name="bicicletta">Bicicletta<br>
    <input type="checkbox" name="auto">Automobile<br>
    <input type="submit" value="submit">
   </form>
  </body>
 </html>

In queste righe di codice possiamo vedere quella che sarebbe la struttura di un normale modulo da compilare in un sito qualsiasi.

La struttura di questo “modulo” è racchiusa, nel codice, dal tag form, che racchiude al suo interno dei comandi che restituiranno un input ad un ipotetico server.

il tag input con l’attributo ‘ type=”text” ‘creerà un box di input testo, name  da’ un nome a questo input per distinguerlo da altri (in questo caso per distinguerlo da quello del cognome) mentre value associa un valore all’input, infatti viene omesso se si vuole che questo sia deciso dall’utente.

L’attributo ‘ type=”radio” ‘ da’ origine ad un selettore circolare, che a differenza del checkbox, permette un’unica selezione e non multiple, value e name si utilizzano allo stesso modo che con l’attributo text. È importante evidenziare che radio che definiscono una stessa selezione devono avere tutti lo stesso name, altrimenti i selettori saranno presi come input separati.

Input accompagnato da ‘ type”checkbox” ‘ formerà dei selettori quadrati, rendendo possibile la scelta multipla, si comportano allo stesso modo dei radio.

infine abbiamo ‘ type=”submit” ‘ che indica, come dice il nome, un bottone per confermare l’input dei dati immessi dall’utente, l’attributo value ha lo stesso compito che assume con gli altri input.

Le tabelle in HTML

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <table style="width:100%" border="1">
   <tr>
    <th>Titolo 1</th>
    <th>Titolo 2</th>
    <th>Titolo 3</th>
   </tr>
   <tr>
    <td>Elemento 1</td>
    <td>Elemento 2</td>
    <td>Elemento 3</td>
   </tr>
  </table>
 </body>
</html>

Nel box qui sopra si presenta la struttura classica di una tabella in HTML , essa ha il proprio tag table , nell’esempio seguito dall’attributo style e width, che ci permette di definire la larghezza della tabella, in questo caso 100%, perciò occuperà tutta la larghezza della pagina.

Un’altro attributo utile nel caso delle tabelle è border, che può assumere i valori di 0 e 1, che servono rispettivamente a definire una tabella “senza bordi” e “con bordi”. Maggiori opzioni di personalizzazione per bordi e sfondo saranno disponibili in CSS.

Una RIGA della tabella è introdotta dal tag tr e un elemento appartenente a quella riga con td, diversi elementi vengono automaticamente separati tra loro se appartengono alla stessa riga, in modo da occupare tutta la larghezza disponibile, gli elementi di righe successive si incolonnano sotto a quelli delle precedenti,formando le colonne.

Nel caso in cui si vogliano inserire dei titoli nella propria tabella, si può ricorrere al tag th che permette di creare un testo in grassetto al centro delle colonne formate dagli elementi.

 

Gli elenchi ordinati e non ordinati in HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Titolo</title>
 </head>
 <body>
  <ul>
   <li>Elemento di elenco NON ordinato</li>
   <li>Elemento di elenco NON ordinato</li>
   <li>Elemento di elenco NON ordinato</li>
  </ul>
  <ol>
   <li>Elemento di elenco ordinato</li>
   <li>Elemento di elenco ordinato</li>
   <li>Elemento di elenco ordinato</li>
  </ol>  
 </body>
</html>

Nell’esempio sopra riportato abbiamo le due tipologie di elenchi usabili in HTML, cioè ul (unordered list) e ol (ordered list), che sono rispettivamente un elenco non ordinato e ordinato, vengono trattati allo stesso modo,  gli elementi che ne fanno parte sono introdotti dal tag li.

L’elenco non ordinato si presenterà con dei pallini pieni a precedere gli elementi mentre quello ordinato avrà dei numeri, caratteristiche che potranno essere modificate con CSS.

Il testo in HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Questo è un titolo</title>
 </head>
 <body>
  <p>
   <span>Questa è una normale frase</span>
   <h1>Questa è un'intestazione</h1>
   <br>
   <h2>Questa è un'intestazione</h2>
   <hr>
   <h3>Questa è un'intestazione</h3>
   <h4>Questa è un'intestazione</h4>
   <h5>Questa è un'intestazione</h5>
   <h6>Questa è un'intestazione</h6>
  </p>
 </body>
</html>

Nell’esempio sopra sono presenti i tag principali riguardanti la modifica e l’inserzione del testo, span viene usato in generale per scrivere un discorso, può essere modificato con CSS, h1-h6 sono intestazioni, molto utili poiché a queste fa solitamente riferimento la searchbar nel momento in cui si cerca una specifica parola o un articolo, h1 rappresenta l’intestazione con caratteri più grandi, h6 con quelli più piccoli.

br serve a spaziare tra di loro due frasi, hr fa lo stesso ma inserendo una linea continua tra le due.

Il tutto è racchiuso nel tag p, indicando che tutto quello che c’è al suo interno fa parte dello stesso paragrafo e verrà separato dagli altri presenti nella pagina.

Dichiarazione di un file HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Questo è un titolo</title>
 </head>
 <body>

 </body>
</html>

Qui è riportata la struttura base di un file HTML, si divide in due parti principali che sono head e body, racchiuse dal tag html.

I tag sono racchiusi tra i segni “<” e “>”.In apertura si presentano solo con il nome, che in chiusura viene preceduto da “/” (es. <title>Questo è un titolo</title>).

Il tag html è la radice della pagina html, head è l’intestazione, title serve a dare il nome alla scheda e body contiene letteralmente il corpo della pagina con tutta la parte riguardante il codice.

Post di prova – l’attributo alt

<!DOCTYPE HTML>
<html>
  <head>
    <title>Ciao Mondo!</title>
  </head>
  <body>
    <img src="./img.jpg" alt="Immagine di una montagna innevata, durante una giornata di sole e cielo sereno">
  </body>
</html>

L’attributo alt è molto comune nelle immagini e nei file audio: quei tipi di file, cioè, impossibili da “trascrivere” a parole.

Nella pratica dell’SEO (Search Engine Optimization) questo attributo si rivela di fondamentale importanza: i motori di ricerca, come Google, non sono in grado di “leggere” le immagini all’interno di ogni sito. Ecco quindi che, aggiungendo una breve descrizione dell’immagine, il nostro sito avrà probabilità maggiori di comparire tra i primi risultati di una ricerca relativa, in questo caso, a immagini di una montagna scattate durante una giornata di sole e cielo sereno.

Un altro importantissimo ruolo dell’attributo alt è che il suo contenuto può essere “letto ad alta voce” da appositi strumenti, utilizzati ad esempio da persone ipo- o non-vedenti, aiutandole a capire che tipo di immagine è presente sullo schermo.