Itis Cardano. Introduzione a HTML. Pavia. M. Rivera Itis Cardano Pavia. A.s

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Itis Cardano. Introduzione a HTML. Pavia. M. Rivera Itis Cardano Pavia. A.s. 2005-2006"

Gioacchino Caruso
8 anni fa
Visualizzazioni

1 Introduzione a HTML A.s M. Rivera Itis Cardano Pavia Itis Cardano Pavia

2 Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali Tabelle Frame Form Itis Cardano Pavia

3 Il linguaggio HTML HTML: HyperText Markup Language HTML è il linguaggio per la pubblicazione di contenuti sul World Wide Web Il linguaggio HTML consente di: Pubblicare documenti strutturati, contenenti titoli, sottotitoli, tabelle, liste numerate, immagini, ecc. Accedere a documenti pubblicati da altri con un click grazie ai collegamenti ipertestuali Includere oggetti multimediali direttamente nel documento Creare form per l invio di dati nelle transazioni con servizi remoti I documenti scritti in HTML sono quindi: Strutturati Ipermediali

Pubblicare documenti strutturati, contenenti titoli, sottotitoli, tabelle, liste numerate, immagini, ecc.

4 Storia dell HTML L HTML è stato ideato nel 1992 da Tim Berners-Lee mentre lavorava al CERN di Ginevra ed è divenuto popolare grazie al primo browser, chiamato Mosaic. Il w3 (World Wide Web Consortium è l organizzazione che si occupa della standardizzazione del linguaggio HTML e di tutte le tecnologie che hanno a che fare con il Web La versione attuale di HTML è la 4.01

5 Diversi HTML HTML HTM DHTML: HTML+Javascript XHTML: extensible (ben formato, cioè rigido nella sintassi. HTML+XML) Itis Cardano Pavia

6 Sintassi e semantica Come tutti i linguaggi, HTML ha: La sintassi del linguaggio: come si scrive? La semantica del linguaggio: a cosa serve, cosa significa? Regole base di sintassi: I <tag> in generale si scrivono in <MAIUSCOLO> -in xhtml in minuscolo! Alcuni vanno chiusi... Regole di inclusione gerarchica dei <tag> (incapsulamento) Gli attributi in generale si scrivono in minuscolo I valori degli attributi si scrivono tra doppi apici Semantica: <u>testo sottolineato</u> <i>testo in italico</i> HTML NON è un linguaggio ad oggetti, né un linguaggio procedurale

Regole base di sintassi: I <tag> in generale si scrivono in <MAIUSCOLO> -in xhtml in minuscolo! Alcuni vanno chiusi.

7 Significato di HTML HTML è un linguaggio a marcatori: <tag> I <tag> sono individuati da <> Marcatori di apertura: <nome_tag> Marcatori di chiusura: </nome_tag> Un <tag> agisce su ciò che contiene: <nome_tag>contenuto del tag</nome_tag> Un <tag> può avere degli attributi: <nome_tag attributo= valore > Es: <a href= >Cardano</a>

su ciò che contiene: <nome_tag>contenuto del tag</nome_tag> Un <tag> può avere degli

8 Cos è un file HTML L HTML di tutte le pagine Web è visibile a tutti Le pagine on-line sono un ottima raccolta di esempi da cui imparare sempre cose nuove I documenti HTML sono semplici file di testo con estensione.htm o.html Per editare file.html si possono utilizare editor generici (es. Notepad) oppure editor WYSIWYG

documenti HTML sono semplici file di testo con estensione.htm o.

9 Struttura di un documento html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN " <html> <head> <title>titolo della pagina</title> </head> <body> <p>ciao Mondo!</p> </body> </html>

01//EN "http://www.w3.org/tr/html4/strict.

10 Informazioni sulla versione Tutto HTML4.01 tranne ciò che è deprecated <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Tutto HTML4.01 compreso ciò che è deprecated <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " Tutto HTML4.01 compreso ciò che è deprecated e i Frame <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " Se si vuole si possono visualizzare i DTD (Document Type Definition) digitando in un browser l URL corrispondente:

01 compreso ciò che è deprecated e i Frame <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.

11 L intestazione Contiene informazioni sul documento Titolo Meta informazioni Keyword per i motori di ricerca Comandi da includere nell intestazione di HTTP Script (es. JavaScript, Jscript) Fogli di stile (CSS) I browser non visualizzano direttamente il contenuto dell intestazione

12 <HEAD> Un tipico esempio di intestazione <TITLE>Il titolo che vuoi tu</title> <META name="author" content="mario Rossi"> <META name="copyright" content=" 2001 Acme SPA"> <META name="keywords" lang="it" content="uno,due,tre"> <META name="date" content=" t17:01:37+00:00"> <META http-equiv="expires content="tue, 20 Aug :25:27 GMT"> <LINK rel="stylesheet" type="text/css href="style.css"> <STYLE type="text/css"> body { background: white; color: black } a:link { color: red } a:visited { color: red } a:active { color: red } </STYLE> </HEAD>

content="2002-04-11t17:01:37+00:00"> <META http-equiv="expires content="tue, 20 Aug 2003 14:25:27 GMT"> <LINK rel="stylesheet"

13 Il corpo <body> <h1>titolo</h1> <h2>sottotitolo</h2> <p> Testo identato, di un paragrafo.<br> Altro testo a capo, sulla seconda riga. </p> </body>

14 Elenchi Esempio di lista non ordinata: <ul> </ul> <ul> <li>uno</li> <li>due</li> <li>tre</li> </ul> Esempio di lista ordinata: <ol> </ol> <ol> <li>uno</li> <li>due</li> <li>tre</li> </ol>

15 <dl> Lista di termini <dt><strong>html</strong></dt> <dd>hypertext Markup Language:linguaggio a marcatori per la definizione di ipertesti.</dd> <dt><strong>http</strong></dt> <dd>hypertext Transfer Protocol:protocollo per il trasferimento di ipertesti.</dd> </dl>

16 Collegamenti ipertestuali (link) Collegamento tra una risorsa Web ed un altra Due estremità dette ancore Sorgente Destinazione La destinazione può essere una risorsa Web qualsiasi Elemento interno ad un documento HTML Un altro documento HTML Immagini Suoni File di differenti formati

destinazione può essere una risorsa Web qualsiasi Elemento interno ad

17 Formato di un URL protocollo + host + path + risorsa ftp://ftp.ietf.org/rfc/rfc1808.txt on-faq/part1.html mailto:m.rivera@mail.cardano.pv.it news://it.comp.java telnet://melvyl.ucop.edu

no/faq/compressi on-faq/part1.html mailto:m.rivera@mail.

18 Tipi di link Ad un url esterno <a href=" > Il sito del cardano</a> Ad un segnalibro (àncora) <a href="#section1"> Introduction</a> Ad un file del sito <a href="logo.gif >Visualizza il logo</a>

it/ > Il sito del cardano</a> Ad un segnalibro

19 Link con indirizzi href="mailto:nome Cognome Possono essere specificati anche i campi cc (carbon copy), bcc (blind carbon copy) e body, oltre a subject

20 Riferimenti relativi e assoluti Assoluti URL relativi al documento attuale images/logo.gif../images/logo.gif (.. Fa salire di un livello)../../images/logo.gif /images/logo.gif (/ riporta alla root)

21 Immagini <img src="alba.jpg" alt="le luci dell alba "height="150" width="200"> Per inserire un immagine con un link: <a href=" <img src="w3_main.gif width="315 height="48 alt="w3"> </a>

22 Applet java <object codetype="application/java" classid="java:nervoustext.class"> <param name="text" value="un TESTO"> </object> Il tag <applet> è stato deprecato

23 Tabelle Le tabelle consento di posizionare testo, immagini, link, altre tabelle, ecc. in righe e colonne di celle <table border="1" summary="esempio"> <caption>tabella</caption> <tr> <th>alto a sinistra</th> <td>alto a destra</td> </tr> <tr> <th>basso a sinistra</th> <td>basso a destra</td> </tr> </table>

24 Un cenno alle pagine con frame Permettono di presentare i documenti in visualizzazioni multiple, suddividendo la finestra del browser in più frame certe informazioni rimangono visibili, mentre altre vengono fatte scorrere o rimpiazzate L elemento <frameset> specifica la configurazione della finestra principale dell'utente nei termini di frame L'elemento <frame> definisce i contenuti e l'aspetto di una singola frazione della pagina

25 I moduli (form) Le form servono per ottenere dati immessi dagli utenti <form action= method="post"> <fieldset> <legend>personal data</legend> <label for="name">name:</label> <input type="text" id="name"><br> <label for="nick">nick:</label> <input type="text" id="nick"><br> <label for=" "> </label> <input type="text" id=" "><br> <input type="checkbox" name="send"> send catalog<br> </fieldset><br> <input type="submit"> <input type="reset"> </form>

26 I controlli disponibili nei moduli Itis Cardano Pavia

27 Editor visuali (WYSIWYG) Alcuni editor visuali Microsoft FrontPage Macromedia Dreamweaver Adobe GoLive Allaire HomeSite NetObjects Fusion Mozilla/Netscape Composer (gratuito) Altri editor w3 Amaya: Evrsoft 1stPage 2000:

Documenti analoghi

Introduzione al Linguaggio HTML

Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la