programma del corso di basi di dati€¦ · html • perché si chiama ipertesto ? in geometria, il...
TRANSCRIPT
![Page 1: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/1.jpg)
HTML
Il linguaggio HTML (HyperText Markup Language)
utilizza annotazioni (tag) per descrivere come verrà
visualizzato il documento sul browser di un client.
HTML non è un linguaggio di programmazione ma un
linguaggio di markup in quanto descrive i meccanismi di
rappresentazione (strutturali, semantici o presentazionali) del
testo. (Per chi lo conosce, stesso concetto di LaTeX).
Es: La prossima parola è in <b>neretto</b>
Il browser interpreta le annotazioni traducendole in effetti
grafici
Es: La prossima parola è in neretto
![Page 2: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/2.jpg)
HTML
Un documento HTML descrive un ipertesto, cioè
un documento che contiene:
• Testo.
• Tag che permettono di modificare
l’impaginazione del testo.
• Oggetti grafici (immagini, widget, decorazioni, ecc.)
• Collegamenti ad altri documenti (hyperlink).
![Page 3: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/3.jpg)
HTML
• Perché si chiama IPERtesto ?
In geometria, il concetto di piano è l’astrazione di una
superficie piana nello spazio «reale» a 3 dimensioni.
L’estensione del piano a uno spazio a N dimensioni (N>3) è
qualcosa che mantiene formalmente le caratteristiche
(equazione) del piano ma esiste in uno spazio
multidimensionale. Si chiama IPERpiano.
L’introduzione degli hyperlink verso altri testi è qualcosa
che fa estendere la struttura del testo in nuove dimensioni.
Da qui il nome di IPERtesto…
![Page 4: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/4.jpg)
HTML
Le annotazioni HTML hanno in genere la forma:
<tag> … testo … </tag>
Un documento HTML ha in genere la forma:
<html> <head> … </head> <body> … </body> </html>
![Page 5: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/5.jpg)
I tag HTML possono essere divisi in cinque gruppi:
• Tag di intestazione
• Tag di formattazione fisica
• Tag di strutturazione logica
• Tag di collegamento ipertestuale
• Tag di inclusione di immagini e programmi
HTML
![Page 6: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/6.jpg)
I tag di intestazione vengono utilizzati nella parte di intestazione
(racchiusa fra <head> e </head>) di un documento HTML.
<meta> (metadati descrittivi del contenuto)
<meta name= "author" content= "S. Cagnoni" />
<title> (titolo della pagina, appare sulla barra del browser)
<title> Lista dei testi consigliati </title>
Osservazione
Un tag può prevedere estensioni che si esprimono come
coppie attributo/valore (primo esempio qui sopra).
<tag attr1=val1 attr2=val2 .... attrN=valN> Testo taggato </tag>
Tag di intestazione
![Page 7: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/7.jpg)
Alcuni tag di formattazione
<br> Il testo va a capo
<p align=center> testo </p> Paragrafo allineato al centro
<p align=left> testo </p> Paragrafo allineato a sinistra
<p align=right> testo </p> Paragrafo allineato a destra
<pre> testo </pre> Il testo, nella pagina web, viene presentato così
come è stato scritto nell’editor, cioè con la stessa
formattazione.
<div align=center> testo </div> Sezione di testo allineata al centro
<div align=left> testo </div> Sezione di testo allineata a sinistra
<div align=right> testo </div> Sezione di testo allineata a destra
<blockquote> testo </blockquote> Blocco di testo rientrante
![Page 8: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/8.jpg)
Predefiniti
<b>…</b> Testo in Grassetto
<i>…</i> <em> … </em> Testo in corsivo
<u>…</u> Testo sottolineato
<sup>…</sup> Apice
<sub>…</sub> Pedice
<strike>…</strike> Testo barrato
<small>…</small> Testo piccolo
<marquee>… </marquee> Testo scorrevole
Definiti dall’utente
<font size="10" face="arial" color="red"> … </font>
Formato Caratteri
![Page 9: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/9.jpg)
I tag di strutturazione logica permettono di organizzare la
struttura del documento in funzione della ‘semantica’ dello
stile
Intestazioni
<h1> … </h1> <h2>…</h2> … <h6>…</h6>
diversi livelli di dimensione decrescente (caratteristiche font
predefinite)
Tag specifici
<address> … </address> Indirizzo
<dfn>…</dfn> Definizione
<cite> … </cite> Citazione
<code>…</code> Codice
Tag di strutturazione logica
![Page 10: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/10.jpg)
Tabelle
<table> … </table>
Descritte per righe <tr> </tr>
Intestazioni di colonna contrassegnate da <th> </th>
Elementi contrassegnati da <td> </td>
<table border= "1" > (specifica spessore del bordo esterno)
<tr> <th>Nome</th><th>Cognome</th><th>Città</th> </tr>
<tr> <td>Mario</td> <td>Rossi</td> <td>Parma</td> </tr>
<tr> <td>Paola</td> <td>Bianchi</td> <td>Pisa</td> </tr>
</table>
Separatori
<hr> linea orizzontale
Tag di strutturazione logica
![Page 11: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/11.jpg)
Liste
<ol> … </ol> lista ordinata (numerata)
<ul> … </ul> lista puntata
Elementi contrassegnati da <li> </li>
<ol>
<li> Uno </li>
<li> Due </li>
</ol>
<ul>
<li> Uno </li>
<li> Due </li>
</ul>
Tag di strutturazione logica
1. Uno
2. Due
• Uno
• Due
![Page 12: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/12.jpg)
I tag di collegamento ipertestuale permettono
di accedere al contenuto di altri documenti.
<a href= "http://www.ce.unipr.it" >
DII-Parma </a>
Tag di collegamento ipertestuale
![Page 13: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/13.jpg)
I tag di inclusione di immagine permettono di
inserire delle immagini in un documento.
<img src=
"http://www.ce.unipr.it/images/foto.gif"
/>
Tag di inclusione di immagini
![Page 14: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/14.jpg)
<HTML>
<BODY>
<b>Marco Rossi </b><br>
PhD Student <br>
Università di Parma<br>
<IMG SRC= "marco.gif"><hr>
Per scaricare la mia tesi premi qui sotto<br>
<a href=
"ftp://ftp.disi.unige.it/RossiM/tesi.pdf">
<i>TESI</i></a>
</BODY>
</HTML>
Esempio
![Page 15: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/15.jpg)
Marco Rossi
PhD Student
Università di Parma
Per scaricare la mia tesi premi qui sotto
TESI
Esempio
![Page 16: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/16.jpg)
• Si possono creare pagine che permettono all’utente di
immettere dati attraverso FORM (moduli da compilare).
• I dati raccolti nel form sono gestiti da programmi (script o programmi eseguibili) residenti sul server.
• In generale, tali programmi devono generare un output
consistente in una pagina descritta in codice HTML: il
browser interpreta il flusso di dati restituito dal server
come codice HTML e lo interpreta di conseguenza.
Interazione con il server mediante form
![Page 17: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/17.jpg)
Un tipico esempio di form può essere utilizzato come
interfaccia ad un motore di ricerca.
Inviando dati mediante questo form, ecco cosa succede:
• Le parole chiave inserite vengono trasmesse a un
programma residente sul server.
• Il programma interroga un database.
• Il programma crea un flusso dati verso il client con i risultati
formattati in codice HTML.
• A partire da quel codice il browser compone la pagina web
che viene mostrata all’utente.
Interazione con il server mediante form
![Page 18: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/18.jpg)
Interazione con il server mediante form <html>
<head>
<title>La Mia Pagina</title>
</head>
<body>
<form name="myform"
action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Inserisci qui il tuo nome!">
<br> <input type="submit" value="Mandami il tuo nome!"> <br>
</div>
</form>
</body>
</html>
![Page 19: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/19.jpg)
La gestione dei form in PHP avviene in due fasi: 1. Preparazione del form HTML 2. Preparazione dello script PHP Un form HTML si crea mediante il tag form con molti possibili tipi di
input. Il tag form è di questo tipo:
<form action="script.php" method="post">
</form>
L’attributo più importante è action, che indica il nome dello script che
gestirà i dati inseriti col form. L’attributo method è quasi sempre settato
a POST (v. seguito). Fra i tag di apertura e chiusura del form si possono inserire text box, radio button, menu a tendina, check box, ecc. L’attributo name nei tag di
input indica il nome con cui lo script PHP farà riferimento al dato inserito dall’elemento di input.
![Page 20: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/20.jpg)
Scelta del metodo (http://www.w3.org/2001/tag/doc/whenToUseGet.html) Il metodo GET invia i dati allo script in forma di una serie di coppie nome-valore aggiunte alla URL.
Esempio: http://www.dmcinsights.com/script.php?name=Homer&gender=M
Vantaggi di GET: ● La pagina può essere inserita come bookmark nel browser (è una
URL). ● E’ possibile utilizzare il pulsante Back del browser per tornare alla
pagina che genera l’input come GET, o ricaricarla senza problemi (questo non accade con POST).
Svantaggi di GET: ● I dati sono visibili e limitano quindi la riservatezza dei dati stessi; i dati
trasmessi con POST sono invisibili. ● Il numero di dati che può essere trasmesso è limitato (nessun
problema con POST).
![Page 21: Programma del Corso di Basi di Dati€¦ · HTML • Perché si chiama IPERtesto ? In geometria, il concetto di piano è l’astrazione di una superficie piana nello spazio «reale»](https://reader035.vdocuments.pub/reader035/viewer/2022081400/60ac2337f0f2fc532930ab17/html5/thumbnails/21.jpg)
Gestione dei dati tramite script PHP
Una volta preparato il form HTML, è necessario predisporre lo script PHP per gestirlo.
Lo script PHP:
• Riceve i dati dal form
• Li elabora
• Restituisce al browser un flusso di codice HTML attraverso opportune istruzioni di output.
Il metodo tradizionale di gestione di form (CGI) richiedeva che lo script facesse il parsing dei dati: PHP inserisce le informazioni in variabili speciali.