La struttura

Partiamo da questo semplice sito web.

Primi esperimenti

  1. Cambia il testo tra i tag <h1> e </h1> e guarda cosa accade.

  2. Ora prova ad aggiungere un tag h3 nella linea successiva come "sottotitolo", sempre dentro il tag body e guarda il risultato.

  3. Ora vogliamo aggiungere una descrizione, lo facciamo inserendo un tag paragrafo <p> .. </p> con un po' di testo all'interno. Provalo, come viene la pagina?

Ogni sito è costituito da link ad altri siti. Aggiungiamone uno con il tag <a> .. </a> detto anchor. Questo tag ha un attributo href attraverso cui è possibile specificare l'indirizzo della pagina web da collegare. Tutto ciò che è contenuto tra i due tag (aperto e chiuso) diventa cliccabile.

  1. Inserisci un paragrafo con il seguente testo Here is a list of cities where you can find us.

  2. Usa il tag anchor per rendere cliccabile la parola list e puntare all'indirizzo web http://www.regione.piemonte.it. Dopo averlo inserito, provalo!

Inseriamo una immagine o un video

Per aggiungere immagini ad una pagina web si usa il tag img. Come i tag anchor hanno l'attributo href, il tag img ha l'attributo src per puntare all'immagine da caricare. Il tag img è unico, non ha il tag di chiusura e termina con />.

  1. Prima della chiusura del tag body nella nostra pagina, aggiungiamo una immagine con il seguente url: https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/bikes1.jpg

  2. Ora cambiate l'immagine inserendo invece questo url: https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/bikes2.jpg

Con l'avvento dell'HTML5 possiamo anche inserire molto semplicemente un video, un esempio che utilizza il tag video con i seguenti attributi

  • width: per la larghezza in pixel
  • height: per l'altezza in pixel
  • controls: per i comandi è come segue:
<video width="320" height="240" controls>
  <source src="video-url.mp4" type="video/mp4">
</video>

Notate che al suo interno è contenuto un tag source anche lui con l'attributo src come le immagini. Esso definisce il link alla risorsa video e il suo tipo con l'attributo type.

  1. Cancellate l'immagine e inserite un tag video che punti alla seguente risorsa video: https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4

Riuscite a visualizzarlo cliccando sul bottone play? Ricordatevi di inseire l'attributo "controls".

A questo punto la pagina dovrebbe presentarsi come questa.

Gli elenchi puntati

Per gli elenchi non numerati è previsto il tag ul per la lista in associazione al tag li per i singoli elementi. Come nel seguente esempio:

<ul>
  <li>A list item</li>
  <li>A second list item</li>
  <li>A third list item</li>
</ul>

Proviamo ora a creare una semplice barra di navigazione sfruttando un elenco. Collochiamola in cima alla pagina, quindi tra l'apertura del tag body e il primo header h1.

  1. Inseriamo un titolo tramite un tag h2
<h2>Ollie</h2>
  1. E di seguito la nostra lista ul con quattro elementi li, scegliete voi che parole scrivere, ma ricordatevi di chiuderli.

results matching ""

    No results matching ""