Il cheat sheet di HTML Essentials: tag, attributi e altro

Uno screenshot del codice HTML

La creazione di pagine Web inizia con HTML. Abbellirli e renderli interattivi arriva più tardi. Ma per iniziare a creare siti Web statici funzionali, è necessario comprendere l'HTML. (Desideri una rapida introduzione a questo linguaggio di markup? Leggi le nostre FAQ HTML .)

Come parte dell'apprendimento della lingua, c'è un lungo elenco di elementi che devi aggiungere al tuo vocabolario HTML. E questo compito può sembrare inizialmente scoraggiante, motivo per cui abbiamo escogitato il seguente cheat sheet. Ti dà un modo semplice per scoprire / comprendere / richiamare elementi HTML ogni volta che ne hai bisogno.

Il foglio informativo include tag e attributi per strutturare pagine Web, formattare testo, aggiungere moduli, immagini, elenchi, collegamenti e tabelle. Include anche tag introdotti nei codici HTML5 e HTML per caratteri speciali di uso comune.

DOWNLOAD GRATUITO: questo cheat sheet è disponibile come PDF scaricabile dal nostro partner di distribuzione, TradePub. Dovrai compilare un breve modulo per accedervi solo per la prima volta. Scarica la scheda tecnica di HTML Essentials .

Il cheat sheet di HTML Essentials

scorciatoia Azione
Tag di base
<html> … </html> Il primo e l'ultimo tag di un documento HTML. Tutti gli altri tag si trovano tra questi tag di apertura e chiusura.
<head> … </head> Specifica la raccolta di metadati per il documento.
<title> … </title> Descrive il titolo della pagina e appare nella barra del titolo del browser.
<body> … </body> Include tutto il contenuto che verrà visualizzato sulla pagina Web.
Informazioni sul documento
<Base /> Menziona l'URL di base e tutti i collegamenti relativi al documento.
<Meta /> Per ulteriori informazioni sulla pagina come autore, data di pubblicazione, ecc.
<Link /> Collegamenti ad elementi esterni come fogli di stile.
<stile> … </stile> Contiene informazioni sullo stile del documento come CSS (Cascading Style Sheets).
<script> … </script> Contiene collegamenti a script esterni.
Formattazione del testo
<strong> … </strong> OR
<b> … </b>
Rende il testo in grassetto.
<em> … </em> Corsivo il testo e lo rende grassetto.
<i> … </i> Testo in corsivo ma non in grassetto.
<strike> … </strike> Testo barrato.
<cite> … </cite> Cita un autore di una citazione.
<del> … </del> Etichetta una porzione eliminata di un testo.
<ins> … </ins> Mostra una sezione che è stata inserita nel contenuto.
<blockquote> …
</ Blockquote>
Per visualizzare le virgolette. Spesso usato con il tag <cite>.
<q> … </q> Per preventivi più brevi.
<abbr> … </abbr> Per abbreviazioni e forme complete.
<indirizzo> … </indirizzo> Specifica i dettagli di contatto.
<dfn> … </dfn> Per le definizioni.
<code> … </code> Per frammenti di codice.
<sub> … </sub> Per scrivere abbonamenti
<sup> … </sup> Per scrivere apici.
<small> … </small> Per ridurre la dimensione del testo e contrassegnare le informazioni ridondanti in HTML5.
Struttura del documento
<h1..h6> … </h1..h6> Diversi livelli di titoli. H1 è il più grande e H6 è il più piccolo.
<div> … </div> Per dividere il contenuto in blocchi.
<span> … </span> Include elementi incorporati, come un'immagine, un'icona, un'emoticon, senza rovinare la formattazione della pagina.
<p> … </p> Contiene testo semplice.
<br/> Crea una nuova linea.
<Hr /> Disegna una barra orizzontale per mostrare la fine della sezione.
elenchi
<ol> … </ol> Per l'elenco ordinato degli articoli.
<ul> … </ul> Per un elenco non ordinato di elementi.
<li> … </li> Per singoli elementi in un elenco.
<dl> … </dl> Elenco di elementi con definizioni.
<dt> … </dt> La definizione di un singolo termine in linea con il contenuto del corpo.
<dd> … </dd> La descrizione per il termine definito.
link
<a href=enganobbero> … </a> Tag di ancoraggio per collegamenti ipertestuali.
<a href=restimailto:*> … </a> Tag per il collegamento a indirizzi e-mail.
<a href=ndotel://###-###^> … </a> Etichetta di ancoraggio per elencare i numeri di contatto.
<a name=ndoname’> … </a> Tag di ancoraggio per il collegamento a un'altra parte della stessa pagina.
<a href=ndo#name’> … </a> Passa a una sezione div della pagina Web. (Variazione del tag sopra)
immagini
<img /> Per visualizzare i file di immagine.
Attributi per il tag <img>
src =”url” Collegamento al percorso di origine dell'immagine.
alt =”text” Il testo visualizzato quando si passa il mouse sopra l'immagine.
altezza = "" Altezza dell'immagine in pixel o percentuali.
larghezza = "" Larghezza dell'immagine in pixel o percentuali.
align = "" Allineamento relativo dell'immagine sulla pagina.
bordo = "" Spessore del bordo dell'immagine.
<map> … </map> Link a una mappa cliccabile.
<nome mappa = ""> …
</ Map>
Nome dell'immagine della mappa.
<area /> L'area dell'immagine di una mappa immagine.
Attributi per il tag <area>
forma = "" Forma dell'area dell'immagine.
coords = "” Coordinate dell'area dell'immagine della mappa.
Le forme
<form> … </form> Il tag principale per un modulo HTML.
Attributi per il tag <form>
action =”url” L'URL a cui vengono inviati i dati del modulo.
metodo = "" Specifica il protocollo di invio del modulo (POST o GET).
enctype = "” Lo schema di codifica dei dati per gli invii POST.
completamento automatico Specifica se il completamento automatico del modulo è attivato o disattivato.
novalidate Specifica se il modulo deve essere convalidato prima dell'invio.
Accept-set di caratteri Specifica la codifica dei caratteri per l'invio dei moduli.
bersaglio Mostra dove verrà visualizzata la risposta di invio del modulo.
<fieldset> … </fieldset> Raggruppa elementi correlati nel modulo /
<label> … </label> Specifica ciò che l'utente deve inserire in ciascun campo del modulo.
<legend> … </legend> Una didascalia per l'elemento fieldset.
<input /> Specifica quale tipo di input prendere dall'utente.
Attributi per il tag <input>
digitare =”” Determina il tipo di input (testo, date, password).
name =”” Specifica il nome del campo di input.
value =”” Specifica il valore nel campo di input.
size =”” Imposta il numero di caratteri per il campo di input.
maxlength =”” Imposta il limite di caratteri di input consentiti.
necessario Rende obbligatorio un campo di input.
width =”” Imposta la larghezza del campo di input in pixel.
height =”” Imposta l'altezza del campo di input in pixel.
segnaposto =”” Descrive il valore del campo previsto.
pattern =”” Specifica un'espressione regolare, che può essere utilizzata per cercare motivi nel testo dell'utente.
min =”” Il valore minimo consentito per un elemento di input.
max =”” Il valore massimo consentito per un elemento di input.
Disabilitato Disabilita l'elemento di input.
<textarea> … </textarea> Per acquisire stringhe di dati più lunghe dall'utente.
<select> … </select> Specifica un elenco di opzioni tra le quali l'utente può scegliere.
Attributi per il tag <select>
name =”” Specifica il nome per un elenco a discesa.
size =”” Numero di opzioni fornite all'utente.
multiplo Imposta se l'utente può scegliere più opzioni dall'elenco.
necessario Specifica se la scelta di un'opzione / e è necessaria per l'invio del modulo.
messa a fuoco automatica Specifica che un elenco a discesa viene automaticamente messo a fuoco dopo il caricamento di una pagina.
<option> … </option> Definisce gli elementi in un elenco a discesa.
value =”” Visualizza il testo per una determinata opzione.
selezionato Imposta l'opzione predefinita che viene visualizzata.
<button> … </button> Tag per la creazione di un pulsante per l'invio del modulo.
Oggetti e iFrame
<oggetto> … </oggetto> Descrive il tipo di file incorporato.
Attributi per il tag <object>
height =”” L'altezza dell'oggetto.
width =”” La larghezza dell'oggetto.
digitare =”” Il tipo di supporto contenuto nell'oggetto.
<iframe> … </iframe> Un frame incorporato per incorporare informazioni esterne.
name =”” Il nome dell'iFrame.
src =”” L'URL di origine per il contenuto all'interno della cornice.
srcdoc =”” Il contenuto HTML all'interno della cornice.
height =”” L'altezza dell'iFrame.
larghezza = "" La larghezza dell'iFrame.
<param /> Aggiunge parametri aggiuntivi per personalizzare iFrame.
<embed> … </embed> Incorpora applicazione o plugin esterni.
Attributi per il tag <object>
altezza = "" Imposta l'altezza dell'incorporamento.
larghezza = "“ Imposta la larghezza dell'incorporamento.
digitare =”” Il tipo o il formato dell'incorporamento.
src =”” Il percorso di origine del file incorporato.
tabelle
<table> … </table> Definisce tutto il contenuto per una tabella.
<caption> …
</ Caption>
Una descrizione della tabella.
<thead> … </thead> Intestazioni per ogni colonna nella tabella.
<tbody> … </tbody> Definisce i dati del corpo per la tabella.
<tfoot> … </tfoot> Descrive il contenuto per il piè di pagina della tabella.
<tr> … </tr> Contenuto per una singola riga.
<th> … </th> I dati in un singolo elemento di intestazione.
<td> … </td> Contenuto in una singola cella di tabella.
<colgroup> …
</ Colgroup>
Raggruppa le colonne per la formattazione.
<Col> Una singola colonna di informazioni.
HTML5 nuovi tag
<header> … </header> Specifica l'intestazione della pagina Web.
<footer> … </footer> Specifica il piè di pagina della pagina Web.
<Principale> … </ main> Contrassegna il contenuto principale della pagina Web.
<Article> … </ article> Specifica un articolo.
<side> … </aside> Specifica il contenuto della barra laterale di una pagina.
<Section> … </ section> Specifica una sezione particolare nella pagina Web.
<dettagli> … </dettagli> Per descrivere ulteriori informazioni.
<summary> … </summary> Utilizzato come intestazione per il tag sopra. È sempre visibile all'utente.
<Dialogo> … </ finestra> Crea una finestra di dialogo.
<Figure> … </ figure> Utilizzato per includere grafici e cifre.
<figcaption> … </figcaption> Descrive un elemento <figure>.
<Mark> … </ mark> Evidenzia una parte specifica del testo.
<Nav> … </ nav> Insieme di collegamenti di navigazione su una pagina Web.
<Menuitem> … </ menuitem> Un elemento particolare da un elenco o un menu.
<Meter> … </ metro> Misura i dati entro un determinato intervallo.
<Progredire> … </ progress> Posiziona una barra di avanzamento e tiene traccia dell'avanzamento.
<Rp> … </ rp> Visualizza il testo che non supporta le annotazioni di Ruby.
<Rt> … </ rt> Visualizza i dettagli dei caratteri tipografici dell'Asia orientale.
<Ruby> … </ ruby> Un'annotazione Ruby per la tipografia dell'Asia orientale.
<Time> … </ time> Identifica ora e data.
<WBR> Una interruzione di riga all'interno del contenuto.
¹ Oggetti personaggio HTML5
& # 34; O
& quot;
Virgolette
& # 60; O
& lt;
Minore di segno (<)
& # 62; O
& gt;
Maggiore del segno (>)
& # 160; O
& nbsp;
Spazio senza interruzioni
& # 169; O
&copia ;
Simbolo del copyright
& # 8482; O
& ucirc;
Simbolo del marchio
& # 64; O
& Uuml;
Simbolo "at" (@)
& # 38; O
& amp;
Simbolo e commerciale (&)
& # 8226; O
& ouml;
Piccolo proiettile
¹ Ignora lo spazio prima del punto e virgola durante la digitazione del carattere HTML.

Crea un sito Web per un'esperienza pratica

Dopo aver compreso le basi del codice HTML e una conoscenza pratica di CSS e JavaScript, prova a creare un sito Web . Inoltre, assicurati di salvare il nostro cheat sheet delle proprietà CSS3 e il cheat sheet JavaScript per un uso futuro!

Leggi l'articolo completo: il cheat sheet di HTML Essentials: tag, attributi e altro