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

La creazione di pagine Web inizia con HTML. Abbellirli e renderli interattivi viene dopo. Ma per iniziare a creare siti Web statici funzionali, è necessaria una conoscenza dell'HTML. (Vuoi una rapida introduzione a questo linguaggio di markup? Leggi il nostro Domande frequenti sull'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 scoraggiante all'inizio, motivo per cui abbiamo creato il seguente cheat sheet. Ti offre un modo semplice per scoprire/capire/richiamare elementi HTML ogni volta che ne hai bisogno.

Il cheat sheet copre tag e attributi per strutturare le pagine Web, formattare il testo, aggiungere moduli, immagini, elenchi, collegamenti e tabelle. Include anche i tag che sono stati introdotti nei codici HTML5 e HTML per i caratteri speciali di uso comune.

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

Il cheat sheet di HTML Essentials.

Il cheat sheet di HTML Essentials

... ... ... ... ...

...

scorciatoia	Azione
Tag di base
...	Il primo e l'ultimo tag di un documento HTML. Tutti gli altri tag si trovano tra questi tag di apertura e chiusura.
...	Specifica la raccolta di metadati per il documento.
	Descrive il titolo della pagina e viene visualizzato nella barra del titolo del browser.
...	Include tutti i contenuti che verranno visualizzati nella pagina web.
Informazioni sul documento
Menziona l'URL di base e tutti i relativi link al documento.
Per ulteriori informazioni sulla pagina come autore, data di pubblicazione, ecc.
Collegamenti a elementi esterni come fogli di stile.
	Contiene informazioni sullo stile del documento come CSS (Cascading Style Sheets).
	Contiene collegamenti a script esterni.
Formattazione del testo
... O ...	Rende il testo in grassetto.
...	Mette in corsivo il testo e lo rende in grassetto.
...	Scrive il testo in corsivo ma non lo rende in grassetto.
...	Testo barrato.
...	Cita un autore di una citazione.
...	Etichetta una parte eliminata di un testo.
...	Mostra una sezione che è stata inserita nel contenuto.
...	Per la visualizzazione delle quotazioni. Spesso utilizzato con il etichetta.
...	Per preventivi più brevi.
...	Per abbreviazioni e forme complete.
...	Specifica i dettagli di contatto.
...	Per le definizioni.
...	Per frammenti di codice.
...	Per scrivere i pedici
...	Per scrivere apici.
...	Per ridurre le dimensioni del testo e contrassegnare le informazioni ridondanti in HTML5.
Struttura del documento
...	Diversi livelli di titoli. H1 è il più grande e H6 è il più piccolo.
...	Per dividere il contenuto in blocchi.
...	Include elementi in linea, come un'immagine, un'icona, un'emoticon, senza rovinare la formattazione della pagina.
...	Contiene testo normale.
	Crea una nuova linea.
	Disegna una barra orizzontale per mostrare la fine della sezione.
Elenchi
...	Per l'elenco ordinato degli articoli.
...	Per un elenco di articoli non ordinato.
...	Per singoli elementi in un elenco.
...	Elenco di elementi con definizioni.
...	La definizione di un singolo termine in linea con il contenuto del corpo.
...	La descrizione del termine definito.
Link
...	Tag di ancoraggio per i collegamenti ipertestuali.
...	Tag per il collegamento a indirizzi e-mail.
...	Etichetta di ancoraggio per elencare i numeri di contatto.
...	Tag di ancoraggio per il collegamento a un'altra parte della stessa pagina.
...	Passa a una sezione div della pagina web. (Variazione del tag sopra)
immagini
	Per visualizzare i file di immagine.
Attributi per il etichetta
src=”url”	Collegamento al percorso di origine dell'immagine.
alt=”testo”	Il testo visualizzato quando si passa il mouse sull'immagine.
altezza=” ”	Altezza dell'immagine in pixel o percentuali.
larghezza=” ”	Larghezza dell'immagine in pixel o in percentuale.
allinea=” ”	Allineamento relativo dell'immagine sulla pagina.
bordo=” ”	Spessore del bordo dell'immagine.
	Link a una mappa cliccabile.
	Nome dell'immagine della mappa.
L'area dell'immagine di una mappa immagine.
Attributi per il etichetta
forma=” "	Forma dell'area dell'immagine.
coordinate=” ”	Coordinate dell'area dell'immagine della mappa.
Forme
...	Il tag padre per un modulo HTML.
Attributi per il etichetta
azione=”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.
non convalidare	Specifica se il modulo deve essere convalidato prima dell'invio.
accetta-charsets	Specifica la codifica dei caratteri per l'invio di moduli.
obbiettivo	Mostra dove verrà visualizzata la risposta all'invio del modulo.
...	Raggruppa elementi correlati nel modulo/
...	Specifica cosa l'utente deve inserire in ogni campo del modulo.
...	Una didascalia per l'elemento fieldset.
Specifica il tipo di input da ricevere dall'utente.
Attributi per il etichetta
tipo=””	Determina il tipo di input (testo, date, password).
nome=””	Specifica il nome del campo di input.
valore=””	Specifica il valore nel campo di input.
dimensione = ""	Imposta il numero di caratteri per il campo di immissione.
lunghezza massima=””	Imposta il limite dei caratteri di input consentiti.
necessario	Rende obbligatorio un campo di immissione.
larghezza=””	Imposta la larghezza del campo di input in pixel.
altezza=””	Imposta l'altezza del campo di input in pixel.
segnaposto=””	Descrive il valore del campo previsto.
modello=””	Specifica un'espressione regolare, che può essere utilizzata per cercare modelli nel testo dell'utente.
min=””	Il valore minimo consentito per un elemento di input.
massimo=””	Il valore massimo consentito per un elemento di input.
Disabilitato	Disabilita l'elemento di input.
...	Per acquisire stringhe di dati più lunghe dall'utente.
...	Specifica un elenco di opzioni tra cui l'utente può scegliere.
Attributi per il etichetta
nome=””	Specifica il nome per un elenco a discesa.
dimensione = ""	Numero di opzioni fornite all'utente.
multiplo	Imposta se l'utente può scegliere più opzioni dall'elenco.
necessario	Specifica se la scelta di una o più opzioni è necessaria per l'invio del modulo.
messa a fuoco automatica	Specifica che un elenco a discesa viene automaticamente evidenziato dopo il caricamento di una pagina.
...	Definisce gli elementi in un elenco a discesa.
valore=””	Visualizza il testo per qualsiasi opzione data.
selezionato	Imposta l'opzione predefinita visualizzata.
...	Tag per la creazione di un pulsante per l'invio del modulo.
Oggetti e iFrame
	Descrive il tipo di file incorporato.
Attributi per il
altezza=””	L'altezza dell'oggetto.
larghezza=””	La larghezza dell'oggetto.
tipo=””	Il tipo di supporto contenuto nell'oggetto.
	Un frame in linea per incorporare informazioni esterne.
nome=””	Il nome dell'iFrame.
src=””	L'URL di origine per il contenuto all'interno del frame.
srcdoc=””	Il contenuto HTML all'interno del frame.
altezza=””	L'altezza dell'iFrame.
larghezza=” ”	La larghezza dell'iFrame.
Aggiunge parametri extra per personalizzare l'iFrame.
...	Incorpora un'applicazione esterna o un plug-in.
Attributi per il
altezza=” “	Imposta l'altezza dell'incorporamento.
larghezza=” “	Imposta la larghezza dell'incorporamento.
tipo=””	Il tipo o il formato dell'incorporamento.
src=””	Il percorso di origine del file incorporato.
Tabelle
...	Definisce tutto il contenuto di una tabella.
Una descrizione della tabella.
Intestazioni per ogni colonna della tabella.
Definisce i dati del corpo per la tabella.
Descrive il contenuto del piè di pagina della tabella.
Contenuto per una singola riga.
	...	I dati in una singola voce di intestazione.
	...	Contenuto all'interno di una singola cella di tabella.
Raggruppa le colonne per la formattazione.
Una singola colonna di informazioni.
Nuovi tag HTML5
...	Specifica l'intestazione della pagina web.
	Specifica il piè di pagina della pagina web.
...	Contrassegna il contenuto principale della pagina web.
...	Specifica un articolo.
	Specifica il contenuto della barra laterale di una pagina.
...	Specifica una particolare sezione nella pagina web.
...	Per descrivere ulteriori informazioni.
...	Usato come intestazione per il tag sopra. È sempre visibile all'utente.
...	Crea una finestra di dialogo.
...	Utilizzato per includere grafici e figure.
	Descrive un elemento.
...	Evidenzia una parte specifica del testo.
	Insieme di collegamenti di navigazione su una pagina web.
...	Un particolare elemento di un elenco o di un menu.
...	Misura i dati all'interno di un determinato intervallo.
...	Posiziona una barra di avanzamento e tiene traccia dei progressi.
...	Visualizza il testo che non supporta le annotazioni Ruby.
...	Visualizza i dettagli dei caratteri tipografici dell'Asia orientale.
...	Un'annotazione Ruby per la tipografia dell'Asia orientale.
...	Identifica ora e data.
Un'interruzione di riga all'interno del contenuto.
¹Oggetti carattere HTML5
" O "	Virgolette
< OR &lt ;	Segno minore di (
> O >	Segno di maggiore di (>)
O	Spazio infrangibile
© OR &copia ;	Simbolo del copyright
™ O &ucirc ;	Simbolo del marchio
@ O &Uuml ;	simbolo "chiocciola" (@)
& O &	Simbolo commerciale (&)
• O &ouml ;	Piccolo proiettile
¹Ignora lo spazio prima del punto e virgola durante la digitazione del carattere HTML.

Costruisci un sito web per un'esperienza pratica

Una volta capito le basi del codice HTML e avere una conoscenza pratica di CSS e JavaScript, prova a creare un sito web Come creare un sito Web: per principiantiOggi ti guiderò attraverso il processo di creazione di un sito Web completo da zero. Non preoccuparti se sembra difficile. Ti guiderò in ogni fase del percorso. Per saperne di più . Inoltre, assicurati di salvare il nostro Cheat sheet delle proprietà CSS3 Il cheat sheet delle proprietà essenziali di CSS3Padroneggia la sintassi CSS essenziale con il nostro cheat sheet delle proprietà CSS3. Per saperne di più e Cheat sheet JavaScript Il Cheat Sheet di JavaScript definitivoOttieni un rapido aggiornamento sugli elementi JavaScript con questo cheat sheet. Per saperne di più per uso futuro!