Css
Qui puoi trovare diversi esercizi sui link da svolgere in HTML e CSS.
Esercizio 1: Il mio mondo in musica
Crea il file musica.html contenente:
Il tag h1 con il titolo principale "Il mio mondo in musica".
Il tag p con il testo "La mia canzone preferita".
Il tag <div> con all'interno la prima parte del testo della tua canzone preferita.
Creare il file stile.css contenente il codice CSS che permette di dare uno stile ai diversi tag:
Per il tag body specificare che lo sfondo è grigio chiaro, il testo è allineato al centro, ed il font usato è Arial (o in alternativa sans-serif).
Per il tag h1 specificare che il testo del colore è blu, la grandezza del font è 24px ed il testo è sottolineato.
Per il tag p specificare che la grandezza del font è 18px.
Per il tag div specificare che lo sfondo è bianco, la larghezza è 600px, il margine è 20px auto, il padding è 10px ed il bordo è 2px solid black.
Nel file musica.html va richiamato il file stile.css
Esercizio 2: Sito tennis
Partendo dal seguente progetto del sito dedicato al tennis (tennis.zip), analizzare il codice presente e notare come il css riesce a modificare lo stile delle pagine html.
In seguito, modificare i diversi file del sito secondo le seguenti indicazioni:
nel file tennis_home.html inserire una descrizione di cosa contiene il sito, almeno un'immagine;
nel file tennis_notizie.html inserire un paragrafo e qualche notizia sugli ultimi tornei giocati. Trovi informazioni utili qui: https://www.tuttosport.com/tennis
nel file tennis_giocatori.html inserire un paragrafo e una tabella con la colonna posizione (1, 2, 3, 4, 5), la colonna classifica atp (i primi cinque giocatori in classifica) e la colonna classifica wta (prime 5 giocatrici). Trovi i primi 5 giocatori qui e le prime cinque giocatrici qui.
nel file tennis_slam.html inserire la descrizione dei 4 slam: Australian Open, Roland Garros, Wimbledon e Us Open. In particolare mettere una foto per ogni slam. Trovi una descrizione dei quattro slam qui.
Nel file stile_tennis.css aggiungere codice css in grado di modificare lo stile della tabella e qualunque altra modifica allo stile intendi fare.