Ciao a tutti! Oggi ho creato per voi una serie di esercitazioni in HTML "da campus"!
Sono esercizi veloci, semplici da scaricare e ideali per i melaccademici che non hanno ancora frequentato un corso di Web Design.
Non serve essere programmatori e non dovete conoscere tutto l'HTML: l'idea è proprio quella di divertirci insieme curiosando nel codice, provando a capire come funziona una pagina web e modificandola per trasformarla in qualcosa di vostro.
Iniziamo?
La nostra missione
Per questo esercizio partiremo da una pagina web già pronta.
La pagina racconta la storia di Mela, una piccola mela digitale con i suoi gusti, le sue passioni e i suoi sogni... ma Mela può diventare chiunque vogliate voi!
Il vostro compito sarà quello di prendere il codice della pagina e trasformare la storia di Mela nella vostra storia.
Potrete cambiare i testi, le immagini e, se ve la sentite, anche alcuni elementi della grafica.
Alla fine, la vostra pagina potrà essere pubblicata sul nostro sito!
Istruzioni
1. Apri la pagina dell'esercizio
Vai alla pagina che ho preparato per voi:
[APRI LA PAGINA DELL'ESERCIZIO VERSIONE 1]
[APRI LA PAGINA DELL'ESERCIZIO VERSIONE 2]
Una volta aperta, guardala con attenzione.
Non limitarti a leggere la storia: osserva anche come è fatta la pagina.
2. Guarda il codice
Ora arriva la parte interessante!
Fai clic con il tasto destro in un punto qualsiasi della pagina e scegli:
"Visualizza sorgente pagina"
Si aprirà una nuova pagina piena di testo.
Non spaventarti!
Quello che stai guardando è proprio il codice HTML e CSS che il browser utilizza per costruire la pagina.
3. Copia il codice
Premi:
CTRL + A
per selezionare tutto il codice.
Poi premi:
CTRL + C
per copiarlo.
4. Apri Blocco Note
Apri Blocco Note sul tuo computer.
Incolla il codice utilizzando:
CTRL + V
A questo punto hai una copia completa della pagina sul tuo computer.
5. Salva la pagina
Adesso devi salvare il file.
Nel Blocco Note scegli:
File → Salva con nome
Dai al file un nome, per esempio:
melastoria-sara.html
La cosa importante è che il file termini con:
.html
Non deve essere:
melastoria-sara.html.txt
Se necessario, nella finestra "Salva con nome" scegli "Tutti i file" come tipo di file.
6. Apri la tua pagina
Ora puoi fare doppio clic sul file melastoria-sara.html.
Il browser dovrebbe aprire la tua pagina.
All'inizio sarà identica a quella dell'esercizio ma adesso è il tuo file e puoi modificarlo:
7. Trasforma Mela in te!
Qui comincia il vero esercizio.
Cerca nel codice le parti che raccontano la storia di Mela.
Puoi modificare, per esempio:
il titolo della pagina;
la tua presentazione;
le cose che ti piacciono;
le immagini;
i tuoi sogni per il futuro;
i titoli delle varie sezioni.
Prova a trasformare completamente la storia.
Mela non deve più essere Mela: deve diventare te!
Puoi anche provare a cambiare qualche colore o qualche caratteristica grafica della pagina.
Ricorda una cosa importante:
Non aver paura di sbagliare!
Se la pagina non funziona più, prova a capire che cosa hai modificato.
E se proprio non riesci a trovare l'errore... chiedi aiuto!
Che cos'è l'HTML?
HTML significa HyperText Markup Language.
È il linguaggio utilizzato per descrivere la struttura di una pagina web.
Quando apri una pagina Internet, il browser legge il codice HTML e capisce quali elementi deve visualizzare.
Per esempio:
<h1>La mia storia</h1>
dice al browser:
"Questo è il titolo principale della pagina."
Mentre:
<p>Ciao! Mi chiamo Sara e mi piacciono i videogiochi.</p>
indica un paragrafo.
HTML utilizza degli elementi chiamati tag.
Alcuni tag che incontrerai durante questo esercizio sono:
<h1>
<h2>
<h3>
<p>
<img>
<a>
<div>
<section>
Non è necessario impararli tutti a memoria.
Per ora è sufficiente riconoscerli e provare a capire che cosa fanno.
Che cos'è il CSS?
Se l'HTML serve principalmente a costruire la struttura della pagina, il CSS serve a decidere come deve apparire.
CSS significa:
Cascading Style Sheets
Con il CSS possiamo modificare, per esempio:
colori;
dimensioni;
caratteri;
sfondi;
bordi;
spazi;
posizione degli elementi;
animazioni;
disposizione delle immagini.
Per esempio:
h1 {
color: red;
}
dice al browser di visualizzare il titolo h1 in rosso.
Oppure:
body {
background-color: pink;
}
cambia il colore dello sfondo della pagina.
Nel nostro esercizio troverai HTML e CSS nello stesso file.
Questo è molto comodo perché ti permette di modificare tutto direttamente con Blocco Note.
HTML + CSS = una pagina web!
Possiamo immaginare che HTML e CSS siano come due componenti di una costruzione.
HTML costruisce la struttura:
"Qui c'è un titolo, qui un'immagine, qui un testo."
CSS decide l'aspetto:
"Il titolo è grande e rosa, l'immagine è rotonda e il testo è dentro una card."
Insieme permettono di creare una vera pagina web.
E la cosa più bella è che non serve un programma complicato per iniziare.
Abbiamo già tutto quello che ci serve:
Blocco Note + browser + curiosità!
Adesso tocca a te!
Apri la pagina dell'esercizio, copia il codice e comincia a modificarlo.
Non cercare di capire tutto subito.
Prova. Modifica. Salva. Ricarica la pagina.
Se qualcosa cambia, hai appena imparato qualcosa.
Se qualcosa si rompe, hai appena imparato qualcosa di ancora più interessante.
E quando avrai finito... la tua storia potrebbe finire sul sito di Melacademy!
Buon divertimento, melaccademici!
