Lezione1.
OBIETTIVI: Capire cosa è HTML. Capire la struttura di una pagina web
DEFINIZIONE
HTML è un linguaggio di markup
Serve a strutturare il contenuto di una pagina web
Non è un linguaggio di programmazione
COSA FA HTML
Definisce titoli
Definisce paragrafi
Definisce immagini e link
INTRODUZIONE.
Innanzitutto, per creare la pagina web, create una cartella HTML sul desktop del computer. Aprite ora il programma Blocco Note e salvate un file vuoto nella cartella appena creata con il nome homepage.html. Mi raccomando di utilizzare l’estensione “html” e non quella predefinita “TXT” di Blocco Note. Ora aprite la cartella HTML e verificate che dentro ci sia il vostro file con l’icona del browser, non quella del blocco note.
A questo punto aprite tale file, facendo doppio click, e affiancate le due finestre: a sinistra il browser, dove vedete i risultati, a destra il blocco note dove modificate il file e poi lo salvate. Ad ogni salvataggio controllate il risultato aggiornando la pagina web con il pulsante aggiorna.
STRUTTURA BASE DI UNA PAGINA HTML
HTML è un “linguaggio di marcatura degli ipertesti” questo vuol dire che serve a creare la struttura della pagina web, che può essere letto da un browser come Google Chrome ma che non può effettuare controlli, calcoli, cicli ed iterazioni come un normale linguaggio di programmazione. Quindi, se l’obiettivo è creare delle pagine web “statiche” vediamo come crearle e come creare un mini sito web di presentazione dei nostri hobby e conoscenze.
La struttura di base di una pagina web la possiamo sinteticamente descrivere in questo modo:
| <html> |
| <head> <title>La mia prima pagina</title> </head> |
| <body> Contenuto della pagina </body> |
| </html> |
Aggiornamento: provate a scrivere i tag qui sopra nella vostra pagina web, salvate e dovreste vedere la scritta “Contenuto della pagina” all’interno, nel corpo della pagina, mentre il titolo “La mia prima pagina” lo trovate in alto, come titolo della scheda.
SPIEGAZIONE
<html> indica l’inizio del documento e </html> ne indica la fine
<head> </head> tra questi due “tag” ci sono le informazioni per il browser
<title> </title>è il titolo della pagina
<body></body> contiene il contenuto visibile
ATTENZIONE: I tag vanno aperti e chiusi: <html> va chiuso con </html>, <body> va chiuso con </body>
RIEPILOGO: HTML serve a creare pagine web, usa tag. Ogni pagina ha head e body
Lezione2
ARGOMENTO
Tag principali di testo
Titoli e paragrafi
OBIETTIVI
Capire cosa sono i tag di testo
Usare correttamente titoli e paragrafi
Distinguere struttura e contenuto
TITOLI IN HTML
I titoli servono a organizzare il contenuto. Esistono sei livelli di titolo
<h1> Titolo principale </h1>
<h2> Titolo secondario </h2>
<h3> Titolo di livello 3 </h3>
<h4> Titolo di livello 4 </h4>
<h5> Titolo di livello 5 </h5>
<h6> Titolo di livello 6 </h6>
SPIEGAZIONE
<h1> è il titolo più importante
<h6> è il meno importante
Una pagina dovrebbe avere un solo h1
PARAGRAFI
Il testo normale si scrive con il tag p
<p> Questo è un paragrafo di testo </p>
Ogni paragrafo va a capo automaticamente
ESEMPIO COMPLETO.
Scrivete questo esempio completo nel vostro blocco note, poi come prima salvate, andate sul browser Google Chrome o quello che state usando ed aggiornate la pagina. Dovreste trovare una pagina web, con il titolo di pagina sulla scheda in alto “Pagina di esempio“, nel corpo della pagina trovate scritto il rigo “HTML” e “Introduzione” ed infine il paragrafo “HTML è un linguaggio di markup Serve per creare pagine web“.
<html>
<head>
<title>Pagina di esempio</title>
</head>
<body>
<h1>HTML</h1>
<h2>Introduzione</h2>
<p> HTML è un linguaggio di markup Serve per creare pagine web </p>
</body>
</html>
ATTENZIONE: Non usare titoli solo per ingrandire il testo. I titoli servono per la struttura. Non mettere paragrafi senza il tag p
RIEPILOGO: I titoli vanno da h1 a h6. Il testo normale usa p. HTML struttura il contenuto
Lezione3
ARGOMENTO
Link
Immagini
Elenchi
OBIETTIVI
Creare collegamenti ipertestuali. Inserire immagini. Usare elenchi puntati e numerati
LINK
Il link si crea con il tag a. Serve per collegare pagine o siti
<a href=”https://www.google.com”>Vai a Google</a>
SPIEGAZIONE
href indica l indirizzo di destinazione. Il testo tra i tag è cliccabile
LINK A UN ALTRA PAGINA
<a href=”pagina2.html”>Pagina 2</a>
IMMAGINI
Le immagini si inseriscono con il tag img ed il tag img non ha chiusura
<img src=”foto.jpg”>
ATTRIBUTI PRINCIPALI
src indica il nome del file immagine, alt descrive l immagine
<img src=”foto.jpg” alt=”Paesaggio”>
ELENCHI PUNTATI: Si usa il tag ul. Ogni elemento è li
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
ELENCHI NUMERATI: Si usa il tag ol
<ol>
<li>Prima voce</li>
<li>Seconda voce</li>
<li>Terza voce</li>
</ol>
ESEMPIO COMPLETO.
Scrivete questo esempio completo nel vostro blocco note, poi come prima salvate, andate sul browser Google Chrome, o quello che state usando, ed aggiornate la pagina.
<html>
<head>
<title>Lezione 3</title>
</head>
<body>
<h1>Il Web</h1>
<p>Questa è una pagina di esempio </p>
<a href=”https://www.w3schools.com”>Sito di riferimento</a>
<img src=”html.png” alt=”Logo HTML”>
<ul>
<li>Link</li>
<li>Immagini</li>
<li>Elenchi</li>
</ul>
</body>
</html>
ATTENZIONE:
img non ha tag di chiusura
I file immagine devono stare nella cartella giusta
Non dimenticare alt nelle immagini
RIEPILOGO
a crea link
img inserisce immagini
ul e ol creano elenchi