Introduzione
Oggi, per fortuna, non è più necessario essere esperti di codice o programmazione per creare email di impatto visivo e già ottimizzate per mobile. Esistono strumenti, come l’editor drag & drop BEE, che consentono di ottenere risultati eccellenti senza scrivere nemmeno una riga di codice.Eppure una conoscenza anche minima di HTML – argomento di norma delegato agli “addetti ai lavori” – è raccomandabile a chiunque si occupi di Email Marketing.
Da dove iniziare allora? Da una veloce panoramica sui concetti fondamentali che ruotano attorno al codice HTML e CSS applicato al mondo dell’Email Marketing.
Cosa sono HTML e CSS
L’HTML (HyperText Markup Language) è un linguaggio a markup. Un markup o tag è un segnaposto che definisce o il tipo di formattazione del contenuto (tabella, titolo, testo, ecc.) o la presenza di un oggetto (immagine, audio, video) nella pagina. Per definire un tag si usa la sintassi del tipo <nome del tag>.In questo esempio puoi vedere l’output su browser (il bottone con link) e il codice HTML che gli sottostà.
Anche il CSS (Cascading Style Sheet) è un linguaggio di formattazione. Il suo sviluppo ha permesso non solo di separare il contenuto di una pagina dalla struttura, ma anche di scrivere un codice più pulito e di definire molte più proprietà di quelle che il solo HTML può normalmente permettere.
Rispetto all’immagine precedente, nota come cambia il bottone qui sotto una volta che all’HTML viene aggiunto un foglio di stile CSS:
L’unione di HTML e CSS ha creato uno strumento estremamente potente: se da un lato l’HTML definisce la struttura in cui i contenuti si devono disporre, il CSS li modella nella visualizzazione via browser o via client di posta.
Come funziona l’HTML
Essendo uno standard, ogni pagina HTML per essere valida deve rispettare una struttura ben definita:- Document Type Definition o DTD Definisce il paradigma di regole e di tag utilizzati. Dal 1991 ad oggi sono state sviluppate diverse versioni di HTML, ognuna con il proprio DTD. È necessario dichiarare esplicitamente l’ambito in cui si lavora
- Tag <html> Indica al browser che tutto ciò che è contenuto al suo interno è scritto in linguaggio HTML
- Tag <head> Contiene il corpo del messaggio (le tabelle, i testi, le immagini, i link, ecc.)
- Tag <body> Qui si definiscono le informazioni di servizio essenziali per la corretta visualizzazione della pagina.
Il discorso sul tag HTML merita qualche parola in più. Supponiamo di voler definire un paragrafo con del testo. Dobbiamo usare il tag <p> e nel codice della pagina dobbiamo dichiarare dove inizia il paragrafo, scrivendo appunto <p>. Dopo di che possiamo inserire il testo e alla fine dobbiamo dichiarare la chiusura del paragrafo con </p>. Ecco come apparirà: <p>[Testo che compone il paragrafo]</p>.
Oltre al tag <p> richiedono la chiusura anche:
- <strong> per i bold
- <em> per definire un testo enfatizzato
- <a> per i link
Per aumentare le possibilità modellare la struttura del contenuto e la formattazione del contenuto di una pagina web è possibile definire per i tag degli attributi che ne specificano le proprietà. Ad esempio, per le immagini si possono stabilire altezza e larghezza; per le tabelle, per le righe che le compongono e per le celle di una riga si può definire il colore dello sfondo o l’allineamento del testo, oppure per un testo si può definire il font utilizzato, le dimensioni e il colore. E qui arriviamo al CSS.
Come funziona il CSS
Abbiamo detto che il CSS definisce i fogli di stile, ovvero proprietà aggiuntive rispetto a quelle determinate dall’HTML. I principali modi per applicare i CSS a un documento sono tre:- Esternamente
- Internamente
- Inline
- Applicare un CSS internamente significa definirlo nella head, con i tag <style> del documento HTML
- Inline significa applicarlo direttamente sul tag
Scarica il contenuto completo
Compila il form per ricevere il contenuto direttamente nella tua inbox.