Cos'è l'HTML

Il linguaggio HTML nasce insieme al Browser stesso.
HTML è l'acronimo di HyperText Markup Language, ovvero un linguaggio di contrassegno per gli ipertesti (link).

Non si può definire un vero e proprio linguaggio di programmazzione, a differenza dei vari Java, PHP, ecc... bensì per lo più un linguaggio per la formattazione dei contenuti.
Quindi a differenza degli stessi linguaggi precendemente elencati, l'HTML non è pre-compilato.
L'HTML sarà dunque il principale riferimento per la visualizzazione delle pagine all'utente.

L'ABC dell'HTML

Impostazione delle pagine e principali tags

L'ABC dell'HTML

L'HTML è composto da markup, definiti nel linguaggio tecnico TAGS.

Prima di comprendere le centinaia di tags previste nel linguaggio, capiamo come impostare al meglio le pagine, per una corretta gestione del sito web a partire da pagine statiche per poi arrivare a quelle dinamiche.

Innanzitutto occorre creare una struttura per il codice sorgente all'interno del web server (localhost o remote server).
La prima pagina riconosciuta dal browser per l'esecuzione del sito web, è la pagina index.html.
Avremo dunque inizialmente una struttura del tipo:

Web Server

----- progetto_web (nome della directory del codice sorgente)

---------- index.html

Sarà dunque sufficiente digitare sul browser http://webserver/progetto_web/ per visualizzare la prima pagina html.

L'ABC dell'HTML

Per poter dichiarare il documento come HTML (il nostro file index.html), occorrerà digitare nella prima riga il Doctype.

<!DOCTYPE html>

Il Doctype permette la definizione del documento.

Prima dell'HTML5 era necessario specificare versione e standard rispettati per essere compliant alle spefiche del W3C (l'istituzione del web), con codici del tipo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
			"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		

In seguito al Doctype, si può inserire il tag html per iniziare a scrivere codice.

L'ABC dell'HTML

Tutte le pagine HTML sono composte da due tags principali, ovvero head e body, testa e corpo del documento.

  • head raccoglie le informazioni della pagina (titolo, autore, descrizione, etc...) utili anche per i motori di ricerca, ovvero i così detti *metatags. Tutto ciò che viene inserito nell'head non deve essere visibile da browser.
  • body contiene la parte visiva della pagina, ovvero tutto ciò che si potrà vedere tramite il browser.

* I metatags sono le informazioni sul dato, ovvero i metadata.
Un metadata è un dato elaborabile dal browser (o dai servizi web come i motori di ricerca) ma non è visibile all'utente.

L'ABC dell'HTML

Tutte le pagine si presenteranno dunque con la seguente struttura

<!Doctype html>
<html>
	<head>
		<!-- Metatags -->
	</head>
	<body>
		<!-- Corpo della pagina -->
	</body>
</html>

L'ABC dell'HTML

Ecco un prospetto dei metatags da utilizzare necessariamente nell'head

<head>
	<title>My first web page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
	<meta name="title" content="My first web page">
	<meta name="description" content="My wonderful page description">
	<meta name="keywords" content="my, wonderful, page, keys">
</head>

L'ABC dell'HTML

  • tag title: titolo della pagina (visibile nella scheda del browser)
  • Content Type: definisce il charset della pagina. UTF-8 è il charset più diffuso per gli standard del web
  • viewport: definisce lo "zoom" iniziale del brwoser. Necessario per l'utilizzo responsive dei siti web
  • meta title: titolo della pagina per i motori di ricerca (max 70 car.)
  • description: descrizione della pagina per i motori di ricerca (max 250 car.)
  • keywords: parole chiave per i motori di ricerca, separate dalla virgola (max 10)

L'ABC dell'HTML

Di seguito invece altri metatags non necessari... ma consigliati!

<link rel="shortcut icon" href ="favicon.ico" type="image/x-icon"/>
<meta property="og:title" content="My first web page" />
<meta property="og:description" content="My wonderful page description" />
<meta property="og:image" content="preview.png" />
  • shortcut icon: icona della scheda del browser
  • og:title: titolo per i social network
  • og:description: descrizione per i social network
  • og:image: immagine di anteprima per i social network

Generalmente gli og metatags (og sta per Open Graph), sono quelli che determinano i risultati nei wall delle nostre bacheche,
ovvero la visualizzazione dei post.

Top tags dell'HTML

I tags più utilizzati nell'HTML e i nuovi tags HTML5

Top tags dell'HTML

Come già detto, ci sono centinaia di tags nel linguaggio HTML.
Fortunatamente molti hanno funzionalità simili fra di loro, altri sono poco necessari per le normali attività e dunque sempre più deprecati.

Prima di iniziare con l'elenco dei tags, è bene ricordare alcune informazioni:

  • I tag si inseriscono nel tag contenitore body
  • Un tag deve sempre essere aperto e poi successivamente chiuso, ad eccezione degli short tags che si aprono e chiudono nello stesso momento

    <tag></tag> <!-- Tag generico -->
    <tag /> <!-- Short Tag generico -->
    
  • Ogni tag può contenere degli attributi, ovvero proprietà descrittive o caratterizzanti del tag stesso

    <tag prop="value" prop2="another_value"></tag>
    
  • Per inserire i commenti all'interno del codice HTML si utilizza la dicitura <!-- Il mio commento -->

Top tags dell'HTML

Di seguito i tags che andremo ad analizzare:

  • Heading tags
  • Scrittura
  • Links
  • Liste
  • Tabelle
  • Contenuti multimediali (immagini, video)
  • Forms
  • Div
  • Altre novità HTML5

Top tags dell'HTML

Heading tags

Gli heading tags rappresentano i titoli e sottotitoli dei contenuti all'interno delle pagine HTML.
Ci sono sei diversi tipi di heading tags, classificati per priorità e rilevanza all'interno della pagina:

<h1>Titolo h1</h1>
<h2>Titolo h2</h2>
<h3>Titolo h3</h3>
<h4>Titolo h4</h4>
<h5>Titolo h5</h5>
<h6>Titolo h6</h6>

Titolo h1

Titolo h2

Titolo h3

Titolo h4

Titolo h5
Titolo h6

Top tags dell'HTML

Heading tags

Secondo le best practices (utili in ottica SEO), all'interno di ogni pagina dovrebbe esserci un solo elemento h1.
Questo sarà riconosciuto come titolo di riferimento della pagina, al di la dei metatags impostati.

Successivamente così come per l'h1, ci deve essere un solo elemento h2, utilizzato dai motori di ricerca per individuare la short description della pagina.

Gli h3 sono utilizzati liberamente per i sottotitoli di capitoli o moduli della pagina.

I restanti heading tags sono sempre più deprecati.

Top tags dell'HTML

Scrittura

Per quanto riguarda la scrittura di testo e contenuti all'interno della pagina, ci sono diverse possibilità messe a disposizione del linguaggio HTML, le principali sono:

<p>Creazione del paragrafo</p> <!-- Paragrafo -->
<span>Creazione di un testo semplice</span> <!-- Testo semplice -->

Seppure apparentemente simili, i due tags hanno comportamenti differenti:

  • il paragrafo crea un vero e proprio contenitore di testo, che lascerà appunto uno spazio superiore ed inferiore rispetto ai contenuti precedenti e successivi del testo, ed occupa una posizione definita all'interno della pagina.
  • lo span è semplicemente un testo che occupa il suo stesso spazio e viene visualizzato esattamente nel punto in cui è inserito all'interno della pagina

Top tags dell'HTML

Scrittura

All'interno dei tags di scrittura, si possono utilizzare ulteriori tags per modificare il carattere

<p>Paragrafo con <b>grassetto</b></p> 
<p>Paragrafo con <i>corsivo</i></p> 
<p>Paragrafo con <u>sottolineato</u></p>
<p>Paragrafo con <strike>testo barrato</strike></p> 

Paragrafo con grassetto

Paragrafo con corsivo

Paragrafo con sottolineato

Paragrafo con testo barrato

Top tags dell'HTML

Scrittura

Essendo il tag p un vero e proprio contenitore, è possibile definire anche alcuni aspetti di formattazione tramite appositi attributi del tag

<p align="center">Paragrafo centrato</p> 
<p align="left">Paragrafo a sinistra</p> 
<p align="right">Paragrafo a destra</p> 

Paragrafo centrato

Paragrafo a sinistra

Paragrafo a destra

Se avessimo applicato la stessa proprietà ad un tag span non avremmo ottenuto gli stessi risultati in quanto il tag non è riconosciuto come contenitore

<span align="right">Paragrafo a destra</span> 
<span align="left">Paragrafo a sinistra</span> 
Paragrafo a destra Paragrafo a sinistra

Da notare inoltre come il tag span non manda a capo in automatico i due testi.

Top tags dell'HTML

Links

Fondamentali in un sito web, i links permettono il collegamento interno o esterno della pagina HTML.

Per creare un link, si utilizza il tag a, che richiede necessariamente l'utilizzo di alcuni attributi; il principale attributo è href che specifica esattamente l'url del link.

<a href="http://google.it">Testo collegamento Google</a>

Il tag mostrerà solamente il testo contenuto al suo interno, ovvero "Testo collegamento Google" e al click ci porterà sull'url inserito della home page di Google.

Top tags dell'HTML

Links

Ci sono però altri attributi molto utili da utilizzare per un link

Attributo Valori Descrizione
title [Testo libero] Definisce il titolo del link
rel [author, bookmark, help, license, next, nofollow, noreferrer, prev, search, tag] Definisce la tipologia di collegamento
download [Titolo del file] Se il link è quello di un file, permette di rinominare il nome del file scaricato
target [_self, _parent, _blank, _top] Specifica come aprire il link all'interno del browser. _blank per esempio porta ad una nuova pagina

Gli attributi evidenziati in rosso, sono facoltativi per il funzionamento del link, ma consigliati per una corretta programmazione ed indicizzazione da parte dei motori di ricerca

Top tags dell'HTML

Liste

Esistono tre diversi tipi di tags liste nell'HTML

  • ul - Lista disordinata (unordered list)
  • ol - Lista ordinata (ordered list)
  • dl - Lista descrittiva (description list)

All'interno di ogni tag di tipo lista, andranno poi inserite le singole voci.

Top tags dell'HTML

Liste

Per quanto riguarda le liste ordinate e disordinate, le voci sono inserite all'interno di un ulteriore tag li.

<p>Lista disordinata</p>
<ul>
    <li>Voce 1</li>
    <li>Voce 2</li>
</ul>

<p>Lista ordinata</p>
<ol>
    <li>Voce 1</li>
    <li>Voce 2</li>
</ol>

Lista disordinata

  • Voce 1
  • Voce 2

Lista ordinata

  1. Voce 1
  2. Voce 2

Top tags dell'HTML

Liste

Nelle liste ordinate è possibile specificare la tipologia di marker tramite l'attributo type.
Di seguito i valori che può avere l'attributo:

Valore Descrizione Esempio
type="1" (Default) Mostra un elenco numerico
  1. Valore 1
  2. Valore 2
type="A" Mostra un elenco con le lettere maiuscole
  1. Valore 1
  2. Valore 2
type="a" Mostra un elenco con le lettere minuscole
  1. Valore 1
  2. Valore 2
type="I" Mostra un elenco con le lettere maiuscole della numerazione romana
  1. Valore 1
  2. Valore 2
type="i" Mostra un elenco con le lettere minuscole della numerazione romana
  1. Valore 1
  2. Valore 2

Top tags dell'HTML

Liste

Le liste descrittive, si compongono in maniera differente.
A differenza del tag li, per indicare le voci si utilizzano due tag:

  • dt per il titolo della voce
  • dd per la descrizione della voce

<dl>
  <dt>Voce 1</dt>
  <dd>Descrizione della voce 1</dd>
  <dt>Voce 2</dt>
  <dd>Descrizione della voce 2</dd>
</dl>
Voce 1
Descrizione della voce 1
Voce 2
Descrizione della voce 2

Top tags dell'HTML

Tabelle

Le tabelle permettono una visualizzazione ordinata dei dati.
Fino a qualche anno fa, le tabelle si utilizzavano erroneamente nell'HTML anche per la divisione della pagina o degli elementi, ma adesso l'utilizzo errato determina addirittura una penalizzazione sui motori di ricerca in quanto sintomo di una cattiva programmazione.

Le tabelle si inseriscono all'interno del tag table.

<table> <!-- Dichiarazione tabella -->
    <tr> <!-- Riga -->
        <td>Colonna 1</td> <!-- Colonna -->
        <td>Colonna 2</td> <!-- Colonna -->
    </tr>
    <tr> <!-- Riga -->
        <td>Colonna 1</td> <!-- Colonna -->
        <td>Colonna 2</td> <!-- Colonna -->
    </tr>
</table>
Colonna 1 Colonna 2
Colonna 1 Colonna 2

Top tags dell'HTML

Tabelle

Riepilogando dunque:

  • Per specificare le singole righe, si utilizza il tag tr
  • Per specificare le singole colonne, si utilizza il tag td
  • Se si vuole creare una riga di intestazione (prima o ultima), le colonne non dovranno essere contenute in tags td, ma in th. Questo permetterà in automatico una formattazione diversa e un'indicizzazione ad hoc del contenuto

Ci sono alcune best practices da rispettare:

  • Il numero di colonne deve essere lo stesso per ogni riga
  • La riga di intestazione iniziale, andrebbe inserita all'interno di un tag contenitore thead
  • Le righe del corpo della tabella, andrebbero inserite all'interno del tag contenitore tbody
  • La riga di intestazione finale (generalmente usata per i totali), andrebbe inserita nel tag contenitore tfoot

Top tags dell'HTML

Tabelle

<table> <!-- Dichiarazione della tabella -->
    <thead>
        <tr> <!-- Riga di intestazione -->
            <th>Colonna 1</th> <!-- Info Colonna -->
            <th>Colonna 2</th> <!-- Info Colonna -->
        </tr>
    </thead>
    <tbody>
        <tr> <!-- Riga 1 -->
            <td>Colonna 1</td> <!-- Colonna -->
            <td>Colonna 2</td> <!-- Colonna -->
        </tr>
        <tr> <!-- Riga 2 -->
            <td>Colonna 1</td> <!-- Colonna -->
            <td>Colonna 2</td> <!-- Colonna -->
        </tr>
    </tbody>
    <tfoot>
        <tr> <!-- Riga totale -->
            <th>Colonna 1</th> <!-- Totale Colonna -->
            <th>Colonna 2</th> <!-- Totale Colonna -->
        </tr>
    </tfoot>
</table>

Top tags dell'HTML

Contenuti multimediali (immagini, video)

All'interno delle pagine HTML è possibile inserire contenuti multimediali come immagini, video, file audio, etc...
Grazie all'HTML5 questa operazione è diventata sempre più semplice rispetto al passato.

Per inserire un'immagine si utilizza uno short tag HTML (nativo) img.

<img alt="Immagine" title="Titolo immagine" src="link/immagine.png"/>
  • L'attributo src definisce il percorso (relativo o assoluto) dell'immagine
  • L'attributo title, così come per i link è utilie per i motori di ricerca
  • L'attributo alt, permette di definire un testo da visualizzare in alternativa all'immagine qualora ci siano problemi nel caricamento della stessa

Top tags dell'HTML

Contenuti multimediali (immagini, video)

E' inoltre possibile utilizzare gli attributi height e width per specificare rispettivamente altezza e larghezza dell'immagine.

<img alt="Immagine" title="Titolo immagine" src="link/immagine.png"
	width="300px" height="100px"/>

Generalmente per le immagini si consiglia di specificare sempre una dimensione esatta, utilizzando i pixels.

Questo permette al browser di utilizzare meno risorse e tempo in fase di rendering della pagina e dunque rendere il sito web più performante.

Top tags dell'HTML

Contenuti multimediali (immagini, video)

Per quanto riguarda i video e i file audio, prima dell'HTML5 non era definito uno standard per la gestione e visualizzazione degli stessi all'interno del browser. Ragion per cui occorreva utilizzare sempre plugin o librerie esterne.

L'HTML5 ha reso invece semplice e comune per tutti i browser, la gestione di questi contenuti multimediali, seppur non tutti i formati sono riconosciuti dai browser.

Per i video sono consentiti esclusivamente i file con estensione .mp4, .webm, .ogg

Browser Formati riconosciuti
Google Chrome .mp4, .webm, .ogg
Internet Explorer .mp4
Firefox .mp4, .webm, .ogg
Safari .mp4
Opera .mp4, .webm, .ogg

Per i file audio sono consentiti esclusivamente i file con estensione .mp3, .wav, .ogg

Browser Formati riconosciuti
Google Chrome .mp3, .wav, .ogg
Internet Explorer .mp3
Firefox .mp3, .wav, .ogg
Safari .mp3, .wav
Opera .mp3, .wav, .ogg

Top tags dell'HTML

Contenuti multimediali (immagini, video)

Per visualizzare un video, si utilizza il tag video

<video width="320" height="240" controls autoplay>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Video non supportato dal browser
</video>
  • E' consigliato sempre specificare gli attributi width e height, per ottimizzare al solito le performance del browser e la visualizzazione del contenuto
  • L'attributo contols abilita i controlli di default sull'oggetto video (play, pause, volume, etc...)
  • L'attributo autoplay abilita l'esecuzione automatica al termine del caricamento della pagina
  • Si consiglia di definire diverse source che conterranno lo stesso video in formati diversi. Questo perchè per alcuni browser non è possibile riconoscere alcuni formati video. Sarà dunque il browser a scegliere la soluzione migliore per la visualizzazione. Nel caso in cui non vi sia un formato idoneo, sarà visualizzato il testo "Video non supportato dal browser"

Top tags dell'HTML

Contenuti multimediali (immagini, video)

Per visualizzare un file audio, si utilizza il tag audio

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  Audio non supportato dal browser
</audio>
  • L'attributo contols abilita i controlli di default sull'oggetto audio (play, pause, volume, etc...)
  • Si consiglia di definire diverse source che conterranno lo stesso audio in formati diversi. Questo perchè per alcuni browser non è possibile riconoscere alcuni formati audio. Sarà dunque il browser a scegliere la soluzione migliore per la visualizzazione. Nel caso in cui non vi sia un formato idoneo, sarà visualizzato il testo "Audio non supportato dal browser"

Top tags dell'HTML

Forms

I forms sono l'elemento di contatto per eccellenza fra la pagina web e l'utente.
Grazie ai form è possibile raccogliere informazioni di qualunque tipo, e il loro utilizzo è pressocchè fondamentale nel web.

Nel tempo i form sono diventati sempre più evoluti e grazie all'HTML5 è diventato sempre più semplice raccogliere una grande varietà di informazioni, specificandone il contenuto e la forma.

Il funzionamento del form, prevede l'immissione dei dati da parte dell'utente, e l'invio degli stessi dati ad una pagina definita presente sul server.

Top tags dell'HTML

Forms

Le informazioni arriveranno ad una pagina del server (definita action) formattate nella metodologia chiave-valore.
Se per esempio nel form saranno richieste e-mail e password dell'utente, il server riceverà le voci:

  • mail="mario@mail.it"
  • password="12345678"

Il passaggio di queste informazioni può avvenire secondo due diversi metodi:

  • GET: metodo di default con passaggio in chiaro dei dati, che vengono inseriti in coda alla URL in seguito al simbolo "?" e uniti fra loro tramite il simbolo "&"
    http://miosito.it/action?mail=mario@mail.it&password=12345678
    
  • POST: passaggio offuscato dei dati che lascerà dunque l'URL invariata
    http://miosito.it/action
    

Top tags dell'HTML

Forms

E' evidente che il metodo POST è più sicuro in quanto permette di non visualizzare tutte le informazioni inserite dall'utente (per lo meno apparentemente).

Il metodo GET può essere invece utile quando i parametri sono utilizzati per le così dette query string, ovvero per modificare la visualizzazione della pagina risultante (es. le pagine di ricerca).

Per creare un form HTML, occorre dunque creare il tag form specificando i parametri dell'action (pagina del server dove arriveranno i dati) e del metodo utilizzato per il tasferimento (GET o POST)

<form method="POST" action="action.html">
    <!-- Campi richiesti all'utente -->
</form>

Successivamente si andranno ad inserire i vari input, ovvero i campi richiesti per la compilazione dell'utente

Top tags dell'HTML

Forms

Come già detto è possibile richiedere diverse tipologie di informazioni all'utente.
Per ognuna di queste, è necessario associare un nome tramite l'attributo name per permettere poi la gestione delle informazioni lato server (chiave/nome = valore).

Ecco un esempio di raccolta del Nome dell'utente:

<form method="POST" action="action.html">
	<input type="text" name="nome" placeholder="Il tuo nome"/>
</form>

Il risultato sarà un semplice campo con immissione di testo libera.
Gli attributi utilizzati e obbligatori per lo short tag input sono:

  • type: definisce la tipologia di informazione raccolta. Se omesso sarà uguale a "text"
  • name: necessario per identificare il campo lato server

Top tags dell'HTML

Forms

Opzionalmente si potranno aggiungere ulteriori attributi per definire al meglio il campo

  • placeholder: per impostare un testo da visualizzare quando il campo è vuoto, come guida per la compilazione
  • value: per impostare un valore di default del campo (sovrappone dunque il placeholder se presente)
  • disabled: per far sì che il campo risulti disabilitato
  • readonly: per far sì che il campo risulti abilitato ma in sola lettura
<form method="POST" action="action.html">
	Nome: <input type="text" name="nome" placeholder="Il tuo nome"/>
	Cognome: <input type="text" name="cognome" value="Rossi" placeholder="Il tuo nome"/>
	E-mail: <input type="text" name="mail" value="mario@mail.it" disabled/>
	Sesso: <input type="text" name="sesso" value="Uomo" readonly/>
</form>
Nome: Cognome: E-mail: Sesso:

Top tags dell'HTML

Forms

L'attributo type permette di specificare la tipologia di input richiesta

  • type="text": testo libero
  • type="password": password nascosta da asterischi
  • type="email": raccolta e-mail
  • type="color": raccolta di un colore
  • type="date": raccolta di una data (con calendario)
  • type="datetime": raccolta di data e ora (con calendario)
  • type="month": raccolta di un mese
  • type="number": raccolta di un numero
  • type="range": raccolta di un range di valori
  • type="tel": raccolta di un numero telefonico
  • type="time": raccolta di un orario
  • type="url": raccolta di un link
  • type="week": raccolta di una settimana
  • type="file": caricamento di un file

Top tags dell'HTML

Forms

Grazie all'attributo type è possibile determinare la visualizzazione del campo, oppure a seconda dei dispositivi (es. table o smartphone) addirittura la visualizzazione della tastiera

Es. tastiera con type="tel" o type="number"

Es. tastiera con type="email"

Top tags dell'HTML

Forms

<form method="POST" action="action.html">
    Nome e cognome: <input type="text" name="nome" placeholder="Il tuo nome e cognome"/>
    E-mail: <input type="email" name="mail" placeholder="La tua e-mail"/>
    Telefono: <input type="tel" name="telefono"/>
    Data di nascita: <input type="date" name="data_di_nascita"/>
    Colore preferito: <input type="color" name="colore"/>
    Stipendio medio: <input type="range" min="800" step="100" max="2000"/>
</form>

Nome e cognome:   E-mail: Telefono:

Data di nascita:

Colore preferito:

Stipendio medio:

Top tags dell'HTML

Esistono quattro diversi input per permettere invece le scelte fra più opzioni:

<form method="POST" action="action.html">
    Sesso:  
    <input type="radio" name="sesso" value="Uomo" checked/> Uomo    
    <input type="radio" name="sesso" value="Donna"/> Donna
    Mezzi di trasporto:
    <input type="checkbox" name="mezzo" value="Auto"/> Auto    
    <input type="checkbox" name="mezzo" value="Moto"/> Moto    
    <br /><br />
    Residenza:
    <select name="residenza">
        <option value="bari">Bari</option>
        <option value="provincia">Provincia</option>
    </select>
    Browser preferito: <input name="browser" list="browser_list"/>
	<datalist id="browser_list">
	    <option value="Internet Explorer" />
	    <option value="Google Chrome"/>
	    <option value="Mozilla Firefox"/>
	</datalist>
</form>

Sesso: Uomo     Donna                 Mezzi di trasporto: Auto     Moto    

Residenza:                 Browser preferito:

Top tags dell'HTML

Forms

  • Per tutte le opzioni di scelta, occorre specificare l'attributo value
  • L'input type="radio" permette una sola scelta fra le opzioni elencate. Per ognuna delle opzioni è necessario indicare lo stesso attributo name
  • L'input type="checkbox" permette più scelte fra le opzioni elencate. Anche per queste è necessario indicare lo stesso attributo name
  • Il tag select permette di elencare le varie opzioni nei sotto tags option
  • L'input datalist permette la funzione di autocomplete e di select
  • Per selezionare un'opzione di default nell'input type radio e checbox, si utilizza l'attributo checked
  • Per selezinare un'opzione di default nella select, si aggiunge l'attributo selected all'opzione, altrimenti sarà di default considerata la prima opzione elencata

Nota
Quando si omette il valore all'attributo del tag (come per esempio nel caso di checked, controls, readonly, etc...) è come se si scrivesse [nome attributo] = "true"

<input type="text" name="nome" readonly> 
<!-- Corrisponde a --> 
<input type="text" name="nome" readonly="true">

Top tags dell'HTML

Forms

Se invece si vuole abilitare un campo con del testo più lungo (es. una descrizione) si utilizza il tag textarea

<textarea rows="5" cols="100" placeholder="La tua descrizione"></textarea> 


Gli attributi rows e cols possono essere utilizzati per sostituire rispettivamente height e width

Top tags dell'HTML

Forms

Per poter inviare i campi del form all'action del server indicata, si utilizza il così detto submit button

<button type="submit">Invia dati</button>

Un'altra tipologia di pulsante che si può utilizzare insieme al submit, è il reset button che permette un ritorno alle impostazioni iniziali del form svuotando tutti i campi e annullando eventuali scelte effettuate dall'utente (radio, select, etc...)

<button type="reset">Annulla</button>

Top tags dell'HTML

Div

Molto importanti, seppur apparentemente irrilevanti, sono i tags div dell'HTML.

Grazie ai div è possibile creare sezioni ben distinte all'interno della pagina web, all'interno del quale inserire contenuti e disporli o formattarli secondo specifiche regole di stile.

Per poter creare un div, è sufficiente creare il tag e inserire all'interno il suo contenuto.

<div>
	<!-- Contenuto del div -->
</div>

Apparentemente i div di per se non hanno alcuna rilevanza, ma con un pizzico di CSS, sono il tag più importante dell'HTML secondo gli standard dei siti web moderni.

Top tags dell'HTML

Altre novità HTML5

Oltre alle varie introduzioni già viste dell'HTML5, ci sono nuovi tags inseriti fra gli standard, volti ad evitare la diffusione senza sosta dei div, bensì portare un senso razionale all'utilizzo dei contenitori.
I tags alternativi ai div dell'HTML5 sono:

Tag Descrizione Tag Descrizione
<article> Definisce una parte di contenuto nella pagina <aside> Contenuto della sidebar
<details> Definisce una parte di nascosta, visibile dopo un determinato evento <figure> Contenitore di elemento come immagine, grafico o presentazione
<header> Contenuto superiore della pagina <footer> Contenuto inferiore della pagina
<main> Contenitore principale della pagina <nav> Menu di navigazione della pagina
<progress> Indicatore di avanzamento
Es.<progress value="50" max="100"></progress>
50%

Top tags dell'HTML

Altre novità HTML5

Per permettere il funzionamento dei tags HTML5 all'interno dei browser non compatibili (come IE8), si applica un commento condizionale facendo riferimento al supporto di una libreria esterna che crea gli elementi mancanti.

<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->

Top tags dell'HTML

Altre novità HTML5

Per venire incontro all'esigenza delle moderne applicazioni web, orientate molto all'utilizzo di tecnologie lato client (css, javascript, etc...) l'HTML5 ha introdotto i data attributes ovvero attributi "liberi" per ogni tag.

I data attributes sono dunque attributi utilizzabili per qualunque tag html, senza regole ben definite.
Per creare un data attribute, è necessario solamente seguire queste regole:

  • Scegliere un nome per il proprio attributo (es. custom)
  • Inserire prima del nome ideato, la preposizione data-

Ecco dunque un esempio di applicazione di data attribute in un tag span:

<span data-custom="attributo libero">Testo dello span</span>

Si possono inserire infiniti data attributes per ogni tag.


Warning: include(slides/48.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/html/index.php on line 95

Warning: include(): Failed opening 'slides/48.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/html/index.php on line 95

Warning: include(slides/49.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/html/index.php on line 96

Warning: include(): Failed opening 'slides/49.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/html/index.php on line 96

Warning: include(slides/50.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/html/index.php on line 97

Warning: include(): Failed opening 'slides/50.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/html/index.php on line 97

Warning: include(slides/51.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/html/index.php on line 98

Warning: include(): Failed opening 'slides/51.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/html/index.php on line 98

Warning: include(slides/52.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/html/index.php on line 99

Warning: include(): Failed opening 'slides/52.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/html/index.php on line 99

<Thank u!>

Sempre pronto a darti una mano