Section outline

    • Materiale didattico

      Si può utilizzare uno di questi tutorial online:

    • Lezione 1 - 23/02/2022 e 24/02/2022

      Ambiente di sviluppo: Visual Studio Code

      Il World Wide Web

      Introduzione al linguaggio HTML


    • Una semplice pagina web

      <!doctype html>
<html lang="it">
  <head>
          <title>La mia prima pagina</title>
        </head>
  <body>
    <h1>Ciao a tutti!</h1>
    <p>Questa è la mia prima pagina HTML.</p>
  </body>
</html>

    • Esercizio: Si crei una pagina web con titolo: SOLDATI, che risulti come la seguente. Si salvi la pagina con nome soldati.html

      Soldati

      Si sta come
      d'autunno
      sugli alberi
      le foglie

    • Lezione 2 - 02/03/2022 e 03/03/2022

      • Grassetto e corsivo
        • <strong> <b> <em> <i>
      • citazioni
        • <blockquote cite="https://..."> <p> <cite>
        • <q cite="https://...">
      • abbreviazioni e definizioni
        • <abbr title="...">
        • <dfn title="...">
      • apici, pedici e variabili
        • <sup> <sub> <var>
      • testo preformattato
        • <pre> <code>
      • altri elementi
        • <del> <mark> <small> <ins datetime="..." > <time datetime="...">
      • commenti
        • <!-- ... -->

      • Elementi online e di blocco
    • Elenchi
      • Elenchi non ordinati <ul>
      • elenchi ordinati <ol type="..."> <ol start="...">
      • elementi <li> <li value="...">
      • elenchi annidati
      • liste di definizione <dl> <dt> <dd>


    • Esercizio sulle liste 1 Page
    • Esercizio sulle liste 2 Page
    • Esercizio sulle liste 3 File
    • Esercizio sulle liste 4 File

    • Lezione 3 - 09/03/2022 e 10/03/2022

      Le tabelle

      • I tag principali: <table> <tr> <td>
      • il template di una tabella: <caption>, <thead> (con <tr> e <th>) <tbody> <tfoot>
      • raggruppare celle <td colspan="2"> <td rowspan="2">

    • I link

      • <a href="https://........">
      • percorsi relativi
        • href="cartella1/cartella2/pagina.html"
        • href="../pagina.html"
      • nomi dei file:
        • non inserire spazi bianchi
        • maiuscole e minuscole sono diverse
      Link interno (àncora)
      • è un indice interno alla pagina
        • <a name="primo">
        • <a href="#primo">
        • <a href="#">link vuoto</a>
      Attributi dei link
        • title
        • target="_blank"
        • accesskey="a" (con ALT-SHIFT per Firefox, con ALT per Chrome)
      Modifica della cartella di base (nella head)
      • <base href="https://..../cartella">

    • Esercizio link File
    • Esercizio tabelle File

    • Per inserire i bordi nelle tabelle si inserisca nell'head:

      <head>

          <style>
              table, th, td {
              padding: 10px;
              border: 1px solid black; 
              border-collapse: collapse;
              }
            </style>
      </head>

    • Lezione 4 - 16/03/2022 e 17/03/2022

      • Titoli <h1> - <h6>
      • Le immagini: <img> è un tag inline e senza contenuto (chiusura)
          • gli attributi:
            • src: indirizzo del file
            • alt: descrizione alternativa dell'immagine
            • title: mostra il tooltip
            • longdesc: link per una descrizione alternativa (non viene visualizzato)
        • immagini cliccabili
      • I file audio
        • <audio controls>
  <source src="file.mp3" type="audio/mp3">
</audio>
        • attributi: controls, autoplay e loop
        • file alternativo se non supportato
        • <audio controls>
  <source src="file.mp3" type="audio/mp3">
  <source src="file.ogg" type="audio/ogg">
</audio>
      • I file video
        • <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
</video>
        • attributi: controls, autoplay e loop
        • file alternativi con tag <source>
    • esempio di file video
    • Esercizio media File

    • Il linguaggio CSS

      • Dichiarazioni CSS: proprietà: valore;
      • attributo globale HTML: style
      • classificazione elementi di blocco e inline
        • tag <span> per raggruppare elementi inline
        • tag <div> per raggruppare elementi di blocco
      • struttura ad albero di un documento: Document Object Model (DOM) e ereditarietà
      • tipi di valore
      • proprietà di base del testo
        • font-family font-size font-weight font-style line-height font-variant
        • text-shadow text-transform
        • text-align text-decoration

    • Lezione 5 - 23/03/2022 e 24/03/2022

      Fogli di stile

      <link href="stile.css" rel="stylesheet" type="text/css">

      Selettori

      • selettore di elementi
        • p {background-color: yellow;}
      • selettore universale
        • * {color: red;}
      • raggruppamento di selettori
        • h1, h2, h3 {background: white;}
      • Classi CSS
        • .testobianco {color: white;}
          • <p class="testobianco">....</p>
        • utilizzo di classi multiple
          • <p class="testobianco sfondorosso">....</p>
        • selettore di classi CSS
          • <elemento>.nome_della_classe
        • dichiarazione di classi multiple
          • p.testobianco.grassetto {color:white; font-weight:bold;}
          • <p class="testobianco grassetto">...</p>
      • Selettore di id
        • identificare in modo univoco un elemento
        • #titolo {color: blue;}
        • <h1 id="titolo">...</h1>
      • Pseudo-classi
        • dipende dallo stato di un elemento
        • pseudo-classi per i link <a>
          • link non visitati a:link a.classe:link
          • link visitati a:visited
        • pseudo-classi dinamiche
          • passaggio con il mouse sopra un elemento :hover (nell'ordine dopo link e visited)
          • selezione di un elemento :active
      • Specificità
      Lista dei selettori

    • Lezione 6 - 30/03/2022 e 31/03/2022


    • Lezione 7 - 06/04/2022 - 07/04/2022

      Utilizzo dei fogli di stile

    • Esercizio 1. Si scrivano 4 classi come segue:

      • .sx per posizionare un blocco a sinistra in modalità float;
      • .dx per posizionare un blocco a destra in modalità float;
      • .inizio che realizzi un oggetto float a sinistra, con carattere di 100px e altezza della linea 80% (utilizzare l'attributo CSS line-height: 80%;);
      • .giustificato che realizzi l'allineamento del testo giustificato.

      Utilizzando le classi si realizzi la seguente pagina.


    • pagina Esercizio 1 File

    • Lezione 8 - 14/04/2022 e 27/04/2022

      Progettazione di stili CSS

    • Esempio compito 1 Page
    • Esempio compito 2 Page
    • Esempio compito 3 Page
    • Esempio compito 4 Page
    • Esempio compito 5 Page
    • Esempio compito 6 Page