3e e 3I SIA: Unità didattica per studenti DSA e BES - 1a lezione Html5 e CSS
Questa mappa aiuta a visualizzare i concetti principali in modo chiaro e strutturato.
Mappa Mentale: Introduzione a HTML5 e CSS
Idea Centrale: HTML5 e CSS
1. HTML5 (HyperText Markup Language)
Mappa Mentale: Introduzione a HTML5 e CSS
Idea Centrale: HTML5 e CSS
1. HTML5 (HyperText Markup Language)
- Definizione: Linguaggio di markup utilizzato per creare pagine web.
- Struttura Base di un Documento HTML:
- `<!DOCTYPE html>`: Dichiarazione del tipo di documento.
- `<html>`: Inizio del documento HTML.
- `<head>`: Contiene informazioni sulla pagina (meta-dati, titolo).
- `<body>`: Contiene il contenuto visibile della pagina (testo, immagini, etc.).
- Elementi Fondamentali:
- `<h1> ... <h6>`: Intestazioni (titoli).
- `<p>`: Paragrafo di testo.
- `<a>`: Link (ancora).
- `<img>`: Immagini (integrate nella pagina).
- `<div>`: Sezione di blocco per raggruppare altri elementi.
2. CSS (Cascading Style Sheets)
- Definizione: Linguaggio utilizzato per descrivere la presentazione di un documento HTML.
- Applicazione di Stili:
- `color`: Colore del testo.
- `background-color`: Colore di sfondo.
- `font-size`: Dimensione del font.
- `margin`: Spazio esterno intorno agli elementi.
- `padding`: Spazio interno all'interno degli elementi.
- Selettori:
- Selettore di tag (`h1`, `p`, etc.)
- Selettore di classe (`.classe`)
- Selettore di ID (`#id`)
3. Creare il Primo Documento HTML
- Passo 1: Aprire un editor di testo (es. Notepad, VS Code).
- Passo 2: Scrivere la struttura base di HTML.
- Passo 3: Aggiungere elementi come intestazioni, paragrafi e immagini.
- Passo 4: Collegare un file CSS utilizzando il tag `<link>` nel `<head>`.
- Esempio: `<link rel="stylesheet" type="text/css" href="styles.css">`
4. Esercizi Pratici
- Creare una semplice pagina web con titolo, paragrafo e immagine.
- Applicare stili CSS per cambiare colori e formattazione.
Suggerimenti per Studenti DSA:
- Colora la Mappa: Usa colori diversi per ogni sezione (HTML, CSS, Esercizi) per facilitarne la distinzione.
- Utilizza Schemi: Disegna piccole icone o simboli accanto agli elementi per migliorare la comprensione visiva (es. un libro per `<p>`, una matita per il codice).
- Rivedi in Gruppo: Spiegare a un compagno aiuta la memorizzazione e la comprensione.
- Applicazioni Pratiche: Prova a modificare un sito esistente per vedere l’impatto del CSS.
Risorse Aggiuntive:
- Tutorial online su HTML e CSS.
- Esempi di codice semplificati e commentati.
- Video tutorial che mostrano la creazione di una pagina web.
Usando questa mappa, gli studenti DSA potranno orientarsi meglio nei concetti fondamentali di HTML5 e CSS e seguire la lezione in modo più efficace.
RispondiInoltra |
Commenti
Posta un commento