Come creare un sito HTML5 e CSS3 responsive? Come realizzare un sito internet, partendo da zero senza utilizzare alcun CMS?
Se vuoi imparare a creare una pagina web che si adatti a tutti i dispositivi (device), utilizzando un semplice editor di testo sei atterrato nel sito giusto!
In questo articolo abbiamo realizzato una pagina web moderna https://agenzia-marketing.net/miosito/ che rispetta i seguenti requisiti:
Per realizzare la nostra pagina web in HTML5/ CSS3 - https://agenzia-marketing.net/miosito/ abbiamo utilizzato un semplice editor di testo.
Il nostro sito web è composto da 2 file:
Che competenze devi avere per poter realizzare una pagina web responsive da zero ?
Beh, se hai una conoscenza minima di HTML5 e CSS3 è meglio .... qualora non conoscessi queste specifiche, tuttavia, con un pò più di impegno potrai comunque sperimentare la creazione di un sito web responsive da zero.
Considerando il file index.html, la struttura base HTM5 del nostro sito web è la seguente:
HEADER: sezione contenente il titolo della pagina
NAV: menù di navigazione
SECTION: una sezione specifica del sito che contiene degli articoli
ARTICLE: sezione che descrive un contenuto specifico;
ASIDE: sezione dedicata a news, banner e link ( non presente nel sito )
FOOTER: sezione destinata a copyright, informazioni dell’Azienda ecc …
NB:
"<article> rappresenta una sezione autonoma in un documento, pagina, applicazione o sito e che è, in linea di principio, indipendentemente distribuibile o riutilizzabile.
In linea di massima, <article> può essere impiegato come un elemento specifico di <section>.
Ad esempio, se prendiamo un giornale, la sezione "economia" contiene gli articoli che riguardano l'economia, la sezione "sportiva" contiene gli articoli dello sport, ecc ....
Leggendo il codice della nostra pagina web, se hai una conoscenza minima di HTML e CSS, noterai che abbiamo spesso associato il tag <section> a delle specifiche "classi css "per formattare alcune sezioni specifiche del sito.
Nel file mio-sito.css abbiamo inserito le specifiche css per formattare il contenuto della nostra pagina web, In sostanza, grazie ai CSS possiamo dare al nostro sito un lyout personalizzato:
Inoltre, nel file mio-sito.css abbiamo inserito le principali QUERY MULTIMEDIALI necessarie per definire la corretta larghezza del contenuto della pagina, a seconda dello specifico dispositivo ( device ) che verrà utilizzato per visualizzare il sito.
/*ottimizzazione "budget Android" - 240*/
@media only screen and (max-width: 240px){
/*ottimizzazione per iPhone 5 portrait width: 320px*/
@media only screen and (max-width: 320px) {
/*ottimizzazione per iPhone (landscape)*/
@media only screen and (min-width: 321px) and (max-width: 479px) {
/*ottimizzazione iPhone 6-8 Plump landscape · width: 736px*/
@media only screen and (min-width: 480px) and (max-width: 736px) {
/*iPad portrait · width: 768px e iPad landscape · width: 1024px*/
@media (min-width: 768px) and (max-width: 1024px) {
Grazie a queste istruzioni, puoi visualizzare correttamente il sito https://agenzia-marketing/miosito su tutti i principali dispositivi:
Se desideri visualizzare il codice del file index, trovi il codice cliccando sull'immagine "HTML5".
Se desideri scaricare il codice, copia ed incolla il codice su un file del "blocco note" del tuo pc e rinominalo "index.html"
Se desideri visualizzare il codice del file mio-sito.css, trovi il codice cliccando sull'immagine "CSS3".
Se desideri scaricare il codice, copia ed incolla il codice su un file del "blocco note" del tuo pc e rinominalo "mio-sito.css"
Se vuoi realizzare una tua pagina web personalizzata, puoi utilizzare i codici mostrati nell'articolo.
Consigli:
buon lavoro!
Per verificare che il sito sia effettivamente "responsive", digita il seguente indirizzo: http://www.responsinator.com/
Nel campo "enter your site" ( in alto a sinistra ) digita:
