HTML sta per Hyper Text Mark-up Language
Usato per: creare pagine web (documenti) che vengono visualizzati sul World Wide Web (siti web). Le pagine possono essere un mix di testo, immagini, video e altri elementi. Può essere creato con: notepad, TextPad o qualsiasi editor di testo.
Salvato come: .html files
HTML Cheat Sheet
Qui stiamo condividendo con te il completo HTML Cheat Sheet:
Struttura di base
<!DOCTYPE html><html> <head> <title></title> </head> <body> body tags and main content </body></html>
I principali elementi in HTML sono i tag. I tag strutturano e presentano i dati in diverse forme.
Heading
<h1>Heading 1</h1><h2>Heading 2 </h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6 </h6>
Paragrafo
Span
Il tag Span è usato per lo stile degli elementi in linea.
<span style = "color:green”> Address </span>
– stampa la parola ‘Indirizzo’ nel colore specificato (qui verde). L’attributo style è usato per dare stile agli elementi HTML.
Caratteri
Formattazione
Body
<body> – il contenuto principale sta nel corpo. Dentro <body> ci possono essere molte sezioni. Attributi –
Metadati
<meta> tag è una parte del <head> e descrive informazioni sui dati. L’uso più comune dei metadati è quello dei motori di ricerca per le parole chiave. <meta charset = “UTF-8”> – set di caratteri più comune Attributi –
- name = “” – può essere un nome come parola chiave, autore, descrizione ecc…
- content = “” – il valore corrispondente ai nomi di cui sopra
Esempio – <meta name=”keywords” content=”What is HTML, Come imparare l’HTML”>
Sezioni e divisioni
- <div></div> nuova sezione; i tag div annidati sono molto comuni quando sono richieste più sottosezioni
- <hr> – linea orizzontale
<hr> ha i seguenti attributi –
- <hr size = “” width = “”/width = “%” color = “” align = “left/center/right”>
- size – spessore della linea in pixel
- width – in pixel o in percentuale (uno qualsiasi)
- color – colore in valore hex
- align – alignment; sinistra, destra o centro
Tabelle
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr></table>
- <table> – crea una tabella,
- <tr> – crea una riga,
- <td> – crea una colonna,
- <th> – crea colonne di intestazione
<table> attributi –
<td> attributi
Esempio –
<colgroup> <col span="1" style="background-color:green"> <col style="background-color:blue"></colgroup>
La prima colonna sarà evidenziata in verde, mentre le altre colonne saranno evidenziate in blu.
Forms (HTML Cheat Sheet)
La maggior parte del contenuto dinamico come gli input dell’utente, l’invio di una pagina, il riempimento di un modulo avvengono dentro questo tag. È un gruppo di input correlati.
<form> <input> <select><option></option></select> <textarea></form>
<form> attributi del tag –
<input> attributi del tag –
< seleziona></select> – Selezionare le opzioni dall’elenco a discesa <select> tag Attributi:
<option></option> – le singole voci dell’elenco a discesa <option> tag Attributi:
- value=”” – Valore dell’opzione selezionata o valore predefinito impostato
- <textarea> molto testo come descrizione </textarea> – Grande area per gli input di testo
<textarea> Attributi dei tag:
iframe
- <iframe src=””></iframe> – incorpora un altro documento nel documento corrente (pagina) in un frame.
- Attributo “src” – posizione del documento da incorporare
Links
Links HTML, chiamati anche collegamenti ipertestuali sono definiti dal tag ‘a’ – <a></a> Attributi –
- href = “” – l’url da visitare quando il link viene cliccato
- target = “” – specifica dove aprire il link – _blank (nuova scheda/finestra), _self (stessa finestra/tab), _parent (nel frame padre), framename – apre in un frame particolare.
- title = “” – dà informazioni sull’elemento
- id = “” – per creare segnalibri nella pagina che possono essere usati come valore nell’attributo href.
Esempi –
Styles
Per lo styling, ci sono molti attributi usati con vari tag. Gli attributi sono –
<style> text-align= "” – align text; left, right, center background-color = "” – background color of the element color=”” – for color of texts font-family = "” – for various fonts font-size = "” size of the font border = "” – border thickness and color for a table</style>
Questi elementi di stile sono messi insieme in un CSS.
Liste
Ci sono due tipi di liste – ordinate e non ordinate. <ol></ol> – lista ordinata Attributi –
- type=”” – la numerazione della lista – A, a, I, 1, i
- start = “” – valore iniziale
- <ul></ul> – elenco non ordinato
Attributi –
- tipo = “” – tipo di proiettile – quadrato, cerchio, disco
- <li></li> – valore individuale nella lista
Attributi –
- <value> = “” – valore dell’elemento della lista
- <type>=”” – tipo dell’elemento della lista
Immagini
<img> – mostra l’immagine al caricamento della pagina Attributi –
- src =”sourceofimage” – fonte dell’immagine; url o posizione del file; obbligatorio
- alt = “alternate text” – testo alternativo; obbligatorio
- align = “left/right/center” – allineamento rispetto agli elementi circostanti (testo)
- width = “” – in pixel o percentuale
- height = “” – in pixel o percentuale
- border = “” – spessore del bordo in pixel
- hspace = “” – spazio in pixel ai lati dell’immagine
- vspace = “” – spazio in pixel sopra e sotto l’immagine
HTML5 Tags
- <aside> – contenuto che non fa parte di nessun elemento, ma deve essere messo accanto al contenuto principale
- <figura> – qualsiasi illustrazione come foto, diagrammi, elenco di codici e così via.
- <figcaption> – didascalia per l’elemento <figura>
- <header> – Intestazione di una sezione (simile a quella in MS word), l’intestazione può avere altri contenuti come link di navigazione, moduli ecc….
- <footer> – il contenuto in fondo alla pagina/sezione es. informazioni sul copyright, termini e condizioni ecc…
- < main> – il tag è un indicatore di dove inizia il contenuto principale della pagina
- <details> – box con funzionalità expand/collapse per consentire più spazio per il testo
- <summary> – riassunto del contenuto del particolare elemento. Può essere una descrizione, una didascalia ecc…
- <mark> – evidenzia una parte di testo per dare risalto
- <nav> – sezione con link di navigazione alle sezioni di una pagina o ad altre pagine
- <section> – una parte particolare (gruppo) nella pagina, per esempio, circa noi o la sezione dei testimonial di una pagina web
- <time> – il tempo menzionato in formato leggibile dalla macchina. Può avere data, ora, offset di fuso orario, durata ecc.
- <datalist> – simile al completamento automatico; opzioni predefinite definite per i controlli di input
- <keygen> – generatore di coppie di chiavi (pubbliche e private) per i moduli. La chiave pubblica viene inviata al server quando il modulo viene inviato, mentre la chiave privata è memorizzata nel keystore locale
- <output> – risultato di eventuali calcoli
- <progress> – indica il progresso dell’attività attraverso una barra di avanzamento
- <embed> – incorpora i media da una fonte esterna
- <source> – fonte per audio o video
- <audio> – per contenuti musicali o audio
- <video> – per presentare un film o un video
Scaricare HTML Cheat Sheet PDF Da qui.
Le persone stanno anche leggendo:
- I migliori corsi di HTML
- Le migliori certificazioni HTML
- Le migliori domande per un colloquio su HTML
- Le migliori domande per un colloquio su HTML5
- Come diventare uno sviluppatore web?
- Il miglior IDE di sviluppo web
- I migliori framework di sviluppo web
- Che cos’è l’architettura di sviluppo web?
- CSS vs CSS2
- Le migliori alternative di Angular