In breve: I siti web si costruiscono con codici speciali. HTML dà la struttura, CSS dà l'aspetto grafico.
Cosa sono i codici di programmazione web
Ogni pagina che vediamo su internet è scritta con dei codici. Questi codici sono istruzioni per il browser, cioè il programma che apre i siti.
Il browser legge il codice e mostra il risultato. Per esempio Chrome o Firefox leggono le istruzioni e fanno apparire testi, immagini e colori.
I due codici di base sono HTML e CSS. Si imparano insieme perché lavorano in coppia.
Come funzionano HTML e CSS
L'HTML serve a costruire la struttura della pagina. Indica dove va il titolo, il paragrafo, l'immagine o il pulsante.
Possiamo pensare all'HTML come allo scheletro di una casa. Senza scheletro la casa non sta in piedi.
Il CSS invece serve a decidere come appaiono gli elementi. Sceglie i colori, le dimensioni del testo, gli spazi e la posizione.
Il CSS è come la vernice e gli arredi della casa. Cambia l'aspetto, ma la struttura resta uguale.
Si scrivono dentro file di testo. I file HTML finiscono con .html, i file CSS finiscono con .css.
Esempi pratici
Un esempio di codice HTML per un titolo è questo:
<h1>Benvenuti nel mio sito</h1>
Il tag <h1> dice al browser che quel testo è un titolo importante.
Un esempio di codice CSS per colorare il titolo di blu è:
h1 { color: blue; }
Insieme, il browser mostra la scritta Benvenuti nel mio sito in grande e di colore blu.
Per esercitarsi si può usare un editor di testo gratuito. Si scrive il codice, si salva il file e si apre con il browser.
Parole difficili
- HTML: linguaggio che definisce la struttura e i contenuti di una pagina web.
- CSS: linguaggio che definisce lo stile grafico di una pagina web.
- Browser: programma che apre e mostra le pagine dei siti internet.
- Tag: etichetta del codice HTML scritta tra parentesi angolari.
- Editor: programma per scrivere e modificare i file di testo o codice.
Riferimenti
- Norma: Norme generali e livelli essenziali delle prestazioni relativi al secondo ciclo del sistema educativo di istruzione e formazione
- Obiettivo formativo coperto: ob.iefp-operatore-grafico.competenze-tecnico-professionali.cl3.ipermediale-conoscenze.05