Il cheat sheet di HTML Essentials: tag, attributi e altro
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 part icolare 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
