Uno dei problemi più ostici per uno sviluppatore web alle prime armi è realizzare un front-end, una interfaccia, con oggetti, foto, contenitori allineati. Esistono diverse tecniche per ottenere il risultato voluto, ma nessuna è semplice ed efficace come il flexbox. Vediamo come usarlo.
HTML & CSS
Esercizi e guide su HTML 5 e fogli di stile CSS 3
Pagine HTML con CSS Responsive
In questo articolo vediamo alcune tecniche per rendere le nostre pagine web “responsive”, ovvero capaci di adattarsi allo schermo/dispositivo su cui vengono visualizzate per consentire una fruizione più comoda, mantenendo inalterata l’esperienza utente, che si usi ad esempio un pc con schermo grande, un tablet con uno schermo medio o uno smartphone con schermo piccolo. Vediamo come.
Proprietà CSS più usate
Non è facile fare un riassunto delle centinaia di proprietà css3 usate nei fogli di stile. Certo è che ce ne sono alcune decisamente più usate e che è quasi irrinunciabile non conoscerle o che, con esercizi ripetuti, ci entrano in testa in modo automatico. Vediamo un prontuario simil cheat sheet per le esercitazioni a scuola.
Form HTML/CSS (intermedio) – Esempio 01
Una lista di esercizi con form HTML5 e CSS3. Gli esercizi contengono CSS esterni e l’uso dei tag DIV per una formattazione più complessa ma una resa grafica più piacevole ed in linea con la realtà che troviamo sul web. Qui una forma di login con input senza bordi e un bordo blu quando si fa focus/clicca dentro la casella stessa.
Le tabelle con DIV e CSS3
Negli ultimi anni si è sempre più imposto nel mondo web, la realizzazione di pagine web senza tabelle o i pessimi frame per determinare la disposizione degli oggetti. Abbiamo già parlato anche dei tag semantici che vanno decisamente verso questa direzione.
Esercizio 03 – pagina HTML/CSS
Un esempio cumulativo di tutte le caratteristiche HTML5/CSS3 viste nei precedenti esempi. Un esempio anche visivamente un po’ più carino e realistico di sito web, rispetto ai precedenti ma senza troppe aspettative! Cerchiamo di analizzare le sue singole parti. Come sempre, trovate il codice cumulativo in allegato.
Esercizio 00 – pagina HTML/CSS
Per ogni esempio sono forniti uno schema stilizzato della richiesta, una cartella compressa con la struttura esemplificativa ma realistica del nostro sito con la/le pagine web nel livello più basso, una cartella css per i fogli di stile, una js per gli script javascript ed una img per contenere le immagini. I link all’interno del codice delle pagine devono tener conto di tali percorsi. Quindi il codice è estratto e pubblicato. Le soluzioni proposte non necessariamente sono le uniche valide, possono esistere diversi modi di realizzare una specifica con selettori e fogli di stile differenti. Le soluzioni proposte sono testate su W3C Validator
Esercizio 02 – Tag HTML di base
Un altro esercizio per focalizzare l’attenzione sulla creazione di semplicissime pagine web. Le istruzioni guidano a creare una struttura di cartelle e di file, ad inserire i vari elementi di formattazione. In allegato la soluzione con le pagine HTML.
Esercizio tag base 01
Un semplice esercizio per focalizzarci sulla creazione di cartelle e pagine web, con struttura di base, i principali tag per la formattazione, immagini, link, liste e tabelle. In allegato il codice, istruzioni e immagine col risultato atteso.
Esercizio tag base 00
Un esercizio che sfrutta i tag base per la formattazione, una tabella, un elenco numerato, link a pagine interne, immagini. Il tema è la città di Teramo.