Html e CSS: cosa sono?

Home | Blog | Html e CSS: cosa sono?

Cosa hanno in comune tutti i siti online che visitiamo ogni giorno? Semplice, il linguaggio di markup utilizzato per renderli tali!
Cos’è un linguaggio di markup? E’ un linguaggio di pubblico dominio che attraverso i cosiddetti “tag” definisce e crea la struttura delle pagine web; sarà poi compito dei browser, che utilizziamo tutti i giorni, tradurre tutti i tag in porzioni di testo, immagini e contenuto di vario tipo.
HTML (“HyperText Markup Language”) è utilizzato per creare i siti web ed è esattamente un linguaggio di questo tipo, da non confondere con i comuni linguaggi di programmazione come Matlab o C++.
Cos’è un “tag”? No, in questo contesto non si parla dei famosi tag che usiamo ogni giorno su Facebook per condividere immagini e contenuti con gli amici.
<head>, <body>, <header>, <section>, <article>, <footer>, <div> e <p> sono i principali “tag” che caratterizzano il linguaggio HTML. Ognuno è racchiuso tra i simboli “<” e “>” e contiene una porzione di contenuto.
Struttura pagina web

Figura 1 - Struttura pagina web

Vediamo nel dettaglio alcuni tra i principali.

  • <header> : è il primo contenitore di elementi visibili sulla pagina web, da non confondere con <head> altrettanto importante ma che contiene elementi che permettono il corretto funzionamento del codice come per esempio il collegamento al foglio di stile .css. L’<header> è un elemento utile per racchiudere qualsiasi contenuto abbia intento introduttivo, come il logo del brand e il menù di navigazione.

 

  • <body> : è l’elemento centrale che definisce ed identifica il corpo dell’intera pagina. E’ univoco e può contenere al suo interno tutti gli altri tag nominati in precedenza e tanti altri come <img> per inserire immagini oppure <h1>, <h2>, <h3>, <h4>, <h5>, <h6> per inserire titoli con diversa importanza e dimensione.

 

  • <section> : rappresenta una generica sezione di un documento o di un’ applicazione, intesa come raggruppamento tematico di contenuti. Generalmente è presente un titolo che introduce l’argomento.

 

  • <article> : è una sezione autonoma che può identificare il post di un forum, un articolo di una rivista o di un giornale, l’articolo di un blog, un commento, un widget interattivo, o qualsiasi cosa che abbia un contenuto indipendente.

 

  • <footer> : è l’elemento che deve contenere informazioni in fondo alla pagina come logo e contatti del proprietario del sito web, collegamenti a documenti correlati, dati di copyright e così via. Non necessariamente deve essere inserito solo alla fine del documento.

 

  • <div> : nasce come abbreviazione di “divide” inteso come separatore, oggi può essere definito il tag più neutro del markup poiché permette di creare sezioni all’interno della pagina web al fine di separare contenuti l’uno dall’altro. Lo scopo dei <div> è fungere da semplici contenitori, sarà poi compito del designer modificarne aspetto e dimensioni per renderli adatti ad ogni necessità.

 

  • <p> : è il contenitore che prevede al suo interno l’inserimento di testo e di altri tag come <a>, ovvero l’inserimento di un collegamento ad un’altra pagina o più comunemente “link”.

Cosa sono invece i CSS?

Cascading style sheet”, o più semplicemente fogli di stile a cascata, strettamente legati ma concettualmente diversi dal linguaggio HTML. Questo perché si occupano della parte estetica dei tag definiti poco fa, in sostanza l’HTML senza i CSS rappresenterebbe solo una brutta copia della nostra pagina web. Con il tempo si è resa necessaria l'introduzione del CSS per separare i contenuti delle pagine HTML dalla loro formattazione e permettere una programmazione più chiara e facile da utilizzare.
In alternativa, si potrebbe pensare di inserire il tag <style> nel file .html e definire una dichiarazione di stile interna relativa alla sola pagina che contiene la dichiarazione stessa. Oggi questa procedura ha perso di importanza ed è stata quasi del tutto sostituita dai fogli di stile, i quali permettono di ottenere in questo modo un codice pulito, snello e più facile da consultare.
Un esempio di codice CSS potrebbe essere:

p {
font-family:
‘Lato’, Verdana, sans-serif;
font-size:
14px;
color:
green;
}
 
div {
background-color: red;
}
 

Sulla sinistra si definisce font, dimensione e colore dei paragrafi <p> all’interno della mia pagina html, il browser interpreterà questa porzione di codice e l’utente vedrà a schermo il paragrafo con font “Lato”, grande 14px di colore verde. Sulla destra viene definito semplicemente il colore dello sfondo dei <div>.

Figura 2 - Regole CSS

Come si può vedere, entrambi gli esempi sono composti dagli stessi elementi: un selettore (p e div nel nostro caso) seguiti da parentesi graffe contenenti le proprietà e i rispettivi valori.
Il selettore, come il nome lascia intuire, serve appunto "per selezionare" il o gli elementi della pagina cui applicare le dichiarazioni contenute tra le parentesi graffe (il cosiddetto "blocco dichiarativo").
Molto utili ed importanti per chi utilizza questo tipo di linguaggio sono anche gli attributi globali “id” e “class”, questi ultimi sono applicabili a tutti gli elementi e senza di essi i CSS non sarebbero uno strumento così potente. Id e classi sono davvero una delle chiavi per sfruttare al meglio questo linguaggio.
Come collego il file .html e .css?
Semplice! Basterà inserire all’interno del tag <head> del foglio html un collegamento ad un foglio esterno, che non sarà altro che il foglio di stile css. La stringa da utilizzare è la seguente:

<link rel="stylesheet" type="text/css" href="nome_foglio_di_stile.css"/>

Semplicemente copiando ed incollando questa stringa, modificando “nome_foglio_di_stile.css” con il nome opportuno sarà possibile visualizzare la pagina web appena creata sul browser.


Stai cercando un'agenzia per approfondire gli argomenti di questo articolo?
Clicca qui per andare alla nostra pagina contatti.

Roberto Paolucci

SEO Specialist

Informazioni biografiche

Parlaci del tuo Progetto
Condividi con noi i tuoi obiettivi e la tua idea di business