I codici html, abbreviazione di “Hyper Text Markup Language”, sono in sintesi il linguaggio di programmazione per creare un sito web.
Il linguaggio html è davvero semplice da padroneggiare, per questo ho pensato di creare questa guida dove ho inserito i comandi html più ricercati e usati.
Codici HTML per WordPress
Di seguito una guida html con l’elenco dei tag html più utilizzati
Paragrafo tag <p>
Un paragrafo è contrassegnato come segue:
- <p>This is normal text</p>
Grassetto tag <b>
Per trasformare il tuo testo in grassetto ci sono due modi:
- <b>this is bold text</b> Strong Test
- <strong>Strong text</strong> Strong Test
WordPress dalle ultime versione ha iniziato a usare di default il tag strong.
Underline tag <u>
- <u>paragraph</u>
Interruzione di linea <br>
Per andare a capo nello stesso paragrafo digitare il seguente codice HTML:
- This text contains<br>a line break.
Spazio Html
Lo spazio in html è:
-
Allineamento testo <text-align>
- <p style=”text-align: center;”>centro</p>
- <p style=”text-align: left;”>sinistra</p>
- <p style=”text-align: right;”>destra</p>
Testo allineato al centro tag <center>
- <center>This text will be center-aligned.</center>
Allineamento al centro
- <p align=”center”><></p>
Colorare una parte del testo tag <span>
- <span style=”color:blue”>blue</span>
Bottoni Html tag <button>
- <button type=”button”>Cliccami!</button>
Font Color tag <font>
- <font color=”red”>This is some text!</font>
- <font color=”#FF0000″>This is some text!</font>
- <font color=”color_name|hex_number|rgb_number“>
Codici colori html:
- Scarica il PDF
Font con sfondo tag <div>
- <div style=”background-color:lightblue”>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Html Intestazioni
- <h1>This is heading 1</h1> Titolo 1
- <h2>This is heading 2</h2> Titolo 2
- <h3>This is heading 3</h3> Titolo 3
- <h4>This is heading 4</h4> Titolo 4
- <h5>This is heading 5</h5> Titolo 5
- <h6>This is heading 6</h6> Titolo 6
Font Size
- <font size=”3″ >This is some text!</font>
Elenco in Html
- <ul>
<li>uno</li>
<li>due</li>
<li>tre</li>
</ul>
Tabella Html
- <table>
<tr><td>Colonna 1</td><td>Colonna 2</td></tr>
<tr><td>Dato 1,1</td><td>Dato 1,2</td></tr>
<tr><td>Dato 2,1</td><td>Dato 2,2</td></tr>
<tr><td>Dato 3,1</td><td>Dato 3,2</td></tr>
</table>
Tag Immagini
- <img src=”foto.jpg”> inserisce una foto
- <img src=”foto.jpg” alt=”Smiley face”> inserisce una foto con testo alternativo
- <img src=”smiley.gif” alt=”Smiley face” height=”100″ width=”100″> inserisce una foto con testo alternativo e dimensione
Inserire un link in html
- <a href=“https://www.marketingforleader.it“>Marketing For Leader</a>.
I link con apertura in un’altra pagina su WordPress per sicurezza, verrano modificati in automatico in questo modo:
- <a href=”https://www.marketingforleader.it” target=”_blank” rel=”noopener”>Marketing For Leader</a>
L’attributo “noopener” assicura che la pagina che stai aprendo in una nuova scheda non possa prendere il controllo della pagina originale. È un tag molto importante sia per le prestazioni che per la sicurezza.
Leggi anche questa guida dove ti spiego come aggiungere il codice html noreferrer e nofollow ad un link esterno.
Conclusione
In conclusione in questa breve guida ho fatto una serie di esempi pratici da copiare e incollare nei tuoi articolo di WordPress.
Tuttavia non ti ho detto un ultima cosa, alcuni tag hanno bisogno del suo relativo tag di chiusura per esempio <strong> ha bisogno del tag di chiusura </strong> invece il codice html che serve a mandare a capo il testo <br> non ha bisogno del relativo tag di chiusura.
Infine ci sono molti altri codici html da poter utilizzare, ma per adesso ti consiglio di provare questi che sono già parecchi ed è per questo che ho deciso di raggrupparli in questa semplice guida, cosi da poterli consultare velocemente.