docHTML HTML Markup SGML
download 
Reclamo Transcript
HTML HTML Markup SGML
HTML HTML • HyperText Markup Language • HyperText – Testo contenente link verso altri documenti • Markup Language Markup “In computerized document preparation, a method of adding information to the text indicating the logical components of a document, or instructions for layout of the text on the page or other information which can be interpreted by some automatic system” SGML • Standard Generalized Markup Languages – Metalinguaggio di markup • Linguaggio per definire linguaggi • Principi • Diversi linguaggi di Markup – – – – MS Word per documenti, articoli,… HTML per pagine web LaTeX per articoli di ricerca, formule matematiche, … – Generico – Rapprentazione della struttura logica di un documento – Uso di tags come etichette HTML • Da SGML – Idea di usare tags Principi • Indipendenza dalla piattaforma hardware/software – Difficile in realtà • <foo> </foo> • Dal Web • Formato leggibile… – Links – Media diversi – Indipendenza da una applicazione di editing • Standard aperto Standard • Quali tag? • Come interpretarli? • Relazione tra i vari tag? • Standard definiti dal Worl Wide Web Consortium – www.w3c.org Versioni • HTML 1.0 – 1993 – Mai completato • HTML 2.0 – 1994 • HTML 3.2 – 1996 – …3.0 mancante – Aggiunte di tabelle, applets,… • HTML 4.0 – 1998 • XHTML 1.0 – Versione raccomandata – Conforme ad XML Terminologia • Contenuto del Documento – Le porzioni del file visibili all’utente Sintassi Tag • Tag – Tags racchiusi dai simboli < e > • <html> • Tag – Codice HTML che fornisce informazioni: • sulla struttura logica • il layout – Maggior parte coppie di inizio-fine • <title> Titolo </title> • Attributi – Attributi sono coppie nome/valore associato ai tag • Attributi – Proprietà associate ai tag Tipi di Tag • Document Tag – Identificano le varie porzioni di un documento • Text Structure Tag – Determinano il layout del testo • Style Tag – Informazioni su come visualizzare il testo • Image Tag – Per incorporare immagini • Anchor Tag (ancora) – Per inserire hyperlink • <body bgcolor=“black”> • Valori devono apparire tra “ ” (requisito in XHTML) Document Tag • <html> … </html> – l’inizio e la fine del documento html • <head> … </head> – Intestazione con informazioni che il browser non visualizza. Include tag <title> e <meta> • <title> … </title> – Testo che appare nella sezione del titolo del browser • <body> … </body> – Il contenuto visualizzato nella finestra del browser Documento minimale Commenti <html> <head> <title> Documento minimale </title> </head> <body> Hello World! </body> </html> • <!- - commenti > Structure Tag • Heading: <hx>…</hx> con 1≤ x ≤ 6 – Più piccolo x più grande è il testo Esempio 1 <?xml version = "1.0"?> 2 <!DO CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "ht tp://www.w3.org/TR/xhtml11/DTD/xhtm l11 .dtd"> 4 5 <!-- header.htm l --> 6 <!-- XHTML he aders--> 7 • Paragraph: <p>…</p> – Una linea vuota viene inserita prima del paragrafo • Line break: <br> • Ordered list: <ol> … </ol> • Unordered list: <ul> … </ul> 8 9 10 11 <html xmlns = "http://www.w3. org/199 9/xhtml"> <head> <titl e>Internet and WW W How to Prog ram - Headers</title> </he ad> 12 13 <body> 14 15 <h1>Leve l 1 Header</h1> 16 <h2>Leve l 2 h eader</h2> 17 <h3>Leve l 3 h eader</h3> 18 <h4>Leve l 4 h eader</h4> 19 <h5>Leve l 5 h eader</h5> 20 <h6>Leve l 6 h eader</h6> 21 22 </body> 23 </html> http://www.miosito.com/header.html Unordered list • Tag <ul> </ul> • Tag <li> </li> per gli elementi della lista • Produce una lista con i singoli elementi contrassegnati da un “bullet” – Specificabile usando l’attributo TYPE Ordered List • Tag <ol> </ol> • Tag <li> </li> per gli elementi della lista – L’ordine di default è numerico • Esempio <html> <head> <title> …. </title> </head> <body> <h1>Here is an example of a ordered list </h1> <ol> <li>First item </li> <li>Second item </li> </ol> </body> </html> Esempio <html> <head> <title></title> </head> <body> <h1>Here is an example of a list</h1> <ul> <li>First item </li> <li>Second item </li> </ul> <ul type=“square”> <li>Third item </li> <li>Fourth item </li> </ul> </body> </html> Liste Annidate <html> <head> <title>Lists</title> </head> <body> <h1>To do list</h1> <ol > <li>Pick up dry cleaning <li>Clean the house <ul> <li>Sweep the floors </li> <li>Take out garbage </li> <li>Clean kitchen </li> </ul> <li>Stop by post office <ul> <li>Get stamps <ul> <li>Overseas airmail </li> <li>Domestic </li> </ul> <li>Mail package </li> </ul> </ol> </body> </html> Style Tags • Tags che controllano come viene visualizzato il testo – Violano la sepazione tra contenuto e presentazione – Deprecati ma largamente usati • Soluzione: cascading style sheets (CSS) Logical Display Tags • Descrivono il “tipo” di contenuto – Dette anche “content –based” style tags • • • • • Il browser decide come visualizzare il contenuto <em> enfasi -> corsivo <strong> -> grassetto <code> codice -> font monospace (Courier) … Display Tags • Specificano direttamente come il testo deve apprarire • <i> corsivo • <b> grassetto • <font> font • <u> sottolineato • <center> centrato Esempio <html> <head> <title>Style example</title> </head> <body> <p><center><font color="red">Red text, centered</font></center></p> <p align="center"><font color="red">Red text, centered also</font></p> <p><font color="blue“><strong>Blue text, strong </strong></font></p> <p>Preformatted</p> <pre>I can use space however I want 10 spaces ! </pre> Back to normal.<br> </body> </html> Anchor Tag (hyperlinks) • <a>…</a> usati per creare hyperlinks a: – Altri documenti nello stesso sito – Posizione diversa nello stesso documento – Siti esterni • L’attributo HREF indica la destinazione del link URL relativi • URL completo – Pagina del corso http://www.ce.uniroma2.it/~lopresti/Didattica/RetiWeb/RetiWeb0809/Ret iWeb_frame.htm • Può essere abbreviato in un link – Dalla mia homepage è sufficiente inserire <a href=“url”> Testo cliccabile </a> • Link alla mia homepage <a href=http://www.ce.uniroma2.it/~lopresti/> Tabelle • Tabella è una regione rettangolare – Organizzata in righe e colonne – Definita riga per riga • • • • • <table> per definire una tabella <tr> per definire una riga <td> per definre una cella di una riga <th> header cell, centrata ed in grassetto <caption> Didascalia <a href Didattica/RetiWeb/RetiWeb0809/RetiWeb_frame.htm> – Il resto è aggiunto dal browser usando URL della pagina corrente • Usando la sintassi dei percorsi in Unix Esempio … <table frame=“box” rules=“all”> <caption>This is a table</caption> <tr> <th>First Row</th> </tr> <tr> <td>A1</td> </tr> </table> … Web Application Architettura • 90% delle pagine web sono generate dinamicamente usando input utente – Solo il 10% delle pagine web è statico • Input per le applicazioni web? ⇒HTML forms Web Application Input • Due modalità – All’interno di una URL (metodo GET) – All’interno del body (metodo POST) • Sintassi dati inseriti tramite form – Coppie nome-valore – Simbolo ? metodo GET • File uploaded – Contenuto “multi-part” di un messaggio POST Tag Form • Identifica la porzione della pagina dove sono inserite i tag di input • Definisce l’URL al quale i dati vengono inviati • Definisce la modalità di processamento Input • Nome e attributo valore • Utente può cambiare l’attributo valore – Modalità dipendono dal tipo di input • Text field • Selection list • Radio button Esempio <html> <head> <title>Simple form example</title> </head> <body> <form action="http://www.karrambal.biz/cgi/cgi-bin/echo.pl" method="get"> <input name="field_example” type="text" value="Type here"> <input type="submit"> </form> </body> </html Attributo Type Text • Esempio <input type="text" name="first_name“ value="John Smith" size="20" maxlength="40"> • Attributi – Value: il contenuto iniziale del campo – Size: la dimensione del campo – maxlength: il numero massimo di caratteri accettati Checkboxes • Modo semplice per gestire opzioni si/no <input type="checkbox" name="name“ value="it was checked" checked=“true”> • Attributi – Il valore va incluso tra i parametri se il box è “checked” – Checked indica se il box è checked per default Esempio Esempio <form action="http://www.karrambal.biz/cgi-bin/echo.pl" method="post"> <table width="75%" border="0"> <tr> <td width="25%"><label for="label">Enter query:</label></td> <td width="75%"> <input name="field_example“ id=“label” type="text" value=""> </td> </tr> <tr> <td><label for="checkbox">Local search only:</label></td> <td><input type="checkbox" name="checkbox" value="checkbox" id=“checkbox” checked=“true”></td> </tr> <tr> <td></td> <td><input name="submit" type="submit"></td> </tr> </table> </form> Radio buttons • Permettono di selezionare una opzione in una lista • <input type="radio" name="search_type" id="local” value="local" checked> • Gruppi – Radio button sono organizzati in gruppi – Gruppo è definito dall’attributo nome condiviso Radio button Attributi • Name – Valore condiviso per tutto il gruppo di radio button • Id – Unico per ogni elemento • Identifica il radio button • Value – Il valore del campo se quel radio button viene scelto • Checked – Valore di default Esempio Esempio <form action="http://josquin.cs.depaul.edu/cgi-bin/echo.pl" method="post"> <table width="75%" border="0"> <tr> <td width="25%"><label for="label">Enter query:</label></td> <td width="75%"><input name="field_example" id="label" type="text" value=""></td> </tr> <tr> <td><label for="local">Search type:</label></td> <td>Local: <input type="radio" name="search_type" id="local" value="local" checked> Full: <input type="radio" name="search_type" id="full" value="full"></td> </tr> <tr> <td></td> <td><input name="submit" type="submit"></td></tr> </table> </form> Selection List • Radio button vanno bene per un numero limitato di opzioni • Altrimenti – Menu per selezioni singole – List Box per liste molto lunghe e selezioni multiple • Elemento select – tag <select> …</select> – Menu (attribute size=1) – List Box (attribute size>1) Esempio <td> <select size="1" name="search_type" id="search_type"> <option>Local</option> <option>Full</option> </select> </td> Attributi • Elemento Select – Size è il numero di elementi visualizzati – Multiple per abilitare scelte multiple – Name nome del campo • Elemento Option – Value valore del campo se l’opzione viene scelta – Selected identifica il valore di default Esempio <td> <select size="4" name="search_type" id="search_type" multiple> <option value="local">Local</option> <option value="spec">Special Collections</option> <option value="tech">Technical Reports</option> <option value="press">Press Releases</option> <option value="full">Full</option> </select> </td> Buttons • Type – Submit • Invia la richiesta al server – Reset • Reimposta tutti i valori al valore di default – Action • Per eseguire degli script
