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
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
1Cos è il codice HTML?
Quando navighiamo su Internet, esplorando i siti web e interagendo con il contenuto online, è difficile non imbattersi nell'HTML. Insomma: se pensiamo al web, di cui ogni giorno facciamo utilizzo, non possiamo non sapere cos’è l’HTML e quale funzione svolga, proprio perché è proprio grazie ad esso che riusciamo tutt’oggi a creare e visionare i siti...
Continua a leggere
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
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
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-thumb.jpg)
5Commenti html
Prima di entrare concretamente nei meandri del mondo del linguaggio html, occorre fare una piccola premessa, che ti sarà molto utile in seguito: quando si sviluppa in HTML, è essenziale mantenere il codice ben organizzato e facilmente comprensibile. Uno strumento utile per raggiungere questo obiettivo è l'inserimento di commenti nel codice HTML. I commenti consentono agli...
Continua a leggere
2
La struttura dell' HTML
6Il 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
7Tag e attributi html
Cos'è un tag? 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 schelet...
Continua a leggere
8Tag 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
9Tag 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
3
La formattazione del testo in HTML
10Headings
Fino ad ora ci siamo occupati di tutto ciò che concerne l'head: ora, finalmente, spostiamoci nel body! Occupiamoci, quindi, del contenuto vero e proprio della nostra pagina html! Continuando la nostra esplorazione dei tag propri del linguaggio html, è impossibile prescindere dalla spiegazione dei tag headings. Molto banalmente, i tag headings (ad esempio <h1></...
Continua a leggere
11Tag di testo e formattazione
Ci sono diverse modalità con le quali inserire i tuoi testi quando scrivi una semplice pagina in html. Avrai capito, ormai, che per farlo abbiamo bisogno dei nostri tag. I tag necessari all’ integrazione di un testo nella nostra pagina sono principalmente gli headings - di cui abbiamo già parlato - e i paragraphs che identificano, appunto, un paragrafo in una pagina html, o, ...
Continua a leggere
4
La rappresentazione dei dati in HTML
12Elenchi in html
A questo punto cominci ad avere un’idea meglio strutturata di come funziona il linguaggio html. Ne hai imparato la struttura, ne hai conosciuto alcuni tag e attributi e ti senti pronto ad iniziare. Ci siamo: scrivi una semplice pagina in html. Supponiamo che, per iniziare a programmare la tua prima pagina html tu abbia pensato alla creazione di un blog di cucina. Hai inserito il tuo titolo...
Continua a leggere
13La tabella in html
Ti potrà sembrare, a primo impatto, che una tabella possa non servirti mentre sei alle prese con la stesura della tua pagina html. In realtà non è così: prova a pensare, ad esempio, alla parte di immagazzinamento dati di un sito web e-commerce: ecco che ti balza immediatamente in mente quanto utile sia una tabella in quel caso! La tabella in html è, quindi, u...
Continua a leggere
5
Il layout in HTML
14Tag immagine html
Per rendere accattivanti le pagine di un sito web non possiamo limitarci ad inserire al loro interno contenuti esclusivamente testuali. Siamo, d’altro canto, in un periodo storico dove mai prima d’ora la cultura del visuale ha assunto un’importanza assoluta. Ogni utente verrà attirato principalmente dalla parte ‘estetica’ di un sito web. Occorre, quindi, ...
Continua a leggere
15Tag semantici
Nel corso delle scorse guide abbiamo visto diversi tag che danno un senso (semantico) al nostro contenuto. Andiamo, adesso, invece, ad esplorare dei nuovi tag, introdotti in html5, con il solo ed unico scopo di evidenziare il valore semantico del contenuto: sono i cosiddetti, appunto, tag semantici. Questi tag non hanno una differenza nella resa visiva del contenuto che abbracciano, ma vanno a co...
Continua a leggere
7
Introduzione al CSS
17Cos'è il linguaggio CSS
Se sei affascinato dal mondo del web design o, comunque, nutri un po’ di curiosità per il settore della programmazione informatica, probabilmente avrai già sentito il termine "linguaggio CSS". Questo termine si riferisce ad un linguaggio molto importante nell’ambito dello sviluppo web. Si tratta, infatti, di un linguaggio di stile. Che cosa significa? S...
Continua a leggere
18A cosa serve il CSS
Anche se abbiamo già parlato un po’ del motivo per cui utilizziamo il linguaggio CSS, proviamo, adesso, a dare una spiegazione un pò più tecnica e professionale a riguardo. Diciamo, quindi, che con il CSS possiamo dire al nostro sito web come deve mostrare le informazioni e possiamo essere in grado di memorizzare comandi per elementi di stile come caratteri, dim...
Continua a leggere
8
Come scrivere il CSS
19Come inserire il CSS in HTML
Vuoi aggiungere del linguaggio CSS al tuo progetto? Perfetto! Ci sono 3 modi di incorporare il CSS all’interno della nostra pagina html: style in line, embedded, e link esterno. Vediamoli! CSS Style in line Quando parliamo di style in line, intendiamo inserire il css su un’unica riga: la stessa dell'elemento che andremo a modificare. In questo caso creere...
Continua a leggere
20Selettori CSS
Adesso che ti è chiaro che cos’ è e a che cosa serve il linguaggio CSS, e persino come inserirlo nel tuo codice, non ci resta che entrare nel vivo della questione! Come scrivere linguaggio CSS: la sintassi CSS Abbiamo appurato che il CSS è un linguaggio di stile: come suggerisce la parola stessa, abbiamo, quindi, a che fare con una vera e propria ling...
Continua a leggere
21Specificità ed ereditarietà CSS
Come già detto nelle precedenti guide, CSS sta per Cascading Style Sheet che, tradotto, sta per foglio di stile a cascata. Questo concetto deve esserti particolarmente chiaro, in quanto propedeutico all’apprendimento di ciò di cui parleremo in questa guida. La caratteristica principale di un foglio di stile è l'ordine in cui i selettori assegnano le regole css a ...
Continua a leggere
9
Proprietà CSS
-thumb.jpg)
22Proprietà 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-thumb.jpg)
23Box 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
24Background 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
25Font 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:...
Continua a leggere
26Position 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
27Pseudo-Classi e Pseudo-Elementi
Pseudo-Classi CSS 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? ...
Continua a leggere
28Animazioni 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
10
Layout responsive
-thumb.jpg)
29Flexbox CSS
Se sei arrivato fino a qui leggendo le nostre guide sul linguaggio HTML, ricorderai senz’ altro che alcuni elementi di cui abbiamo parlato hanno comportamento bloccante: come già spiegato, questo vuol dire che i browser aggiungono automaticamente una riga vuota prima e dopo ogni elemento del genere, tale per cui l’effetto sortito è l' “andare a capo”. ...
Continua a leggere
30CSS Media Query
Parlandoti del flexbox ti abbiamo illustrato un concetto fondamentale nella progettazione di un sito web; prima ancora di iniziare a scrivere codice per creare un sito web, infatti, devi curarne la progettazione con minuzia. Per questo abbiamo introdotto, nella scorsa guida, il concetto di progettazione “mobile-first”. Non te lo ricordi? Tranquillo, lo rispolveriamo velocemente. Pr...
Continua a leggere
Le nostre guide possono essere molto utili per muovere i primi passi nel mondo della programmazione, ma se vuoi iniziare una nuova carriera in ambito digital & tech con il supporto costante dei docenti e tantissime esercitazioni pratiche, ti consigliamo di frequentare uno dei corsi della nostra Hackademy!
Scopri i corsi