HTML e CSS Cosa Sono? Impara i due linguaggi di programmazione

HTML e CSS cosa sono? Prima di addentrarci nell’argomento e capire html css base cosa sono, è bene spiegare subito che HTML e CSS non sono la stessa cosa.

HTML è l’acronimo di Hypertext Markup Language. Questa definizione forse non ti aiuta, quindi per capire meglio prova a pensare all’HTML come alla struttura di un sito.

Cosa trovi dentro questa struttura?

Trovi titoli, elenchi, collegamenti ma anche tag, elementi e attributi.  

Bene, ora hai capito? 

L’HTML è la struttura dei contenuti che si trovano all’interno di un sito web

CSS invece è l’acronimo di Cascading Style Sheets, in italiano viene tradotto con “fogli di stile”. In sostanza è la parte estetica delle pagine web, per esempio i colori, i font e il layout delle pagine.

L’HTML e il CSS funzionano come una squadra. Ci piace definirli metaforicamente come il corpo e la pelle di un sito web. 

In sostanza è il CSS che rende vivo l’HTML.

Ora, hai capito HTML e CSS cosa sono. Passiamo subito ad analizzarli nello specifico.

Sei pronto? 

Inizia a leggere la guida html e css.

HTML e CSS Cosa Sono Esattamente

Abbiamo detto che per creare un sito web, hai bisogno di due linguaggi: HTML e CSS  

Nello specifico l’HTML è la struttura della pagina mentre il CSS è il layout (visivo e audio). 

Abbiamo già detto che HTML e CSS lavorano insieme per definire la struttura delle pagine e delle applicazioni Web.  

Ora ti diamo un buon consiglio. 

Ti sei appena approcciato ai due linguaggi e pensi che siano difficili e inaffrontabili, non ti scoraggiare!

E’ vero, graficamente sembrano un po’ ostici l’HTML e il CSS base, ma per iniziare a capirli puoi usare lo stesso metodo che si usa quando si inizia a studiare una lingua straniera. Comincia a imparare la sintassi.

Vedrai che in questo modo riuscirai ad amarli

Cosa è l’HTML?

L’ HTML è il linguaggio usato per scrivere la maggior parte dei siti web. Viene usato per creare le pagine e renderle funzionali.

All’interno di questo linguaggio ci sono i “tag” e gli “attributi”, ovvero, gli elementi basilari dell’HTML. I due componenti lavorano insieme ma svolgono diverse funzioni.

Vediamo nello specifico cosa sono i tag e gli attributi:

• I tag vengono usati per indicare l’inizio e la chiusura di un elemento HTML e sono identificati graficamente dal simbolo minore e maggiore, un esempio di tag:

Per scrivere all’interno del tag devi ricordarti di aprirli e chiuderli, facciamo un esempio di tag aperto e chiuso: < h2>  < / h2>

<h2> Titolo H2 </h2>

• Gli attribuiti invece sono degli elementi che contengono delle informazioni più specifiche. Vengono scritti sempre con dei tag aperti e chiusi < > < / >, ma all’interno si inseriscono dei dati più completi. 

Ecco l’esempio di un attributo immagine:

<img src="https://miosito.it/miaImmagine.jpg" alt="Mia Immagine" width="200" height="300">

Cos’è il CSS

Il CSS è il linguaggio che viene usato per rappresentare graficamente le pagine web. 

Sai già che è l’acronimo di Cascading Style Sheets e che si utilizza per indicare ai browser come eseguire il rendering (restituzione grafica) delle diverse parti di una pagina Web.

Ogni elemento della pagina Web fa parte di un testo scritto in un linguaggio di markup. 

Il più delle volte l’HTML è il linguaggio di markup, ma ne esistono tanti altri come ad esempio l’XML. 

In questa guida parleremo dell’HTML per mostrarti come funziona l’ CSS.

Quando si deve usare l’HTML e quando il CSS? Imparare HTML e CSS

La prima cosa da capire quando si affronta l’argomento html css base è quando usare un linguaggio di stile (CSS) e quando usare un linguaggio di markup (HTML).

Vediamo subito questa differenza.

Tutto il contenuto del sito Web viene aggiunto utilizzando il linguaggio di markup (HTML). 

L’ HTML specifica contenuti come i post di un blog, le intestazioni delle pagina, i video e gli audio.

Invece, la presentazione grafica del contenuto del sito è definita attraverso un linguaggio di stile come il CSS. 

I contenuti indicati da questo linguaggio sono: le immagini, i colori di sfondo, i bordi, la dimensione del carattere, la tipografia e la posizione degli elementi su una pagina Web. 

È molto importante che tu sappia quando usare un linguaggio e quando l’altro perché se non sai adoperare correttamente il linguaggio corretto fin da subito, potresti trovarti in difficoltà quando dovrai modificare il tuo sito Web.

Un volta avviato il tuo sito, ti capiterà di affrontare autonomamente diversi piccoli problemi che ti si presenteranno davanti. 

Alcune complicazioni potrebbero riguardare l’accessibilità e l’usabilità del sito, quindi la lettura da parte di un browser o di uno screen reader e dovrai intervenire tempestivamente. 

Per questo ti consigliamo di approfondire l’argomento anche con un corso html e css online. 

Qual è la differenza tra HTML e CSS?

In questa sezione capiremo meglio la differenza tra HTML e CCS

L’ HTML come abbiamo detto all’inizio è l’acronimo di Hypertext Markup Language, un linguaggio di markup standard che serve per creare applicazioni e siti Web. 

È un linguaggio in continua evoluzione che può soddisfare le diverse esigenze degli utenti.

Non è difficile, quindi dovresti imparare almeno la base dell’HTML per gestire autonomamente alcuni problemi del tuo sito.

Il Cascading Style Sheets comunemente conosciuto come CSS è un linguaggio di formattazione usato per la creazione delle pagine web ma dal punto di vista stilistico come dice la parola “Style”. 

Se i nostri siti web sono belli e moderni è solo grazie al CSS che permette di realizzare degli effetti visivi ma anche delle semplici animazioni. 

La Sintassi: HTML e CSS

Per apprendere bene una lingua dobbiamo sapere come funziona dal punto di vista  sintattico e grammaticale, così succede anche nel linguaggio HTML e CSS.  

I due linguaggi hanno delle regole di sintassi, che bisogna imparare e seguire per parlare correttamente con il browser. 

Vediamole nello specifico.

La sintassi HTML

Quando scrivi usando il linguaggio HTML, devi capire da dove devi iniziare a scrivere e dove concluderai. 

La sintassi HTML include tag, attribuiti e tanto altro. Noi vediamo i primi due. 

Tag e Attributi HTML e CSS

Il tag è il contenuto che si trova all’interno delle parentesi angolari. Esiste il tag di apertura e quello di chiusura. I tag sono degli elementi che indicano anche dove inizia un contenuto e dove finisce. 

Ogni tag ha un significato specifico, in questo caso 

“p” sta per paragrafo.

Tutto chiaro? 

Allora, non dimenticare che i due tag lavorano in coppia, quindi avrai:

• il tag di apertura, che definisce l’inizio del paragrafo
• il tag di chiusura, che definisce la fine del paragrafo

L’unica differenza tra un tag di apertura e di chiusura è la barra / che precede il nome del tag che chiude.

Quando si combinano un tag di apertura e un tag di chiusura, si ottiene un elemento HTML. 

Passiamo ora all’elemento attributo.

Gli attributi sono delle informazioni extra legate ad un elemento HTML. Vengono scritti all’interno di un tag HTML ma non sono visualizzati dal browser. 

Esistono 16 attributi opzionali che possono essere utilizzati in aggiunta a ogni elemento HTML.

L’attributo “href” per esempio viene utilizzato per definire la destinazione di un link (che utilizza un tag anchor). In generale, gli attributi più usati sono:  “class” e “title”. Quest’ultimo viene usato per descrivere un elemento.

Alcuni elementi HTML hanno attributi obbligatori, ad esempio le immagini. Infatti, quando inserisci un’immagine dovrai specificare la posizione usando l’attributo “scr”.

Ora che conosci la differenza tra tag e attributi html, passiamo alla sintassi CSS.

La sintassi CSS

La sintassi CSS include diversi elementi tra cui: selettori, proprietà, valori, dichiarazioni, blocchi di dichiarazione e set di regole.

Analizziamo alcuni elementi CSS.

Un tipico esempio di selettore è lo “snippet” di un codice. Questo elemento viene utilizzato per identificare i dati della pagina Web che devono essere modificati in base agli stili.

Una “proprietà” invece è l’aspetto di un elemento. Hai presente il colore, il riempimento di un margine oppure uno sfondo? Bene, queste sono le proprietà CSS che vengono più usate. 

La proprietà viene definita attraverso i valori, ad esempio, al colore della proprietà potrebbe essere assegnato il valore “rosso”, come in questo esempio: color: rosso ;.

La combinazione di una proprietà e di un valore viene definita come “dichiarazione”. 

Abbiamo dei casi in cui a un singolo selettore vengono applicate più dichiarazioni. In questo caso si usa il termine “blocco di dichiarazioni” se ci  riferiamo alle dichiarazioni applicate ad un singolo selettore.

Con la dicitura “set di regole” invece facciamo riferimento alla combinazione tra il selettore singolo e il blocco di dichiarazione.

Ora che ti abbiamo spiegato la sintassi html e css base, passiamo a qualche esempio pratico.

Alcuni esempi HTML e CSS

Vediamo qualche esempio in cui si usa l’HTML e il CSS.

Ecco un caso di HTML:

<! ESEMPIO HTML>

Se ti vuoi addentrare in questo mondo puoi iniziare dal nostro corso “HTML e CSS per Siti Web e Landing Pages” di Francesco Passanante, in cui imparerai a scrivere il codice dalle basi!

HTML E CSS PER SITI WEB E LANDING PAGES

Scopri il corso e guarda gratuitamente tutto il primo modulo! VAI AL CORSO

PERCORSI DI PROGRAMMAZIONE

Scopri il percorso di programmazione e diventa un Web Developer a 360°! VAI AI PERCORSI