In questa guida troverai i concetti fondamentali che ruotano attorno al codice CSS e HTML.
HTML e CSS: cosa sono
L’acronimo HTML sta per HyperText Markup Language. Si tratta di un codice che non può essere considerato un linguaggio di programmazione ma un linguaggio di markup.
Per linguaggio di Markup si vuole specificare che il codice HTML viene utilizzato per identificare in una serie di modi gli elementi specifici di una pagina web. Quindi il codice HTML non può essere definito linguaggio di programmazione in quanto manca di elementi utili alla programmazione stessa. Il compito di un vero linguaggio di programmazione è quello di far evolvere il sistema binario in una serie di azioni, mentre lo schema di markup non ha logica, di contro riesce a definire in maniera puntuale gli elementi di una pagina.
Infatti, nel codice HTML sono presenti dei tag, dei segnaposto che servono per identificare il tipo di formattazione del contenuto che può essere una tabella, testo, titolo o la presenza di un oggetto nella pagina, come un’immagine o un audio. Il tag viene solitamente definito utilizzando la sintassi di tipo <nome del tag>.
CSS è l’acronimo di Cascading Style Sheet, un linguaggio di formattazione che non solo consente di separare il contenuto di una pagina dalla struttura, ma anche di definire proprietà che fino a quel momento solo il codice HTML permetteva di fare.
HTML e CSS sono degli strumenti molto potenti se usati contemporaneamente; se da un lato, HTML definisce la disposizione dei contenuti nella struttura, dall’altro CSS ne modella la visualizzazione nel browser o nelle email.
Indice
Come funziona HTML
HTML è uno dei codici più utilizzati e, come già detto, non può essere definito un vero e proprio linguaggio di programmazione, bensì un codice di formattazione. Non sono presenti elementi propri della logica di programmazione quali cicli, variabili, ecc… Di conseguenza, essendo uno standard, ogni documento deve rispettare una struttura definita, ad esempio:
- DTD (Document Type Definition), definisce il paradigma di regole e i tag utilizzati.
- Tag <html> indica tutto ciò che è contenuto nel browser.
- Tag <head>, qui vengono definite le informazioni di servizio che sono essenziali per una visualizzazione corretta della pagina.
- Tag <body>, contiene il corpo del messaggio.
L’idea di base è che se si apre un tag bisogna poi chiuderlo una volta inserito il contenuto. Ad esempio, supponiamo di voler inserire un paragrafo nel testo. Bisogna aprire il tag <p>, inserire il contenuto e infine dichiarare la chiusura con il tag </p>.
Esistono però dei tag che non necessitano di chiusura. Ad esempio per inserire un’immagine si usa <img> o il tag <br> che serve per inserire una linea vuota.
Definendo i tag degli attributi che specificano quindi le proprietà del contenuto, è possibile aumentare la possibilità della formattazione dello stesso in una pagina web.
Come funziona CSS
CSS definisce invece i fogli di stile, proprietà aggiuntive che non sono presenti in HTML. Sono principalmente tre i metodi di applicazione di CSS ad un documento:
- Esternamente – il foglio che contiene le informazioni del CSS è un file esterno, che viene allegato con un tag <script>
- Internamente – tutte le istruzioni CSS vengono inserite all’interno della <head> del sito, con appositi tag <STYLE></STYLE>
- Inline – le istruzioni CSS vengono inserite come valori dell’attributo STYLE presente all’interno di uno specifico tag. In questo caso, la regola CSS varrà esclusivamente per il tag nel quale è stato inserito ed eventualmente per i tag contenuti all’interno del medesimo tag. Ad esempio, provate ad immaginare una serie di scatole, ciascuna contenuta all’interno di una scatola più grande. Una regola CSS può essere applicata INLINE alla scatola più grande ed eventualmente apportare modifiche anche alle scatole più piccole contenute nella scatola più grande.
Per sviluppare le email vengono utilizzati due modi di applicazione differenti:
- se il CSS viene applicato internamente significa definirlo nella head con il tag <style>
- quando si usa il metodo inline, significa che viene direttamente applicato sul tag.
Applicare invece il CSS interno significa che nel tag <style> verranno definite tutte le regole che gestiscono la visualizzazione del <body>, del <table> e della CTA. Facciamo un esempio:
Se si vogliono conoscere le proprietà presenti nel tag<body> basterà citare il nome del tag che in questo caso è solo body. Con l’uso delle proprietà inline, il browser sarà in grado di mostrare tutti gli elementi del contenuto. Questo significa che i testi avranno dimensioni di 16px e colore #0e0e0e. Si può anche definire la classe; in questo caso la CTA e tutte le sue proprietà si applicheranno solo agli elementi su cui è stata definita. Parliamo quindi di eredità. Secondo questi approcci, tutte le proprietà applicate a un elemento padre vengono ereditate dagli elementi figli, in questo caso la classe CTA eredita dal body tutti gli elementi per poi andare a sottoscrivere.
HTML e CSS: unico strumento
L’unione di HTML e CSS ha creato uno strumento potentissimo che permette di separare il contenuto della pagina dalle regole di visualizzazione, e ciò rende il codice più semplice, leggero e facile da leggere.
Questa unione ha permesso inoltre di rendere le email mobile responsive oltre che impattanti ed adatta a tutti i tipi di dispositivi.
Se sei un appassionato di codici e di front-end non puoi non conoscere HTML e CSS. In Epicode non hai bisogno della laurea per partecipare ai corsi che ti permettono di acquisire le conoscenze giuste per entrare a far parte del mondo del lavoro. Armati di computer, di una buona linea WI-FI e dai inizio al tuo futuro.
