Guida HTML e CSS in italiano


Una guida approfondita che ti permetterà di esplorare il mondo della programmazione in HTML e del linguaggio CSS a tutto tondo, per imparare a programmare e scoprire come creare un sito web da zero

Guida HTML e CSS in italiano
Coding

Cosa imparerai

Scoprirai cosa vuol dire html, cos' è il codice html, come programmare in HTML e come padroneggiare il linguaggio css per imparare a programmare e creare un sito web

  1. Introduzione all'HTML
  2. La struttura dell' HTML
  3. La formattazione del testo in HTML
  4. La rappresentazione dei dati in HTML
  5. Il layout in HTML
  6. L' inserimento di dati in HTML
  7. Introduzione al CSS
  8. Come scrivere il CSS
  9. Proprietà CSS
  10. Layout responsive

1
Introduzione all'HTML

Cos'è il codice HTML?

1Cos'è il codice HTML?

Se pensiamo al web, di cui ogni giorno facciamo utilizzo, non possiamo non sapere cos’è l’HTML e quale funzione svolga, proprio perché è grazie ad esso che riusciamo tutt’oggi a creare e, quindi, a visionare i siti web. L’ acronimo HTML sta per “ Hyper Text Markup Language “, ovvero linguaggio a marcatori per ipertesti, un linguaggio di marc...

Continua a leggere
A cosa serve HTML?

2A cosa serve HTML?

 La funzione dell’ HTML è quella di inserire contenuti all’interno di siti web e landing page per crearne lo scheletro. Ma come inseriamo questi contenuti? Semplice! Lo facciamo attraverso file di testo composti da marcatori (tag) che danno un senso, un valore semantico ai contenuti. Cosa vuol dire? L'html, in breve, ci dice "questo contenuto è un titolo...

Continua a leggere
Cenni storici sull'HTML

3Cenni storici sull'HTML

Le persone che hanno guidato e che guidano la trasformazione di Internet sono note - pensiamo a Bill Gates e Steve Jobs - ma quelle che hanno sviluppato il suo funzionamento sono, talvolta, sconosciute e non celebrate in un’era tecnologica che loro stesse hanno contribuito a creare. Una di queste persone è Tim Berners-Lee, creatore del World Wide Web, dell’HTTP (HyperText Tra...

Continua a leggere
I migliori editor di testo

4I migliori editor di testo

Chi realizza siti web è solito dotarsi di Editor di Testo o IDE (Integrated Development Environment) per ottimizzare il workflow giornaliero. Su Internet ne esistono molteplici, come ad esempio Sublime Text, Atom, ecc. Ogni sviluppatore ha il suo stile, quindi la scelta dell’editor HTML adatto è individuale, ma quello che noi di Aulab consigliamo di utilizzare &egrav...

Continua a leggere

2
La struttura dell' HTML

Il template HTML

5Il template HTML

La struttura di un documento HTML è composta da un contenitore <html> e due sezioni ben distinte, ossia la <head> e il <body>. Immaginiamo la nostra semplice pagina HTML come un essere umano: è composto dalla testa (head) e dal corpo (body). Più nel dettaglio nella metafora, l’head rappresenta il cervello del nostro essere, le conoscenze interne che...

Continua a leggere
Tag e attributi

6Tag e attributi

 L' HTML (acronimo di hypertext markup language) è un linguaggio di markup, ovvero un linguaggio che consente di evidenziare un contenuto attraverso un etichetta, definita "tag", e dare a questo contenuto un significato semantico. Questi tag, con i loro attributi costituiscono il fulcro della struttura di una pagina web, il suo scheletro. È come se, ...

Continua a leggere
Tag generici

7Tag generici

Abbiamo, dunque, appurato che i tag sono delle “etichette” che avvolgono il contenuto del nostro codice html e ci consentono di dargli una struttura logica e gerarchica. Ma è proprio in quest’ottica che è molto importante parlare anche dei cosiddetti tag generici.   I tag generici sono dei tag “neutri” utilizzati principalmente al mero scopo di...

Continua a leggere
Tag di meta informazione

8Tag di meta informazione

Ti sarai certamente imbattuto, leggendo le altre nostre guide sull’HTML, nelle parole “meta tag”. Abbiamo, infatti, già parlato di tag e attributi html, ma che cosa sono nello specifico, i meta tag? Ci sembrava doveroso parlarne in maniera un pò più dettagliata per schiarirti le idee. I meta tag (o, appunto, tag di meta-informazione) non sono altro che dei...

Continua a leggere

9
Proprietà CSS

Proprietà CSS: i loro valori

21Proprietà CSS: i loro valori

Giunto a questo punto avrai sicuramente assimilato i concetti cardine basilari del linguaggio CSS. Andiamo, adesso, ad esplorarne le proprietà. Le proprietà CSS non sono altro che quelle caratteristiche a cui andremo ad assegnare dei valori che definiranno lo stile concreto dei nostri elementi html. Ne abbiamo già parlato quando ti abbiamo parlato della sintassi del CSS. ...

Continua a leggere
Box Model

22Box Model

Ogni elemento html, al di là della sua customizzazione mediante il linguaggio CSS, viene racchiuso in un “box” con all’ interno del contenuto (di qualsiasi natura, da un testo ad un’ immagine) e, via via, procedendo verso l’ esterno, una serie di componenti: il padding, il border ed il margin.  Con il CSS possiamo andare ad agire modificando le propriet...

Continua a leggere
Background CSS

23Background CSS

Abbiamo detto che il linguaggio CSS vanta numerose proprietà. Una delle più utilizzate, è sicuramente la proprietà generica “background”, che, come suggerisce il nome, è relativa agli sfondi degli elementi della tua pagina web. Ora, questa proprietà generica si declina in più modalità, vale a dire che possiamo occuparci dello sfo...

Continua a leggere
Font e Text CSS

24Font e Text CSS

Il linguaggio CSS ci permette di customizzare anche i font dei testi delle nostre pagine web. Vediamo, in questa guida, come incorporare un font nel nostro progetto, qual è la sintassi da utilizzare per assegnarlo ad un selettore e quali sono le proprietà per caratterizzarne lo stile. Importare un font Abbiamo due modi per importare un tipo di font nel nostro progetto: il prim...

Continua a leggere
Position CSS

25Position CSS

La proprietà position all'interno del linguaggio CSS serve per modificare il posizionamento di un elemento nella nostra pagina web; tuttavia, da sola non basta a raggiungere l’obiettivo: pertanto, viene utilizzata con altre proprietà direzionali : top,right,bottom,left e z-index.  In totale, la proprietà position ha 5 possibili valori:  s...

Continua a leggere
Pseudo-Classi e Pseudo-Elementi

26Pseudo-Classi e Pseudo-Elementi

 Pseudo-Classi Ricordi quando, nelle scorse guide, abbiamo parlato dei selettori CSS? Non ne abbiamo, volutamente, menzionato una tipologia: i selettori per pseudo-classi. I selettori per pseudo-classi sono dei selettori CSS preceduti da due punti e servono per selezionare degli elementi in base a determinate condizioni. Andiamo per ordine: che cos’ è una pseudo-classe? Ti...

Continua a leggere
Animazioni e trasformazioni in CSS

27Animazioni e trasformazioni in CSS

Fino ad ora abbiamo parlato un po’ di come dare dello stile ai nostri elementi html. E se ti dicessimo che non devi necessariamente creare delle pagine statiche? Nonostante per integrare le animazioni, infatti, il linguaggio sovrano sia Javascript , anche il nostro amico CSS può darci grandi soddisfazioni. In questa guida parleremo di come animare e rendere più dinamic...

Continua a leggere