1 / 39

HTML 4.01

HTML 4.01. Apogeo. I tag di base. Capitolo 1. I tag. Sintassi <nome_tag> </nome_tag> Esempi: <strong> <cite> <b> <em>. Attributi. Attributi nome_attributo = “ valore ” Gli attributi del tag <html> lang = “ codice lingua ” lang = “ it ” dir = “ direzione testo ”

ebony
Download Presentation

HTML 4.01

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 4.01 Apogeo

  2. I tag di base Capitolo 1

  3. I tag • Sintassi • <nome_tag> • </nome_tag> • Esempi: • <strong> • <cite> • <b> • <em>

  4. Attributi • Attributi • nome_attributo = “valore” • Gli attributi del tag <html> • lang = “codice lingua” • lang = “it” • dir = “direzione testo” • dir = “LTR” • I tag <head> e <body>

  5. Attributi del tag <body> • bgcolor = “colore” • Appendice A per nomi e codici dei colori • background = “file_immagine” • text = “colore_testo” • link alink vlink • Esempio javascript onLoad …

  6. Formattazione del testo Capitolo 2

  7. Header e paragrafi • Tag header <h1> … <h6> • Tag <p> • attributo align = “posizione” • Il tag <font> con attributi • face = “font” • color = “colore” • size = “dimensione”

  8. Caratteristiche • Caratteri speciali • Appendice D • Accenno a <div> • Caratteristiche del testo • <tt> • <u> • <strike> • <sub> • <sup> • Tag <hr> con attributo height

  9. Elenchi ordinati, non ordinati ed elenchi di definizioni Capitolo 3

  10. Elenchi ordinati • tag <ol> • attributo type = “valore” (1 i I a A) • attributo start = “valore” • tag <li> • Elenchi all’interno di altri elenchi

  11. Elenchi non ordinati • tag <ul> • attributo type = “valore” (disc circle square) • tag <li> • Elenchi di definizione • tag <dt> <dd>

  12. Inserimento di un’immagine Capitolo 4

  13. Il tag <img> • Attributo src • <img src = “percorso_immagine”> • Percorsi relativi e percorsi assoluti • Attributo alt • alt = “descrizione immagine” • Attributi width e height • Attributo align = “valore” (top bottom left … )

  14. I formati delle immagini • jpg (Joint Photographic Experts Group) • buona compressione • ampia gamma cromatica • scelta della qualità • gif (Graphics Interchange Format) • animazione • trasparenza • png (Portable Network Graphics) • formato “libero” • più livelli di trasparenza

  15. I link Capitolo 5

  16. Il tag <a> • Link a una pagina dello stesso sito o di un sito diverso • Attributo href = “percorso_pagina” • <a href=“paginalocale.html”> link locale</a> • <a href=“http://www.altrosito.it/pagina_altro_sito.html”> link esterno</a> • Attributo target = “valore” (_blank) • Attributo alt = “testo alternativo” • Attributo title=“testo tooltip”

  17. Immagine come link • Inserimento del tag <img> all’interno del tag <a> • Attributo border = “valore” • border = “0” per eliminare il bordo

  18. Link interni alla pagina • attributo name per definire un punto di destinazione interno a un documento (àncora) • <a name = “capitolo1”> • href = “#capitolo1” • (riferimento interno) • href = “pagina.html#capitolo1” • (interno ad altra pagina)

  19. Link mailto • href = mailto:utente@sito • per inviare un messaggio di posta elettronica utilizzando il client e-mail predefinito sul computer • <a href = mailto:utente@sito?CC=utente2@sito2&Subject=soggetto%20messaggio>

  20. Mappe sensibili Capitolo 6

  21. Tabelle Capitolo 7

  22. <table> • Il tag <table> con attributo border = “valore” • all’interno di <table> vari tag <tr> (table row), uno per ogni riga • All’interno del tag <tr> tanti tag <td> (table data) quante sono le colonne • Opzionalmente il tag <th> come intestazione di colonna

  23. Un esempio <table border="1"> <tr> <th>Mese</th> <th>Importo</th> </tr> <tr> <td>Gennaio</td> <td>200</td> </tr> <tr> <td>Febbraio</td> <td>350</td> </tr> </table>

  24. Attributi di <table> • align = “valore” (left center right) • width = “valore” (in pixel o in percentuale) • border = “valore” (0 bordo invisibile) • …

  25. Frames e Iframes Capitolo 8

  26. Form Capitolo 9

  27. Form - Introduzione • Un form html è una sezione di documento che contiene • Testo normale e markup • Elementi speciali chiamati controlli(checkbox, bottoni radio, menu ecc.) • Gli utenti di solito “completano” questi controlli • Inserimento testo, selezione voci di menu ecc. • Poi il form viene inviato (submit) • Eleborazione remota su web server Alberto Ferrari

  28. Formaction and method • I form sonoracchiusidai tag <form> e </form> • Il tag <form> ha • Un attributoaction – url a cui inviareidati del form • Un attributomethod – metodo http da usare per sottomettereidati del form (get o post) • Esempio • <form action="http://www.miocomputer.it/mioscript.cgi" method="post"> Alberto Ferrari

  29. FormCoppienome/valore • Ogni campo di input in un form ha: • Un nome, definito dall’attributo name (o id) del tag <input>, <select>, o <textarea> • Un valore, che l’utente imposta immettendo testo o cliccando col mouse • I dati del form vengono inviati (submit) allo script sul server come un insieme di coppie nome/valore • Campi di testo vuoti sono inviati come una coppia nome/valore, in cui il valore è una stringa vuota • Checkbox e pulsanti radio non selezionati non vengono inviati Alberto Ferrari

  30. Altri usi del form • E’ possibile utilizzare i form per altri scopi: • per mandare un e-mail con il contenuto del form, in questo caso method sarà POST e action sarà:action="mailto:nome@provider.it" • oppure come aree attive per script eseguiti sul client (es. per realizzare una calcolatrice in javascript): in questo caso action mancherà. Alberto Ferrari

  31. Form - Tag per i campi • <input> • Campi per l’immissioneditesto, checkbox, bottoni radio, obottoninormali • <select> • Menu a discesae box diselezione • <textarea> • Campi per l’immissioneditestosurighe multiple Alberto Ferrari

  32. Form - Il tag input • Il tag <input> crea diversi tipi di campi, a seconda del valore dell’attributo type • text – Campo normale per l’immissione di testo (default) • password – Identico a text, ma nasconde il testo inserito • checkbox – Per semplici valori on/off • radio – Pulsante per scegliere una tra diverse opzioni • submit – Bottone per inviare i dati inseriti nel form • reset – Buttone che riporta tutti i campi al valore iniziale • image – Come submit, ma immagine come bottone • hidden – ulteriori coppie nome/valore da inviare al server, ma non visualizzate all’utente Alberto Ferrari

  33. Attributi del tag input • Insieme di attributi variabile a seconda dell’attributo type • text, password • value – Valore di default per il campo • size – Dimensione visualizzata del campo • maxlength – Quantità di dati che si può inserire • checkbox, radio • value – Valore del campo quando è selezionato; default = "on" • checked – Se il campo per default è selezionato • submit,reset • value – Etichetta del bottone • image • src – Url dell’immagine da visualizzare • maggior parte degli attributi del tag img Alberto Ferrari

  34. Esempio input text • <input type=”text" name="nome" maxlength="40" size="33" value="Il tuo nome” • text ha tre attributi aggiuntivi: • maxlength (il numero massimo di caratteri inseribili nel campo) • size (la larghezza della stringa all'interno della pagina) • value (valore di default della stringa). Alberto Ferrari

  35. <form action="http://myhost.com/myscript.cgi" method="post"> <br />State: <input type="text" name="state" value="IT" size="2" maxlength="2" /> <br />Password: <input type="password" name="password" /> <br /><input type="checkbox" name="moreinfo" value="yes" checked="checked" />Send me more info. <br />Select your gender below: <br /><input type="radio" name="gender" value="F" />Female <br /><input type="radio" name="gender" value="M" />Male <br /><input type="submit" name="okbutton" value="OK, submit!" /> <br /> <input type="reset" value="Whoops - erase that" /> <input type="image" src="hand.gif" /> <input type="hidden" name="totalsofar" value="1290.65" /> </form> Esempio con tag input Alberto Ferrari

  36. <form action="http://myhost.com/myscript.cgi" method="post"> <br />State: <input type="text" name="state" value="IT" size="2" maxlength="2" /> <br />Password: <input type="password" name="password" /> <br /><input type="checkbox" name="moreinfo" value="yes" checked="checked" />Send me more info. <br />Select your gender below: <br /><input type="radio" name="gender" value="F" />Female <br /><input type="radio" name="gender" value="M" />Male <br /><input type="submit" name="okbutton" value="OK, submit!" /> <br /> <input type="reset" value="Whoops - erase that" /> <input type="image" src="hand.gif" /> <input type="hidden" name="totalsofar" value="1290.65" /> </form> Esempio con tag input Alberto Ferrari

  37. Choose your favorite color: <select name="favcolor"> <option>green</option> <option>aquamarine</option> <option selected="selected">emerald</option> <option>turquoise</option> <option>aqua</option> <option value="green2">green</option> <option value="green3">green</option> </select> Il tag select Alberto Ferrari

  38. <textarea name="stuff" rows="5" cols="10">Enter stuff here</textarea> Il tag textarea • Il tag <textarea> crea aree per l’inserimento di testo su più linee, con barre di scorrimento • Tutto ciò che si trova tra i tag di apertura e chiusura costituisce il contenuto iniziale del campo Alberto Ferrari

  39. Cenni sui fogli di stile Capitolo 10

More Related