HTMLgallinigenova.altervista.org/html20.pdf · ovvero di formattazione. E' un linguaggio con...
13
Breve introduzione all' Pablo Genova [email protected] I. I. S. “Angelo Omodeo” Mortara Indirizzo Tecnico-Economico A. S. 2019 – 2020 HTML HTML
Transcript of HTMLgallinigenova.altervista.org/html20.pdf · ovvero di formattazione. E' un linguaggio con...
Breve introduzione all'
Pablo Genova [email protected]
I. I. S. “Angelo Omodeo” Mortara Indirizzo Tecnico-Economico A. S. 2019 – 2020
HTMLHTML
Come abbiamo visto nelle lezioni precedenti il tipico (non l'unico!) linguaggio in cui è scritto un ipertesto è l'HTML = Hyper Text Markup Language
HTML più che un linguaggio di programmazione è un linguaggio di Markup ovvero di formattazione. E' un linguaggio con comandi pensati per la formattazione (=visualizzazione) ottimale degli ipertesti.
Noi vedremo soltanto la struttura tipica di un sorgente HTML e i comandi principali.
Sarà richiesta la conoscenza operativa dei più semplici comandi
Un “assaggio” di HTMLUn “assaggio” di HTML
Codice sorgentescritto in HTML
file blabla.html
Il browser lointerpreta
Livello del programmatore Processo svoltoin automatico dal computer
Livello dell'utente
Viene visualizzatol'ipertesto
Cosa avviene quando apriamo una pagina web?
Se mai vi capiterà di progammare, incontrerete spesso “processi” simili
Struttura del documento HTML (il sorgente)Struttura del documento HTML (il sorgente)I comandi, detti tag (= marcatori), sono compresi tra < e >
Curiosità: HTML è stato inventato da un fisico, Tim Berners-Lee, e i fisici usano spesso quei simboli insieme, noti in Meccanica Quantistica come bra “< l”e ket “l >” dato che bra+ket = bra[c]ket = parentesi
<! questo è un commento>
<html> si inizia ;-)
questo è lo header:informazioni di servizio
che NON sono visualizzatesi pronuncia
\ˈhe-dər\ (con la 'e')
Sotto la “testa” c'è un “corpo”
tra <body> e </body> ci mettiamo
I'ipertesto da visualizzare
Abbiamo già imparato i comandi<head> <body> <!>
It's very simple, isn't it?
And now ... we can play with HTML!And now ... we can play with HTML!
CONOSCENZA OPERATIVA: SAPER FARE QUESTO SU ALTRI ESEMPI SIMILI, MA NON UGUALI A QUESTO
Creiamo con un editor un file prova.html
<html><head><title>Esercizio in html</title></head><body><h1>Prova testo in html</h1><!questo è un commento>
<i>testo in corsivo </i><b>testo in grassetto</b><u>testo sottolineato</u>ho voglia<br />di <br />andare <br />a <br />capo!<br />mettiamo un link a google:<br /><a href="http://www.google.it">cliccami</a>
</body></html>
output con Firefoxcodice sorgente
Abbiamo già imparato tanti comandi!Abbiamo già imparato tanti comandi!
Oltre a <head> <body> <!>
comando uso
<h1> … </h1> per il titolo
<i> … </i> testo in corsivo[in inglese italics]
<b> … </b> testo in grassetto[in inglese bold]
<u> … </u> testo in sottolineato[in inglese underlined]
<br /> vai a capo, break
ATTENZIONE A NON SBAGLIARE LA
SINTASSI!
<a href="http://www.google.it">cliccami</a> inserisci link a google il link si chiama cliccami
Il numero 1 indica la dimensione e il livello del titolo/sottotitolo, ci sono h1, h2, …,h6
Esercizi (cose che bisogna saper Esercizi (cose che bisogna saper farefare))Prova a creare il tuo sorgente html con i tags che abbiamo visto,
prova a cambiare colore allo sfondo o ai caratteri, prova ad inserire una lista ordinata o non ordinata
Colori
<body bgcolor = “FF 00 00”> crea un background color rosso colore di sfondo rosso
<font color="00 00 FF"> crea un carattere di colore blu
Il codice dei colori è RGB Red Green Blue, numeri esadecimali da 00 a FF (cioè da 0 a 255 in decimale! 255= (16 x 16)-1 = FF16) si usano sfumature di 256 colori decimali (cioè 10016 colori esadecimali, cifra tonda in esadecimale)
bianco è “FF FF FF” nero è “00 00 00” verde “00 FF 00” e così via(nero= nessuna luce, bianco = somma di tutte le luci)
Liste
<ul><ul><li> Torino </li> <li> Milano </li> <li> Napoli </li>
</ul>
<ol><li> Venezia </li><li> Roma </li><li> Firenze </li>
</ol>
Lista ordinataordered list ol
Lista non ordinataunordered list ul
li = list item li = list item
Esercizi (cose che bisogna saper Esercizi (cose che bisogna saper farefare))
Esempio di gestione delle immagini
<img src = “mia_immagine.jpg” alt =“manca l'immagine!”>
Il comando img presenta due attributi indispensabili: ● l'attributo src che sta per source: → indicare come si chiama l'immagine, il percorso relativo (o assoluto se è in un'altra directory)● l'attributo alt che sta per alternate: → stringa di testo che appare se NON è presente l'immagine (alternativa all'immagine)
Altri attributi opzionali che possono essere utilizzati (prova a verificare il loro funzionamento):
ATTENZIONE: GLI ATTRIBUTI SONO SEMPRE TRA VIRGOLETTE con sintassi nomeAttributo=“valoreAttributo”
<img src = “mia_immagine.jpg” alt =“manca l'immagine!” height =“400” width =“500” >
larghezza 500 pixelsaltezza 400 pixels
PROVA!PROVA!
Nel caso delle tabelle l'essenziale è sapere il comando di apertura delle tabelle <table> l'apertura delle righe <tr> r → row l'inserimento delle colonne di intestazione <th> h → header e quelle normali dei dati <td> d → data
Esercizi (cose che bisogna saper Esercizi (cose che bisogna saper farefare))Esempio di gestione delle tabelle
<table><tr>
<th> Piatto </th><th> Prezzo </th>
</tr><tr>
<td> Pizza alla diavola </td><td> 7 € </td>
</tr><tr>
<td> Fritto misto alla piemontese </td><td> 15 € </td>
</tr></table>
PROVA!PROVA!apri tabella
chiudi tabella
apri riga = table row tr
apri e chiudi due colonne di header intestazione →
table header thchiudi riga
apri e chiudi due colonne di dati dati → table data td
altri dati
con gli attributi si posso creare vari tipi di tabelle, stili, bordi etc
Tabella con colonne e righe “multiple”Tabella con colonne e righe “multiple” NNEEWW
Per fare una tabella di questo tipo bisogna usare gli speciali comandi rowspan e colspanAd esempio la seconda riga è codificata così:<tr><th>I</th><td rowspan="3">Economia Aziendale</td><td>Diritto</td><td >Economia Politica</td><td colspan="2">Economia Aziendale</td></tr>
span lungo la riga (row) di 3 righerowspan = 3
span lungo la colonna (col) di 2 colonne colspan = 2
Wow!
Codice completo della tabella precedenteCodice completo della tabella precedente<table border=”1”><tr><th>Ora</th><th>Lunedì</th><th>Martedì</th><th>Mercoledì</th><th>Giovedì</th><th>Venerdì</th></tr><tr><th>I</th><td rowspan="3">Economia Aziendale</td><td>Diritto</td><td >Economia Politica</td><td colspan="2">Economia Aziendale</td></tr><tr><th>II</th><td rowspan="2">Matematica</td><td rowspan="2">Educazione fisica</td><td colspan="2" align="center">Informatica</td></tr><tr><th>III</th><td colspan="2"align="center" >Italiano</td></tr><tr><th>IV</th><td>Storia</td><td>Italiano</td><td>Italiano</td><td colspan="2" align="center">Economia Politica</td></tr></table>
<th> table header è in grassetto
align =“center”attributo per centrare
la scritta
Osserva con attenzione l’uso di rowspan e colspan
RICHIESTO IN VERIFICA!
NNEEWW
Cenni agli effetti con Cenni agli effetti con
Apri il sito:
http://gallinigenova.altervista.org/sliderf2.htmlhttp://gallinigenova.altervista.org/sliderf1.html
Cliccando su Foto Successiva --- > Foto Precedente < --- puoi vedere gli effetti tridimensionali, equivalenti alle animazioni di Power Point
Come si fanno ad ottenere effetti simili ?
Si introducono nel codice html una o più chiamate a funzioni del linguaggio JAVA che trasformano in 3D le vostre immagini
Se guardi il codice sorgente, vedrai che tali funzioni sono chiamateda un comando <script> che carica le funzioni (script) java da una sottocartella apposita (nel nostro caso slider_files)<script type="text/javascript" src="slider_files/jquery_002.js"> </script>
file .js java con le funzioniHTML + JAVA !!
Per capire bene la funzione bisogna saper programmare in Java, tuttavia a volte è sufficiente utilizzare una funzione già esistente adattandola alle proprie esigenze, per esempio nello script c’era:
orientation : 'v',cuboidsCount : 3
→ orientamento verticale → trasforma in verticale
→ affetta in tre parti l’immagine
orientation : 'h',cuboidsCount : 5
→ orientamento horizontal → trasforma in orizzontale
→ affetta in cinque parti l’immagine
Adattando un codice preesistente posso ottenere molti effetti senza doverlo riscrivere da zero
→ sto caricando una libreria esterna
Ulteriori comandi li puoi trovare in rete (o sul libro)Ulteriori comandi li puoi trovare in rete (o sul libro)
http://www.w3schools.com/tags/
Prova ad inserire tabelle, figure, frames, testi in movimento, collegamenti, bottoni, effetti speciali e quant'altro... prova a cambiare le opzioni dei vari comandi e vedere cosa succede, stai costruendo il tuo primo sito web ;-)!
Verifica anche le eventuali dipendenze dal browser(taluni comandi funzionano solo su alcuni browsers o possono avere effetti diversi a seconda del browser che stai utilizzando → ottimizzazione dei siti)
http://www.htmlcodetutorial.com/quicklist.html
… … e tanti altri siti web on line dedicati all'htmle tanti altri siti web on line dedicati all'html
