Corso Gratuito di HTML e CSS

Cos’è HTML e cosa sono i CSS

In questa lezione capirai cosa sono: l’HTML, che identifica i blocchi della pagina, e i CSS, che ne caratterizzano l’aspetto grafico. Tramite schemi visivi, analizzeremo un layout, ovvero una “gabbia di contenuti”, per poi vedere come personalizzare i vari elementi all’interno di essi.

Relazione dei browser con HTML e CSS

In questa lezione imparerai qual é il ruolo dei browser, ovvero quello di richiedere la pagina, analizzarne il contenuto e mostrarlo a monitor. Attualmente il web e la tecnologia si stanno evolvendo a grande velocità, dobbiamo quindi rivolgere lo sguardo non solo ai browser dei computer, ma anche a quelli dei tablet e degli smartphone.

Editor per HTML e CSS

In questa breve lezione vedrai quale editor utilizzare per scrivere l’HTML e i CSS. Non ci sono esigenze particolari, infatti si possono utilizzare software come Notepad, piuttosto che TextEdit o gEdit, ma consigliamo comunque degli editor particolarmente funzionali come Coda o Brackets. Questo, perché permettono un lavoro molto più semplice grazie a evidenziazione del testo, autocompilazione ecc…

Infine, ti segnaliamo un altro editor: NetBeans, che in verità non è un editor, ma un IDE, ovvero un Integrated Development Environment per creare e gestire un ambiente di sviluppo.

Struttura e tag di una pagina HTML

In questa lezione incominceremo a prendere confidenza con il codice HTML, andando a vedere in concreto la struttura di una pagina e degli elementi che la compongono, ovvero i tag. Vedremo la relazione tra i blocchi di contenuto identificato dall’HTML e la struttura gerarchica che li collega fra di loro, secondo il rapporto di parentela Parent > Child.

Link e attributi dei tag HTML

In questa lezione imparerai cosa sono gli attributi dei tag HTML, utili a fornire ulteriori specifiche, a volte fondamentali per il suo corretto funzionamento.

Tag HTML per la titolazione

In questa lezione vedremo il ruolo dei tag per la titolazione, chiamati Headings, ovvero gli h1, h2, h3… La titolazione è molto importante come elemento di organizzazione dei contenuti, non solo nel web, ma su qualsiasi supporto che presenti dei testi. La titolazione identifica il livello di gerarchia del contenuto e risulta essere un potente strumento di comunicazione.

Il tag per i paragrafi

In questa lezione imparerai a conoscere il tag p, ovvero quello che identifica un paragrafo in una pagina HTML.

I tag per le liste e gli elenchi

In questa lezione vedrai come creare delle liste, che possono essere di tre tipi:

1. Ordinate per numero, dette ordered list.
2. Senza numero, ovvero il classico elenco puntato, chiamate unordered list.
3. Liste di descrizione, dette description list.

Inoltre per creare una lista avrai bisogno di un ulteriore per individuare le righe.

Inserire le immagini nell’HTML

In questa lezione prenderai dimestichezza con il tag img che ti permette di richiamare un’immagine all’interno di una pagina HTML. Vedremo insieme gli attributi di questo tag, quali:

• src che serve a specificare la URL di un immagine, ovvero la sua locazione sul server online.
• alt, ovvero “testo alternativo”, che descrive il contenuto di una immagine, importante per la SEO e per gli screen reader, software utilizzati anche dai non vedenti per visitare le pagine web.
• height (altezza) e width (larghezza), grazie ai quali possiamo controllare le dimensioni dell’immagine.

I tag per formattare i contenuti

In questa lezione conoscerai i tag HTML che servono per formattare i contenuti. Vedrai i tag che servono per mettere in grassetto del testo e i tag che servono per fare visualizzare il testo in italico. Scoprirai anche altri tag, sempre legati al testo, fra cui quelli specifici che vengono utilizzati per le citazioni, e quelli un po’ più tecnici usati per mostrare del codice e i commenti html all’interno della pagina.

Gli elementi a blocco e in linea

Un concetto molto importante da capire quando si struttura una pagina html è quella degli elementi a blocco e in linea, detti block e inline. La caratteristica principale che li distingue è il fatto che gli elementi a blocco occupano tutta la larghezza orizzontale disponibile dell’elemento in cui sono inseriti, mandando a capo gli elementi successivi presenti nel codice html. Gli elementi in linea, come dice la parola stessa, possono invece essere inseriti in una stessa linea con altri elementi adiacenti.

I moduli HTML per ricevere dati dall’utente

I moduli html, creati grazie al tag form servono per permettere all’utente di inviare delle informazioni al nostro server, dove verranno ricevute ed elaborate. Un esempio sono i classici campi user e password, o un modulo di registrazione o di richiesta informazioni. Il tag delimita il blocco della struttura, all’interno del quale troveremo tutti i diversi campi del modulo. Fra gli attributi di questo tag troviamo action, che è la URL della pagina sul server che riceve il modulo, così come method che definisce il modo in cui vengono passate le variabili, ovvero i campi del form.

I campi di input e di inserimento dati

In questa lezione vedremo quali sono, all’interno del tag form, i diversi campi di inserimento dati, detti di input. Possono essere di diversi tipi, grazie alla specifica che gli viene data al loro attributo type, fra cui:

• text
• radio
• select
• textarea
• checkbox

Noteremo come praticamente in tutti i campi in cui l’utente deve inserire qualcosa abbiano l’attributo name. Questo perché, quando i dati raggiungono il server, il server stesso deve sapere come si chiamano i diversi campi, per potere recuperare i valori necessari a rispondere alla richiesta.

Tag e meta all’interno di head

I tag all’interno delle servono per passare al browser, tutta una serie di informazioni che vanno al di fuori del contenuto visualizzato dall’utente. Sono informazioni tecniche o richiami per includere altri file, come per esempio i css e i javascript. Ce ne sono molti, ma quelli più importanti possono riguardare l’aspetto nella ricerca dei motori di ricerca, il tipo di charset (codifica dei caratteri), i vari tag meta e i link.

Le tabelle HTML

Vediamo uno dei “capisaldi” storici dell’html: le tabelle HTML. In passato le tabelle venivano utilizzate per fare qualsiasi cosa. I layout erano costruiti con le tabelle, non con i div che le hanno soppiantate perchè più laboriose e poco flessibili. Le tabelle html però, hanno mantenuto la loro funzione principale, e per impaginare i dati, svolgono benissimo il loro lavoro. Inoltre tramite i CSS possiamo creare tabelle molto belle e ad effetto, permettendo all’utente una facile visione delle informazioni.

Introduzione ai CSS

In questa lezione ti introdurremo ai CSS (Cascading Style Sheet – Fogli di Stile a Cascata). Un esempio è il sito csszengarden.com, in cui vedremo come la stessa pagina html può cambiare di aspetto modificando solo il css.

Sintassi dei CSS e come aggiungerli all’HTML

Come ogni forma di linguaggio, anche i css hanno la loro sintassi, un unico modo semplice di stabilire le nostre regole css. Ci sono 3 modi differenti per collegare o inserire stili css in una pagina, e sono:

1. Collegando un foglio di stile esterno.
2. Dichiarando lo stile all’interno della pagina.
3. Inserendo lo stile all’interno del tag html tramite l’attributo style.

I selettori: Tag, Classi e ID

In questa lezione imparerai cosa sono i selettori. Come dice la parola stessa, il ruolo del selettore è quello di andare a selezionare quella parte della pagina html su cui vogliamo lavorare, in questo caso applicargli degli stili che caratterizzeranno il suo aspetto estetico. I selettori sono molti, ma in questa lezione conoscerai i 3 tipi fondamentali:

• Tag html
• Le classi
• Gli ID

Possiamo infatti applicare dei CSS a tutti i tag html che abbiamo visto fino adesso o andare a selezionare gruppi di elementi comuni tramite le classi ed infine lavorare su elementi unici con gli ID.

Progettazione dei CSS: struttura gerarchica e organizzazione

Un aspetto molto importante è quello di dedicare del tempo per la progettazione degli stili. Bisogna puntare a creare degli stili flessibili, che possono essere riutilizzati in diverse circostanze ed evitare, dove si può, di scrivere più volte stili identici. Uno dei punti di forza dei CSS è il concetto di ereditarietà, grazie al quale gli elementi figlio (child) ereditano le proprietà di chi li contiene, il genitore (parent). Inoltre i CSS possono sono molto potenti perché permettono a un elemento di acquisire proprietà, e quindi l’aspetto, da classi differenti.

La tipografia web e i CSS

Grazie ai CSS abbiamo a disposizione, molto più rispetto al passato, un arma potentissima: la tipografia.

CSS per testi, link e liste

In questa lezione andremo a vedere tutti i CSS principali inerenti ai testi. Analizzeremo diverse proprietà, come quella per assegnare il carattere, la sua dimensione, l’allineamento ecc… Inoltre, vedrai come applicare i CSS ai link, andando così a controllare il loro aspetto durante i diversi stati, come per esempio quando passiamo il cursore sopra uno di essi.

Impostare gli sfondi con i css

I CSS ci danno la possibilità di controllare gli sfondi, grazie alle proprietà background. Possiamo agire su singole proprietà quali:

• background-color, che determina il colore di sfondo,
• background-image, che indica un’immagine come sfondo,
• background-repeat che indica se lo sfondo si deve ripetere in orizzontale, in verticale o se non si deve ripetere.
• Conoscerai anche come indicare la posizione dello sfondo all’interno dell’elemento, attraverso la proprietà background-position.

Infine, invece di utilizzare una dichiarazione per ogni proprietà, vedremo la forma abbreviata che è molto più veloce e racchiude tutte le dichiarazioni precedenti.

Padding, Margin e Border: il box model

Il box model è quel modello che definisce le regole per la gestione dei blocchi all’interno della pagina html. Possiamo controllare l’aspetto e il comportamento di questi elementi grazie alle sue proprietà principali:

1. Padding
2. Margin
3. Border

Come utilizzare i web font

I Web Font, sono quei set di caratteri che permettono una vasta scelta al di fuori dei caratteri tradizionali installati su i pc. Quelli più famosi li possiamo trovare ed utilizzare gratuitamente sui server di Google, i Google Fonts. In questa lezione ti mostriamo come scegliere e incorporare un web font all’interno del tuo progetto web.

Controllare HTML e CSS tramite gli Inspector del browser

Grazie agli inspector dei browser possiamo analizzare il codice della pagina in un ambiente interattivo, molto meglio rispetto ad un semplice file di testo. Utilizzeremo quello di Google Chrome, ma le stesse regole valgono per quelli di Firefox o Safari. Tramite gli inspector possiamo lavorare in tempo reale sul layout, ovvero apportare modifiche e verificarne il risultato istantaneamente. Un altro aspetto di fondamentale importanza degli inspector è che sono in grado di simulare la visualizzazione sui diversi tipi di tablet e smartphone.

Siti table-less: i layout web più comuni

Come avrai potuto constatare online, possiamo individuare diversi tipi di strutture di layout per creare un sito web. Se cerchiamo di categorizzare quelli maggiormente diffusi possiamo individuare diverse famiglie, fra cui:

• Layout fissi
• Layout fluidi
• A diverse colonne ( monocolonna, contenuto + sidebar, contenuto + 2 sidebar )

Layout fluido e fisso

A meno che non decidi di diventare un vero e proprio sviluppatore di siti web, difficilmente ti troverai a cominciare da zero la creazione di un layout, ma un’infarinatura base ti permetterà di avere le conoscenze necessarie qualora deciderai di modificare il tema del tuo sito. In questa lezione faremo un esempio che sarà sufficiente per farti comprendere il funzionamento di un layout fluido e un layout fisso.

La proprietà float

La proprietà float è una delle più importanti nella creazione di un layout, ma anche una delle più difficili da capire e gestire. Il float è concetto base di molti framework CSS, tra cui Bootstrap, per cui è importante averci dimestichezza. In questa lezione affronteremo i suoi utilizzi ed altre proprietà, come clear, ad essa complementari.

CSS per tabelle html

In questa lezione vedremo in termini pratici come applicare dei CSS a una tabella html. Verranno utilizzati i CSS visti nelle lezioni precedenti e anche altri per la selezione degli elementi, come per esempio le righe pari e quelle dispari della tabella, così da potergli dare un aspetto differente. Un’altra cosa importante che introduciamo sono i selettori per gli stati (hover ecc..), esattamente come quelli dei link, ma si possono utilizzare anche con altri elementi html.

Siti responsive per smartphone e tablet

Siamo arrivati a uno dei concetti più importanti ai fini della compatibilità fra i diversi device: i siti responsive, ovvero ridimensionabili a seconda del supporto da cui avviene la navigazione. Ai fini SEO, dopo diverse diatribe e opinioni, è Google stesso che dice di preferire siti responsive piuttosto che siti diversi dedicati al mobile, questo per un migliore organizzazione dei contenuti, migliore indicizzazione e minore possibilità di avere dei contenuti duplicati.

Siti responsive con le media query

La “magia” che permette a un sito di diventare responsive avviene grazie alle media query. Il concetto base delle media query è quello di andare a controllare gli elementi html a seconda della dimensione della finestra del browser. Con questo strumento a nostra disposizione la personalizzazione per i diversi device non ha confini!

CSS per monitor e stampa

Può capitare che l’utente decida di volere stampare una pagina web. Per controllare l’aspetto estetico della nostra pagina stampata abbiamo a disposizione i media types:

• @media screen { … }
• @media print { … }

Nel primo decidiamo le proprietà css da assegnare agli elementi quando sono visualizzati su uno schermo, mentre nel secondo andremo a controllare i css della pagina quando viene stampata.

Display, visibility e opacity

Ci sono delle proprietà molto utili che però a volte creano un po’ di confusione, è per questo che abbiamo deciso di inserirle in una lezione a parte. Sono la visibility, il display e l’opacity.

Selettori avanzati

Come abbiamo visto fino adesso è molto facile selezionare gli elementi html, piuttosto che le classi e gli ID. A volte però, man mano che diventerai più esperto, avrai la necessità di scendere nel dettaglio e dovere fare delle selezioni ancora più specifiche. Grazie ai selettori css avanzati possiamo fare tutto ciò e personalizzare ogni minimo particolare:

• I selettori Combinati
• Le pseudo Classi
• I selettori degli attributi

Posizionare elementi con i CSS

I CSS ci vengono incontro non solo per curare estetica e box model, ma anche per posizionare gli elementi all’interno della pagina html. Questo avviene grazie alla proprietà position e i suoi relativi valori come fixed, absolute, relative e z-index, che stabilisce la priorità dei livelli a cui un elemento appartiene.

Modificare i CSS di un tema WordPress

Eccoci arrivati nel vivo dell’azione: andare a modificare i css di un tema WordPress. Il flusso di lavoro è semplice:

1. Vai sulla pagina che vuoi modificare e analizzala con l’inspector.
2. Guarda da chi sono dichiarate le proprietà css che ti interessa modificare.
3. Sovrascrivile con il tuo css.

A seconda del tema che usi può essere diversa la posizione dove andrai ad inserire il tuo codice css personalizzato.