HTML e CSS - Struttura pagina web con stili

Questo codice rappresenta una pagina web completa scritta in HTML con elementi di stile CSS incorporati. Analizziamo le parti principali:

Struttura della Pagina

La pagina è organizzata secondo la struttura standard HTML:

• Head: contiene informazioni sulla pagina (titolo e stili)
• Body: contiene il contenuto visibile della pagina

Sezione degli Stili CSS

All'interno del tag <head> troviamo una sezione <style> che definisce l'aspetto grafico degli elementi:

Regole di Stile Principali:

• Paragrafi (p): hanno sfondo verde e testo bianco
• Classe "titolo_personalizzato": applica il colore viola al testo
• Celle di tabella (td): hanno un bordo nero spesso 2 pixel
• ID "colore_casuale": applica uno sfondo azzurro chiaro
• ID "coloraDiv": applica uno sfondo color salmone chiaro

Contenuto della Pagina

Titoli e Testo

• Tre titoli principali (<h1>), alcuni con stile personalizzato
• Un paragrafo con informazioni sulla classe e l'attività

Tabella

Una tabella con:

• Due righe e due colonne
• Nomi di personaggi Disney nelle celle
• Una cella con ID speciale per colorazione diversa
• Commenti HTML nascosti nel codice

Altri Elementi

• Link: collegamento al sito dell'Istituto D'Arzo che si apre in una nuova finestra
• Immagine: riferimento a un file immagine nella cartella "assets"
• Video: elemento per riprodurre video (percorso non specificato)
• Div contenitore: sezione con sfondo colorato che racchiude altri elementi

Elementi di Input

Diversi tipi di campi per l'inserimento dati:

• Campo di testo
• Campo numerico
• Pulsante di invio
• Pulsante generico

Caratteristiche Tecniche

Il codice utilizza:

• Selettori CSS di tipo classe (.) e ID (#)
• Commenti HTML per documentare il codice
• Attributi come target="_blank" per aprire link in nuove finestre
• Struttura semantica con elementi appropriati per ogni tipo di contenuto

Questa pagina rappresenta un buon esempio di HTML base con styling CSS, ideale per esercitazioni di ripasso prima di affrontare JavaScript.

<html>
    <head>
        <title> La nostra pagina in HTML </title>
        <style>
            p {
                background-color: green;
                color: white;
            }

            .titolo_personalizzato {
                color: violet;
            }

            td {
                border: 2px solid black;
            }

            #colore_casuale{
                background-color: lightblue;
            }

            #coloraDiv {
                background-color: lightsalmon;
            }
        </style>
    </head>
    <body>
        <h1 class="titolo_personalizzato">Attività di RIPASSO</h1>
        <h1>Attività in classe</h1>
        <h1 class="titolo_personalizzato">Prova definitiva</h1>
        <p> 
            Oggi facciamo ripasso con la 4AI INFORMATICO 
            in preparazione a JAVASCRIPT
        </p>

        <table>
            <tr>
                <!-- 
                    questo è un commento 
                    commento linea 2
                -->
                <td>PAPERINO</td>
                <td>PLUTO</td>
            </tr>
            <tr>
                <!-- 
                    questo è un commento 
                    commento linea 2
                -->
                <td>MINNIE</td>
                <td id="colore_casuale">ALFRED</td>
            </tr>
        </table>

        <a href="https://istitutodarzo.edu.it" target="_blank">Vai al sito del D'arzo</a>
        <img src="./assets/images.jpg">
        <video src="...percorso file video"></video>
        <div id="coloraDiv">
            <p>
                ciao
            </p>
            <h1>Prova prova</h1>
        </div>

        <input type="text"><br/>
        <input type="number">
        <input type="submit">
        <button>Questo è un pulsante</button>

    </body>
</html>