Prepara i tuoi esami
Studia grazie alle numerose risorse presenti su Docsity
Ottieni i punti per scaricare
Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium
Guide e consigli
Prepara i tuoi esami
Studia grazie alle numerose risorse presenti su Docsity
Cerca documenti
Prepara i tuoi esami con i documenti condivisi da studenti come te su Docsity
Cerca documenti Store
I migliori documenti in vendita da studenti che hanno completato gli studi
Video Corsi
Preparati con lezioni e prove svolte basate sui programmi universitari!
Quiz
Rispondi a reali domande d’esame e scopri la tua preparazione
Ottieni i punti per scaricare
Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium
Community
Chiedi alla community
Chiedi aiuto alla community e sciogli i tuoi dubbi legati allo studio
Classifica università
Scopri le migliori università del tuo paese secondo gli utenti Docsity
Guide Gratuite
I nostri eBook salva studente
Scarica gratuitamente le nostre guide sulle tecniche di studio, metodi per gestire l'ansia, dritte per la tesi realizzati da tutor Docsity
Glossario HTML e CSS, Appunti di Tecniche E Linguaggi Di Programmazione
Questo documento contiene le definizioni degli elementi e tags principali dei linguaggi HTML e CSS.
Tipologia: Appunti
2019/2020
1 / 35
In offerta
Documenti correlati
Anteprima parziale del testo
Scarica Glossario HTML e CSS e più Appunti in PDF di Tecniche E Linguaggi Di Programmazione solo su Docsity! Definizioni, elementi e tags principali HTML Lezione 1 Informazione: è costituita da: 1-struttura= struttura gerarchica e informazioni sulla composizione del contenuto (distinzione tra titolo, paragrafo, capitolo etc); 2- contenuto informativo da visualizzare; 3-rappresentazione=l’aspetto, come viene mostrata al lettore. Marcatura: qualsiasi tipo di codice inserito in un testo in forma elettronica. Esistono 2 tipi di marcatura: • procedurale= specifica come processare un documento (PDF, formato Ms Word) • descrittiva= descrive la struttura logica del documento. Garantisce una corretta separazione tra struttura logica e rappresentazione (HTML, SGML, XML). Il markup permette la strutturazione di un un file in formato testo in componenti logiche (elementi) etichettandole in modo utile. Etichette/Tags: nomi degli elementi. Specificano il tipo di dato contenuto nell’elemento a cui si riferisce. Vengono inserite nel documento come speciali sequenze di caratteri e indicate da due parentesi angolari <...>. Esistono 2 tipi di tag: • formattazione: servono per cambiare l’aspetto ad una parte di testo, es. <font> • semantici : danno un “significato” ad una parte di testo, es. <a> indica un link. Attributi dei tags: I tag HTML possono essere corredati di uno o più attributi, che servono per meglio specificare la funzione o la tipologia dell’elemento, per memorizzare dati o per arricchire di significato il contenuto. Un tag con attributi si scrive in questo modo: <tag attributo1="valore1" attributo2="valore2"> Attributi comuni: • id: Serve ad associare un identificatore univoco ad un elemento. Una volta assegnato un identificatore, non si dovrà assegnarlo a nessun altro elemento della pagina. • c lassi: Serve a stabilire che l’elemento appartiene ad una serie di “classi”. torneremo sull’argomento, per ora ci basti sapere che possiamo applicare a tutti gli elementi di una classe proprietà simili. Possiamo inserire quante classi vogliamo, tutte separate da uno spazio. Es. <p class="saluto testo-chiaro">ciao</p>, ha due classi: “saluto” e “testo-chiaro”. Elemento: un blocco che costituisce una pagina HTML oppure qualsiasi cosa che va da una tag di apertura ad un tag di chiusura. Sono costituiti da 4 parti: 1-tag di apertura= definisce l’inizio dell’elemento; 2-attributi dell’elemento e i rispettivi valori; 3- il contenuto informativo da visualizzare; 4- tag di chiusura=indica la fine dell’elemento. Tutti gli elementi HTML sono degli elementi annidati cioè elementi che contengono a loro volta altri elementi. Gli elementi che non hanno contenuto sono definiti elementi vuoti e non hanno un tag di chiusura, come ad esempio l’elemento <br>. Esempio: The <html> element defines the whole document. It has a start tag <html> and an end tag </html>. The element content is another HTML element (the <body> element). Linguaggi di Marcatura: Sono un insieme di convenzioni per la marcatura di un testo. Descrivono i meccanismi di -strutturazione (struttura logica) e - rappresentazione (aspetto) di un testo. Devono specificare: • quali tag sono permesse; • quali tag sono obbligatorie; • come vanno composte le marcature; • come distinguere tra marcatura e testo. (Può specificare il significato di una marcatura). Non è un linguaggio di programmazione in quanto è solo un sistema formale per lo scambio e la pubblicazione di informazioni in formato testo in modo strutturato. Esempi di linguaggi di marcatura: Wiki Markup o wikitext per Wikipedia, Latex (utilizzato per la composizione di testi, soprattutto scientifici ma anche letterari, che permette di ottenere risultati professionali). • WYSINWYG (What You See Is What You Get) Quello che vedi è quello che ottieni Microsoft Word, LibreOffice… Nel 1999 viene certificata la versione 4.01, portando grandi migliorie, in particolare la separazione del livello di presentazione (quella che descrive gli aspetti grafici). La presentazione viene descritta con i CSS. Nel 2000 il W3C raccomanda l’utilizzo di XHTML e nel 2004 decide di chiudere lo sviluppo dell’HTML. Nel 2004 si forma il WHATWG (Web Hypertext Application Technology Working Group), deciso a continuare lo sviluppo dell’HTML. Tra il 2004 - 2006, il WHATWG ottiene il supporto dei maggiori browser. Nel 2006 il W3C annuncia il suo supporto al WHATWG e dal 2007. Nel 2014 viene standardizzato l’HTML5 dal W3C. Lezione 3 Elementi Block Level: Gli elementi block-level sono elementi che vengono disposti verticalmente e cominciano sempre nuove linee. Tra i più comuni, senza dubbio il <div> è l’ elemento block-level per eccellenza. Altri: • <div> = contenitore generico di altri elementi block level HTML: definisce una divisione o una sezione di un documento; è spesso usato con i CSS per configurare una pagina. Esempio: <!DOCTYPE html> <html> <body> <p>This is some text.</p> <div style="color:#0000FF"> <h3>This is a heading in a div element</h3> <p>This is some text in a div element.</p> </div> <p>This is some text.</p> </body> </html> • <h1> - <h6> • <p> Elementi Inline: Un elemento inline non comincia una nuova linea e prende solo la larghezza che gli è necessaria. Esempi: • <span> = contenitore generico che raggruppa altri elementi inline HTML. Esempio: <!DOCTYPE html> <html> <body> <p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p> </body> </html> • <a> • <img> Elenco elementi e tags: Basic HTML: Intestazione= <!DOCTYPE> : Contiene una serie di informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate all'interno dello stesso (meta-informazione): • tipo di HTML supportato • titolo della pagina • parole chiave ( per essere trovato dai motori di ricerca ). <html> definisce un documento html. <title> definisce un titolo per il documento, per un paragrafo etc. Usato per tooltips. <body> definisce il corpo del documento. <h1>–<h6> rappresentano i sei livelli di rappresentazione di un titolo di una sezione. <h1> è il livello più alto, mentre <h6> è il più basso; <p> definisce il paragrafo di un testo. I paragrafi sono generalmente rappresentati come un blocco visuale di testo separato dai blocchi adiacenti da uno spazio bianco. I paragrafi sono elementi block-level. <br> produce una interruzione di linea. E’ utilizzato per mandare a capo il testo. Aggiungendo più elementi <br> si ottengono più linee di separazione. The poem problem: Nel caso della scrittura di un testo molto lungo e che vada molte volte a capo l’utilizzo dell’elemento <br> diventa obsoleto. Si usa, quindi un elemento… <pre> Pre Formatted Text che definisce un testo pre-formattato. Il testo all’interno del tag <pre> viene rappresentato in un font di dimensione fissa (generalmente Courier) e preserva sia gli spazi e le linee. <hr> E’ usato per separare contenuti in un documento attraverso una linea di separazione. Definisce un cambio tematico. < !--...-- > Definisce un commento. Non vengono mostrati all’interno del documento. Formattazione del Testo: Esattamente come avviene con un editor di Word (o simili), alcuni tags permettono di formattare il testo utilizzando per esempio grassetto o il corsivo. Formatting tags: • <i> rappresenta una porzione di testo che differisce da quello originale. Per esempio termini tecnici, frasi in una lingua straniera ed altro. Il testo viene rappresentato in corsivo. • <b> rappresenta una porzione di testo che differisce dall’originale e che deve essere messo in evidenza. Il testo viene rappresentato in grassetto. • <del> rappresenta una porzione di testo che è stata rimossa dal documento. Questo elemento viene spesso rappresentato con una linea centrale sopra il testo. • <ins> rappresenta una porzione di testo che è stata inserita nel documento. • <blockquote> indica una citazione di un testo. E’ generalmente visualizzato con una indentazione (rientro di una linea di testo). Un indirizzo della citazione può essere fornita utilizzando l’attributo cite. • <time> defines a human-readable date/time. This element can also be used to encode dates and times in a machine-readable way so that user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results. Viene utilizzato con l’attributo datetime. L’ora non viene riportata nel documento. <a href=’Immagini salvate/ProfilePicture.jpg’> <img src=’Immagini salvate/ProfilePicture.jpg’ alt=’Immagine profilo’ widht=”300” height=”30”</img> </a> Informazioni di contatto: <address> rappresenta informazioni di contatto; If the <address> element is inside the <body> element, it represents contact information for the document. If the <address> element is inside an <article> element, it represents contact information for that article. The text in the <address> element usually renders in italic. Most browsers will add a line break before and after the address element. Styles and Semantics: <div> * <span> * <section> defines sections in a document, such as chapters, headers, footers, or any other sections of the document. <article> It specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. Multimedia: I multimedia nel web sono suoni, musica, video, filmati e animazioni. Le pagine web spesso contengono contenuti multimediali di diverso tipo e formato. <video> serve per incorporare un video all’interno di un documento. L’attributo controls serve per far comparire i controlli. All’interno dell’elemento ne va annidato un altro chiamato <source> con l’attributo src che indicherà l’indirizzo del media e type indicherà l’estensione del file. <video width=”560” height=”315” controls> <source src=’video/myvideo.mp4” type=”video/mp4”> </source> Nota: Per inserire un video su Youtube, bisogna andare all’indirizzo del video, selezionare Condividi > Codice da incorporare > copiare il codice > incollare il codice nella pagina HTML. Lezione 4 – HTML5 HTML5: è un linguaggio di markup per la strutturazione delle pagine web ideato dal World Wide Web Consortium (W3C) nel 2014. L’HTML5 nasce dalla necessità di sviluppare e gestire strutture di contenuto sempre più elaborate e ricorrenti, con una struttura ben definita, come ad esempio i blog (informazioni di testata, menu di navigazione, elenchi di articoli, testo a piè di pagina etc.). L’HTML5 nasce per risolvere questi problemi, offrendo agli sviluppatori web un linguaggio pronto ad essere plasmato secondo le più recenti necessità, sia dal lato della strutturazione del contenuto che da quello dello sviluppo di vere e proprie applicazioni. l’HTML è sempre più la base di vere e proprie applicazioni web come per esempio Google Docs o Google Maps. Cosa introduce? Introduce novità relative a: • alla gestione dei flussi video e audio (streaming), • all’utilizzo di applicazioni web offline, • alla memorizzazione locale dei dati, • al drag and drop e • all’utilizzo di informazioni georeferenziate. Web semantico: Termine ideato dal suo stesso ideatore Tim Berners-Lee. Con quest’ultimo si intende la trasformazione del Web in un ambiente in cui tutti i documenti pubblicati (pagine HTML, file, immagini etc,) siano associati a informazioni e dati che ne specificano il contesto semantico (metadati), in un formato adatto all’interrogazione e all’interpretazione (es. tramite motori di ricerca). In HTML5 si è cercato di dare un senso alla semantica. Infatti, sono stati introdotti diversi nuovi tag semantici per semplificare il funzionamento di vari motori di ricerca*: SEO - Search Engine Optimization: ottimizzazione per i motori di ricerca. Nel linguaggio di Internet, con questo termine si indicano tutte le attività volte a migliorare la visibilità di un sito web sui motori di ricerca e a migliorare o mantenere il posizionamento nelle pagine di risposta alle interrogazioni degli utenti del web. A sua volta, il buon posizionamento di un sito web nelle pagine di risposta dei motori di ricerca è funzionale alla visibilità dei prodotti/servizi venduti. I tag semantici aggiunti per semplificare la strutturazione di una pagina: • Intestazione <header> è un contenitore per altri elementi. Non va confuso con quella che è la testata/intestazione principale di un documento (<h1>...<h6>). Si utilizza come elemento di ausilio alla navigazione o per elementi introduttivi. • Piè di pagina <footer> deve contenere informazioni sulla sezione che lo contiene come: ➔ i dati di chi ha scritto i contenuti ➔ collegamenti ai documenti correlati; ➔ i dati di copyright; <footer> <small>©2011 Autore contenuto. Design by Designer sito </small> </footer> • Navigazione <nav> Rappresenta una sezione di una pagina che contiene link (collegamenti) ad altre pagine esterne o a parti interne dello stesso documento; quindi, in breve, una sezione contenente link di navigazione. Nota: NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links. <nav> <a href="/html/">HTML</a> <a href="/css/">CSS</a> <a href="/js/">JavaScript</a> <a href="/jquery/">jQuery</a> </nav> <section> definisce una sezione generica di un documento o di un’applicazione. <article> rappresenta una sezione autonoma in un documento, pagina, applicazione o sito; infatti è potenzialmente ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte o interamente in diverse pagine. Le interfacce che consentono a JavaScript di rapportarsi con un browser sono chiamate DOM (Document Object Model in italiano Modello a Oggetti del Documento). Molti siti web usano la tecnologia JavaScript lato client per creare potenti applicazioni web dinamiche. Un uso principale del JavaScript in ambito Web è la scrittura di piccole funzioni integrate nelle pagine HTML che interagiscono con il DOM del browser per compiere determinate azioni non possibili con il solo HTML statico: controllare i valori nei campi di input, nascondere o visualizzare determinati elementi, ecc. Da Wikipedia Lezione 5 – CSS (Cascating Style Sheets) CSS: Sono un linguaggio di stile per i documenti web. Istruiscono un browser o un altro programma su come il documento debba essere presentato all’utente. Cosa gestisce: font, colori, immagini di sfondo, layout, posizionamento delle colonne o di altri elementi sulla pagina, etc. vs HTML dovrebbe essere visto semplicemente come un linguaggio strutturale. Mentre il CSS arricchisce l’aspetto visuale e la presentazione di una pagina web. Separare il contenuto dalla presentazione. Com’è fatto un CSS: è formato da: • un selettore: Indica l’elemento/i che si vuole modificare/a cui si deve applicare lo stile/la regola. Esistono diversi tipi di selettori* • un blocco delle dichiarazioni formato a sua volta da: una dichiarazione formata rispettivamente da: ✗ una proprietà: indica cosa si vuole modificare di quell’elemento. ✗ un valore: indica come si vuole modificare la proprietà dell’elemento. I diversi selettori: • Selettori di tipo: seleziona tutti gli elementi di uno specifico tipo basandosi sul nome del tag. es. seleziona tutti gli elementi di tipo intestazione (h1 – h6) oppure tutti gli elementi ti tipo paragrafo (p). Per esempio usando h1 come selettore si selezionano tutti gli elementi <h1> h1 { color: red; } Nell’esempio tutto il contenuto di tutti gli elementi h1 saranno di colore rosso. • selettori di classe: questo selettore utilizza l’attributo globale classe per selezionare l’elemento. Seleziona solo gli elementi a cui l’utente ha precedentemente assegnato una classe* Si scrive . seguito dal nome della classe. .paragrafi_speciali { color: red; } Nell’esempio tutto il contenuto degli elementi con classe paragrafi_speciali diventerà rosso. • selettori di ID: questo selettore utilizza l’attributo globale id di un elemento per selezionarlo. Lo stile/la regola viene applicato/a al solo elemento. Si scrive # seguito dall’ID dell’elemento. #materiale { color: red; } Nell’esempio tutto il contenuto dell’elemento con id materiale diventerà rosso. Come inserire un CSS: esistono 3 metodi differenti: 1. Foglio esterno: E’ possibile definire gli stili su un foglio esterno (con estensione .css) e importarlo dall’intestazione. In questo caso le regole vengono applicate a tutte le pagine. <head> <link rel="stylesheet" type="text/css" href="il_mio_foglio_di_stile.css"> </head> 2. foglio interno alla pagina: I fogli interni di stile vengono definiti all’interno del tag speciale <style>, sempre nella sezione dell’ <head>. <head> <style> h1 { color: green; margin-left: 40px; } </style> </head> 3. in linea all’interno dell’elemento: Le regole di stile possono essere inserite direttamente all’interno di un elemento. In questo caso la regola si applica solo in quell’elemento. <h1 style="color:blue; margin-left:30px;">Titolo del sito</h1> Nota: Inserendo lo stile all’interno dell’elemento la separazione tra struttura e rappresentazione non è marcata! Colori: I colori nel CSS vengono definiti principalmente in 3 modi : • Nome del colore (da una lista pre esistente): <h1 style=”color:blue”></h1> • RGB (Red Green Blue): <h1 style=”color:rgb(255,255,0)”></h1> • HEX (codice esadicimale): <h1 style=”color:#0000FF”></h1> Background: Con i CSS è possibile definire il background di un elemento, in particolare è possibile personalizzare: • colore • immagine • ripetizione dell’immagine • posizione Altezza e larghezza di un elemento: tramite le proprietà width e height è possibile definire rispettivamente larghezza e altezza di un elemento. div { height: 200px; width: 50%; background-color: powderblue; } The Box Model: Un elemento HTML può essere considerato come una scatola che contiene al suo interno rispettivamente: • un contenuto dove appaiono testo, immagini etc; • il padding: uno spazio trasparente che circonda il contenuto; • un bordo che circonda l’elemento (quindi contenuto e padding) e • un margine: uno spazio trasparente che si trova attorno all’elemento (al di fuori del bordo). Per questo motivo, nella costruzione del design e del layout di una pagina web si parla di Box Model. *Layout – in informatica: l'impaginazione e la struttura grafica di un sito web o di un documento (come quelli generati da un programma di videoscrittura). Formattazione del testo: i CSS sono utilizzati anche per la formattazione del testo e ne definiscono: • il font (carattere); • la grandezza; • il colore e • la posizione. Le proprietà utilizzate sono: • color per il colore; • text-align per l’allineamento orizzontale; • text-decoration per la decorazione del testo come la sottolineatura o la cancellazione. • White-space: utilizzata per la gestione dello spazio bianco. p { white-space: pre; } Il browser manterrà gli spazi a capo del testo originale ma non quelli bianchi (miglioramento del tag <pre>). Per la formattazione del font si utilizzano le proprietà: • font-family: sceglie il tipo di font da utilizzare (Arial, Comic Sans MS, Courier etc.); • font-size: definisce la grandezza del font (12, 16, 28 etc.); • font-style: definisce lo stile del font (grassetto, Italic etc.). Formtazzione liste <ol> e <ul>: è possibile modificare lo stile delle liste <ul> e <ol> e in particolare è possibile scegliere il tipo di marker utilizzato tramite la proprietà list-style- type: ● list-style-type: circle; cerchi list-style-type: square; quadrati IV list-style-type: upper-roman; numeri romani a) list-style-type: lower-alpha; lettere Formattazione tabelle: è possibile modificare lo stile delle tabelle profondamente, cambiando colore, allineamento del testo, padding e altro. Per aggiungere i bordi si utilizza : table { border-collapse: collapse; } table, th, td { border: 1px solid black; } La proprietà border-collapse serve ad evitare che i bordi tra ogni casella si ripetano due volte. Lezione 6 – CSS Layout Elementi in blocco o in linea: • Gli elementi a blocco: occupano l’intera linea in orizzontale, quindi mandano a capo l’elemento successivo. I figli degli elementi a blocco possono essere elementi in linea o a blocco. Un elemento a blocco prende sempre la larghezza massima a disposizione. Impostando una larghezza ad un elemento a blocco questo prenderà solo lo spazio impostato. Se a questo si aggiunge la proprietà margin e si imposta ad auto, l’elemento si posizionerà al centro. Quando il browser avrà schermi più piccoli potrà decidere di impostare una larghezza inferiore migliorando la visibilità e il layout del sito su device più piccoli, tramite la proprietà max-width (larghezza massima). • Gli elementi in linea non occupano interamente lo spazio in orizzontale, quindi l’elemento successivo si affianca. I figli degli elementi in linea sono anche essi elementi in linea. Ogni elemento HTML ha di default un valore che decide se esso sia in linea o a blocco. Il valore di default di ogni elemento può essere sovrascritto tramite una delle più importanti proprietà dei CSS: display. Li { display:inline oppure display:block { position è la proprietà fondamentale per la gestione della posizione degli elementi. Web Tripartito: 1. HTML: cosa devo significare? (Struttura); 2. CSS: come devo apparire? (Rappresentazione); 3. JS: cosa devo significare? (Comportamento); Definire il comportamento di un documento significa definire come si deve comportare una pagina web al verificarsi di un determinato evento. JavaScript: è uno dei linguaggi di programmazione più usati al mondo. Nasce appositamente per la programmazione web. I tipi di dati trattati da JS sono: • numeri: interi (1,2,3) o reali (1,565) • stringhe: “questa è una stringa di testo” • booleani: (vero o falso) Il DOM: (Document Object Model) è una struttura dati ad albero che rappresenta il contenuto di un documento strutturato. In particolare tale modello è utilizzato nei browser per rappresentare il contenuto delle pagine web. Nel browser viene fornito l'oggetto document, utilizzabile in JavaScript che corrisponde alla radice del DOM, ovvero il nodo in cima all'albero. Manipolare il DOM: tramite il DOM si può: ✔ Esplorare la struttura di un documento ✔ Cercare un elemento specifico ✔ Modificare elementi ✔ Creare nuovi elementi JS Supporta tutte le strutture DOM di HTML. Con Javascript è possibile eseguire alcune operazioni di manipolazione del DOM (quindi della pagina web). Come inserire JavaScript: Per includere codice javascript all’interno di una pagina web si utilizza il tag <script> Per importare un file javascript esterno si inserisce nell’header : <script type="text/javascript" src="file_javascript.js"></script> Cambiare un attributo: uno dei metodi di JS è getElementById() che permette di selezionare un elemento utilizzando il suo ID. E’ possibile modificare il contenuto dell’elemento utilizzando la proprietà innerHTML. document.getElementById("prova").innerHTML = "Prova" Cambiare un attributo: JS permette di trovare un elemento e di cambiarne gli attributi. document.getElementById('vecchia_immagine').src='nuova_immagine.jpeg' Cambiare il contenuto: E’ possibile modificare il CSS dell’elemento utilizzando la proprietà style. document.getElementById(‘nome_della_classe).style.color=’red’ Gli Eventi: un evento HTML può essere qualcosa scatenato dal browser o dall’utente, per esempio: • Il browser ha caricato la pagina web • Un bottone è stato cliccato E’ possibile implementare la gestione degli eventi direttamente nel codice HTML: <button onclick="mostra_data()"> Che data è? </button> Nell’elemento body della pagina web, si inserisce l’elemento script dove inserire il codice JS. Successivamente si inserisce, all’interno del documento, un elemento button con la funzione che deve attivare, la quale è stata inserita precedentemente nello scipt. Vedi file esempio In JavaScript è possibile definire dei gestori degli eventi, ovvero funzioni che vengono eseguite al verificarsi di un evento. Per sapere da quale elemento è stato generato un evento si può utilizzare la proprietà target checonterrà il nodo del DOM dove esso ha avuto origine. Esempio: evento=click sul bottone; funzione attivata=crea un elemento di testo Lezione 8 – Form Form: è un modulo per l’immissione di dati per l’utente. Vengono utilizzati per inviare dati ad un database server oppure per inviare e-mail. Inserisce contenuti interattivi per l'utente nella pagina web o in un'applicazione web inserendosi nel contesto del web dinamico. In HTML viene rappresentato con l’elemento di blocco <form>. I suoi attributi sono: • name: specifica il nome del form • action: indica l’URL del programma o della pagina di risposta che processerà i dati, ovvero dove verranno inviati. Grazie all’attributo action è anche possibile far sì che i dati vengano inviati in e- mail al webmaster. • method: specifica il metodo con cui i dati vengono inviati alla pagina di risposta: a) metodo GET: la pagina di risposta viene contatta e i dati vengono inviati in un unico step. Metodo consigliato per l’invio di form con pochi campi e pochi dati (255 caratteri max) e non sensibili. b) metodo POST: Nel metodo POST, invece, l’invio dei dati avviene in 2 step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Da utilizzare con form contenenti dati sensibili. <fieldset> e <legend>: I moduli tendono a ingigantirsi e diventare lunghissimi. • Grazie al tag <fieldset> possiamo creare delle macro-aree all’interno dei form, • e grazie al tag <legend> possiamo indicare il nome di ciascuna macro-area. Ultima lezione 9 – Dati nel Web Comunicazione: Database: Server Web: Client: Tipologia informazioni: • Strutturate • destrutturate • semi-destrutturate XML: eXtensible Markup Language.. Linguaggio di marcatura descrittiva. in teoria, naturale successore di HTML come linguaggio per il Web : più espressivo e flessibile (eXtensible) ma più complicato. E’ un formato universale per lo scambio di dati sul web. Nasce per scambiare dati tra applicazioni e per rappresentare dati comprensibili anche dagli esseri umani. Marcatura descrittiva e non procedurale (descrive la struttura logica) marcatura è dettata dalla struttura logica del documento. Insieme di etichette può cambiare in base l'applicazione. Viene usato il concetto di “tipo di documento”: specificato attraverso una dichiarazione Document Type Declaration o DTD (specifica la grammatica). Permette di imporre al documento una certa struttura (ovvero come si compongono le sue parti). Le parti sono delimitate dalla marcatura. Un documento XML deve avere sempre un prologo XML all'inizio: <?xml version="1.0" encoding="utf-8"?> <documento></documento> Tutti i documenti XML devono avere un elemento radice. Questo elemento conterrà tutto l'albero del documento e la sua struttura DOM. <?xml version="1.0" encoding="utf-8"?> <documento> <sezione id="sezione-a"> <titolo livello="1">Titolo</titolo> <para>...</para> </sezione> </documento> Tutti gli elementi devono essere annidati correttamente, Tutti i tag devono avere dei tag di chiusura, anche quelli vuoti, i valori degli attributi devono essere sempre tra virgolette, è case sensitive: XML è sensibile alle maiuscole e alle minuscole. Quindi <elemento> e <ELEMENTO> sono due cose distinte. Questo principio si applica ai nomi degli elementi, agli attributi e ai valori di attributo. In XML ci sono regole sintattiche: come dobbiamo scrivere le informazioni all’interno dei documenti.