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

Condividi su facebook
Condividi su linkedin
Condividi su telegram
Condividi su whatsapp
Condividi su email
Condividi su pocket

HTML E CSS Cosa Sono? Introduzione

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?

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>

  • 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:

la mia casa

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>

<HTML>

<head>

<title> Scrivi il titolo <title>

</head>

<body>

<p> Ciao mondo! <p>

</body>

</HTML>

Il codice HTML come puoi notare contiene pochi tag.
Sai già che ogni tag ha un significato differente per un browser. 

I principali sono: </head> <body>
Il tag <head> contiene tutte le informazioni principali che appaiono prima del tag <body> come ad esempio il titolo del paragrafo. Mentre nel tag <body> compare il contenuto vero e proprio dell’articolo.

Ora vediamo un esempio di css:
<!DOCTYPE html>

<html>

<body>

<h4 style=”color:Tomato;”>Ciao Mondo</h4>

</body>

</html>

[h4] indica la grandezza del titolo “Ciao Mondo” e si chiama “selettore”, è la parte del codice che specifica quale elemento HTML dovrà modificare il CSS.  

Le informazioni [style=”color:Tomato;”] dell’esempio sono le cosiddette “dichiarazioni” e indicano i valori e le proprietà che modifica il selettore, in questo caso è “il colore del titolo”.

Abbiamo detto precedentemente che il colore è una proprietà. Quindi in questo caso il termine “color” è una proprietà mentre “tomato” è il valore.

Nell’esempio che abbiamo appena visto, la struttura HTML del contenuto viene modificato dalla dicitura style=”color:Tomato;” </p>

Ricapitoliamo.

L’HTML viene usato per strutturare le pagine web con elementi tipo: titoli, paragrafi e consentendo di incorporare immagini, video e altri media. 

Mentre il CSS specifica lo stile del documento come: layout di pagina, colori e caratteri sono tutti determinati con CSS.
Il CSS rende il contenuto delle pagine web più gradevoli interagendo con l’ HTML.

 

Un Corso su HTML e CSS

Se desideri approfondire l’argomento html e css puoi farlo con il nostro corso HTML & CSS per siti web e landing page 101 del nostro Sensei Francesco Passanante.

Durante il corso verranno trattati i due linguaggi: HTML e CSS.

Questo percorso formativo è stato studiato per coloro che vogliono imparare l’argomento HTML e CSS in modo professionale e desiderano collaborare con le aziende che cercano Web Developer Junior. Alla fine del corso saprai realizzare delle pagine web statiche responsive (cioè adatte anche per la navigazione da mobile).

 

Conclusioni su Html e CSS

Eccoci alla fine della guida HTML e CSS.

Finalmente ora sai qual è la differenza tra HTML e CSS, conosci la sintassi per creare un sito web con html e css, sai quando usare l’HTML e il CSS. 

Se pensi di voler approfondire l’argomento in modo professionale puoi seguire il nostro corso HTML & CSS per siti web e landing page 101..
Se vuoi farci delle domande, non esitare a scriverci una email o parlacene direttamente nei commenti.

 

Condividi su facebook
Condividi su linkedin
Condividi su telegram
Condividi su whatsapp
Condividi su email
Condividi su pocket

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

Resta Aggiornato su Questo Tema!

Ti Potrebbe Interessare Anche

>

SCOPRI LA TUA STRADA!

I Test Attitudinali Gratuiti di DigitalDojo.it ti aiutano a trovare il tuo percorso.