Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML. Il Linguaggio HTML

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML. Il Linguaggio HTML"

Giorgiana Landi
4 anni fa
Visualizzazioni

1 Reti Il Linguaggio HTML Linguaggio HTML HTML = Hypertext Markup Language Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita Ipertesto = Testo + elementi di collegamento (link) che costituiscono una rete raggiata di informazioni Leggibile in maniera non sequenziale Codice che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del computer I siti web sono scritti in HTML ( GES/ oppure Il Linguaggio HTML Il Linguaggio HTML Non è un linguaggio case-sensitive Permette di integrare contenuti multimediali in un documento ipertestuale Testi formattati (font, colori, ecc.) Immagini, suoni, filmati Collegamenti ad altri oggetti (links) Script (JavaScript, CGI) Un documento HTML è un file con estensione.htm o.html. Si può generare: Con un semplice editor di testo Con apposite applicazioni (ad es. Frontpage) che consentono di creare pagine molto complesse senza conoscere i dettagli del linguaggio 3 4

2 I tag HTML Struttura delle Pagine Web I componenti fondamentali sono detti tag (di apertura/chiusura) I tag sono segnalini (markup) I tag si scrivono tra parentesi angolari < > Ad ogni tag (salvo poche eccezioni) corrisponde un tag di chiusura. <TAG attributi>contenuto</tag> I tag possono contenere elementi al loro interno e anche altri tag La base di ogni documento HTML è: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> 5 6 Struttura delle Pagine Web Struttura delle Pagine Web Le informazioni nel tag <HEAD> non vengono visualizzate Il tag <HEAD> contiene altri tag, ad esempio: <HEAD> <TITLE> Prima pagina Web </TITLE> </HEAD> Il resto della pagina sta invece all interno della sezione delimitata dai tag <BODY> <BODY> </BODY> 7 8

3 Tag per l Indentazione Tag per la Formattazione Il Tag <P> </P> inizia un nuovo paragrafo <P align="right"> </P>: inizia un nuovo paragrafo allineato a destra <P align= center"> </P>: inizia un nuovo paragrafo centrato <P align= left"> </P>: inizia un nuovo pagrafo allineato a sinistra <CENTER> </CENTER>: centra il testo <br>: va a capo <B> </B>: testo in grassetto <I> </I>: testo in corsivo <U> </U>: testo sottolineato <PRE> </PRE>: testo preformattato <H1> </H1>,, <H6> </H6>: grandezza del testo <SUP> </SUP>, <SUB> </SUB>: apice/pedice Caratteri speciali: Es. è si scrive e&grave 9 10 Tag per la Formattazione Il tag <div> è usato per definire una sezione del documento. Consiste in un contenitore per altri elementi (titoli, paragrafi, immagini,ecc) Tutto quello che è incluso fra <div> e </div> reagisce secondo gli stili o comandi che gli sono stati associati Esempio: <div style="color:#ff0000"> <h3>this is a header</h3> <p>this is a paragraph.</p> </div> Tag per Elencare <UL> <LI> elemento1 </LI> <LI> elemento2 </LI> </UL> <OL> <LI> elemento1 </LI> <LI> elemento2 </LI> </OL> (lista non ordinata) (lista ordinata) 11 12

Tag per Creare Tabelle Tag per Collegare <TABLE> tag di apertura tabella <TR> tag di inizio riga <TD> tag di inizio colonna </TD> tag di fine colonna </TR> tag di fine riga </TABLE> tag

it/fi-ges > Home Page del corso di Informatica A</A> <A HREF="mailto:saetti@ing.unibs.

4 Tag per Creare Tabelle Tag per Collegare <TABLE> tag di apertura tabella <TR> tag di inizio riga <TD> tag di inizio colonna </TD> tag di fine colonna </TR> tag di fine riga </TABLE> tag di chiusura tabella <A indirizzo>testo</a> <A HREF= > Home Page del corso di Informatica A</A> <A ing.unibs.it</a> NOTA: Tra doppie virgolette si scrive l URL (Uniform Resource Locator) ovvero l indirizzo della risorsa Tag per Includere Immagini Esercizio: pagina HTML statica <IMG indirizzo attributi> <IMG SRC= immagini/pic1.jpg WIDTH=640 HEIGHT=480> Es 1: Realizzare la seguente pagina web. NOTA: in questo caso il tag possiede anche degli attributi, cioè WIDTH e HEIGHT 15 16

5 I Moduli in HTML Detti anche form Si possono immaginare come la classica scheda di un questionario Consentono all utente di inserire dati in una pagina html Sono definiti dai tag <form> e </form> Ogni campo del modulo ha associato un tipo (tramite il tag <input>) ed un etichetta un etichetta (tra i tag e ) Il Tag per Definire un Modulo <input> specifica un determinato tipo di campo di una form Campo di testo Checkbox Radiobutton Combobox pulsante E un tag che non richiede chiusura Ha associato degli attributi (type, name ) Il Campo textfield di un Modulo Il Campo textarea di un Modulo L attributo type specifica il tipo di campo L attributo name indica il nome con il quale è possibile riferirsi al campo Non utilizza il tag input Necessita anch esso un nome per avere un riferimento a questa area di testo Nome <input type="text" name= persona" /> Note <textarea name= descrizione"></textarea> 19 20

6 Il Campo checkbox di un Modulo Il campo radiobutton di un Modulo L attributo checked indica se una checkbox è selezionata L attributo value associa alla checkbox un valore Se la checkbox non è selezionata, il browser non fornisce alcun valore alla checkbox <input type="checkbox" name= pubblicità" value= SI" /> Abilita ricezione pubblicità <input name= sesso" type="radio" value= M" checked/> Maschio <br> <input name= sesso" type="radio" value= F" /> Femmina Il campo combo box di un Modulo I pulsanti di un Modulo Impiego <select name="select"> <option value="stu">studente</option> <option value="ope">operaio</option> <option value="ins">insegnante</option> <option value="imp">impiegato</option> <option value="dis">disoccupato</option> <option value="dir">dirigente</option> <option value="pen">pensionato</option> </select> <input type="submit" name="esegui" value="sono un bottone!" /> 23 24

7 HTML e JavaScript JavaScript è un linguaggio di scripting latoclient, che viene interpretato dal browser i comandi JavaScript sono scritti direttamente nella pagina HTML all interno dei tag <script> e </script> Il codice JavaScript non deve essere compilato Il browser, tramite un apposito motore di scripting, interpreta le parti di codice JavaScript e le esegue HTML e JavaScript: Esempio modulo <form name="esempio1"> <table> <tr> <td><input name="stringa" type="text" value="inserisci una stringa da manipolare..." size="50"/></td> <td> <input type="button" value="manipola" onclick="manipolastringa()" name="manipola"/></td> <td> <textarea name="stringhe_manipolate" cols="60" rows="10"></textarea></td> </tr> </table> </form> HTML e JavaScript: Esempio funzione JavaScript <script type="text/javascript"> function manipolastringa() { var s = document.forms["esempio1"].stringa.value; var l = document.forms["esempio1"].stringa.value.length; var r = ""; for (i = l-1; i >= 0 ; i--) r += s.charat(i); document.forms["esempio1"].stringhe_manipolate.value = r; } </script> Esercizio: pagina HTML dinamica Es 2: Modificare l esempio in modo che vengano stampate solo le vocali Es 3: Modificare l esempio aggiungendo una checkbox. Se la checkbox è selezionata stampare solo le vocali. Altrimenti stampare la stringa originale (Nota: la checkbox è selezionata se il suo attributo checked è pari ad 1) 27 28

Documenti analoghi

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML. Il Linguaggio HTML

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML. Il Linguaggio HTML Reti Il Linguaggio HTML Linguaggio HTML HTML = Hypertext Markup Language Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita