La struttura di una pagina web

HTML 5 introduce una novità particolare alle versioni precedenti. Già dalle versioni XHTML, gli sviluppatori si sono abituati a creare strutture delle pagine attraverso un uso massiccio dei tag <div> che hanno preso il posto di tabelle e frame, con benefici ineguagliabili per la manutenzione e leggibilità del codice. Il sito risulta così diviso in … Leggi tutto

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.

Leggi tutto

Cheatsheet CSS, le proprietà più usate

html-css

Non è facile fare un riassunto delle centinaia di proprietà CSS 3usate nei fogli di stile. Certo è che ce ne sono alcune decisamente più usate e che è quasi irrinunciabile non conoscerle. Lo studente spaesato, con esercizi ripetuti, potrà certamente memorizzarle in modo semplice. Vediamo un prontuario simil cheat sheet suggerito per le esercitazioni a scuola.

Leggi tutto

Esercizio 00 – pagina HTML/CSS

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

Leggi tutto

Esercizio 01 – pagina HTML/CSS

 Per ogni esempio sono forniti uno schema stilizzato della richiesta, una cartella compressata 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

Leggi tutto

Esercizio 02 – 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

Leggi tutto

Esercizio 03 – pagina HTML/CSS

esempio-pagina-dvd

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.

Leggi tutto