Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML...

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

Transcript of Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML...

Page 1: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

A.s. 2005-2006

M. RiveraItis Cardano Pavia

ItisC

ardano

Pavia

Introduzione a HTML

Page 2: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Sommario

Introduzione al linguaggio HTMLStruttura di un documento HTMLLink ipertestualiImmagini e oggetti multimedialiTabelleFrameForm

Page 3: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Il linguaggio HTMLhttp://www.w3.org/TR/html401/intro/intro.html

HTML: HyperText Markup LanguageHTML è il linguaggio per la pubblicazione di contenuti sul WorldWide 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 ipertestualiIncludere oggetti multimediali direttamente nel documentoCreare form per l’invio di dati nelle transazioni con servizi remotiI documenti scritti in HTML sono quindi:

StrutturatiIpermediali

Page 4: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Storia dell’HTMLL’HTML è stato ideato nel 1992 da Tim Berners-Lee

mentre lavorava al CERN di Ginevra ed è divenutopopolare grazie al primo browser, chiamato Mosaic.

Il w3 (World Wide Web Consortiumhttp://www.w3.org/) è l’organizzazione che si occupa della “standardizzazione” del linguaggio HTML e di tutte le tecnologie che hanno a che fare con il WebLa versione attuale di HTML è la 4.01

Page 5: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Diversi HTML

HTMLHTMDHTML: HTML+JavascriptXHTML: eXtensible (ben formato, cioè rigido nella sintassi. HTML+XML)

Page 6: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Sintassi e semanticaCome 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 minuscoloI 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

Page 7: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Significato di HTMLHTML è 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=“http://www.cardano.pv.it”>Cardano</a>

Page 8: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Cos’è un file HTMLL’HTML di tutte le pagine Web è visibile a tuttiLe pagine on-line sono un’ottima raccolta di esempi da cui imparare sempre cose nuoveI documenti HTML sono semplici file di testo con estensione .htm o .htmlPer editare file .html si possono utilizare editor generici (es. Notepad) oppure editor WYSIWYG

Page 9: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Struttura di un documento html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<title>Titolo della pagina</title></head>

<body><p>Ciao Mondo!</p>

</body></html>

Page 10: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Informazioni sulla versioneTutto HTML4.01 tranne ciò che è deprecated

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

Tutto HTML4.01 compreso ciò che è deprecated<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">

Tutto HTML4.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.dtd">

Se si vuole si possono visualizzare i DTD (Document Type Definition) digitando in un browser l’URL corrispondente:http://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/frameset.dtd

Page 11: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

L’intestazioneContiene informazioni sul documentoTitoloMeta informazioniKeyword per i motori di ricercaComandi da includere nell’intestazione di HTTPScript (es. JavaScript, Jscript)Fogli di stile (CSS)I browser non visualizzano direttamente il contenuto dell’intestazione

Page 12: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Un tipico esempio di intestazione

<HEAD><TITLE>Il titolo che vuoi tu</TITLE><META name="author" content="Mario Rossi"><META name="copyright" content="&copy; 2001 Acme SPA"><META name="keywords" lang="it" content="uno,due,tre"><META name="date" content="2002-04-11T17:01:37+00:00"><META http-equiv="Expires“ content="Tue, 20 Aug 2003 14: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>

Page 13: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Il corpo<body><h1>Titolo</h1><h2>Sottotitolo</h2><p>&nbsp;&nbsp;&nbsp;&nbsp;Testo identato, di un paragrafo.<br>Altro testo a capo, sulla seconda riga.</p></body>

Page 14: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

ElenchiEsempio 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>

Page 15: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Lista di termini<dl><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>

Page 16: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Collegamenti ipertestuali (link)

Collegamento tra una risorsa Web ed un’altraDue estremità dette ancoreSorgenteDestinazioneLa destinazione può essere una risorsa Web qualsiasiElemento interno ad un documento HTMLUn altro documento HTMLImmaginiSuoniFile di differenti formati

Page 17: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Formato di un URL

protocollo + host + path + risorsaftp://ftp.ietf.org/rfc/rfc1808.txthttp://www.math.uio.no/faq/compression-faq/part1.htmlmailto:[email protected]://it.comp.javatelnet://melvyl.ucop.edu

Page 18: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Tipi di linkAd un url esterno

<a href=" http://www.cardano.pv.it/“> 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>

Page 19: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Link con indirizzi e-mail

href="mailto:Nome Cognome&lt;[email protected]&gt;?subject=[html]&bcc=...">

Possono essere specificati anche i campi cc (carbon copy), bcc (blind carbon copy) e body , oltre a subject

Page 20: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Riferimenti relativi e assoluti

Assolutihttp://www.cardano.pv.it/http://www.w3.org/TR/html401/http://www.dominio.com/cartella/doc.html

URL relativi al documento attualeimages/logo.gif../images/logo.gif (.. Fa salire di un livello)../../images/logo.gif/images/logo.gif (/ riporta alla root)

Page 21: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Immagini<img src="alba.jpg" alt="le luci dell’alba "height="150" width="200">

Per inserire un’immagine con un link:<a href="http://www.w3.org/">

<img src="w3_main.gif“

width="315“

height="48“

alt="w3"></a>

Page 22: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Applet java

<objectcodetype="application/java"classid="java:NervousText.class"><param name="text" value="UN

TESTO"></object>

Il tag <applet> è stato deprecato

Page 23: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

TabelleLe tabelle consento di posizionare testo, immagini, link, altretabelle, 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>

Page 24: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Un cenno alle pagine con frame

Permettono di presentare i documenti invisualizzazioni multiple, suddividendo la finestradel browser in più framecerte informazioni rimangono visibili, mentre altre vengono fatte scorrere o rimpiazzateL’elemento <frameset> specifica la configurazione della finestra principale dell'utente nei termini di frameL'elemento <frame> definisce i contenuti e l'aspettodi una singola frazione della pagina

Page 25: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

I moduli (form)Le form servono per ottenere dati immessi dagli utenti<form action=http://dominio.com/cgi-bin/prognamemethod="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="email">email:</label><input type="text" id="email"><br><input type="checkbox" name="send">send catalog<br>

</fieldset><br><input type="submit"><input type="reset"></form>

Page 26: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

I controlli disponibili nei moduli

Page 27: Introduzione a HTML - cardano.pv.it · Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali

ItisC

ardano

Pavia

Editor visuali (WYSIWYG)Alcuni editor visuali

Microsoft FrontPageMacromedia DreamweaverAdobe GoLiveAllaire HomeSiteNetObjects FusionMozilla/Netscape Composer (gratuito)

Altri editorw3 Amaya: http://www.w3.org/Amaya/Evrsoft 1stPage 2000: http://www.evrsoft.com/


HTML + CSS - Lezione 1

HTML + CSS - Lezione 1

Iperromanzi e romanzi ipertestuali: brevi saggi

Iperromanzi e romanzi ipertestuali: brevi saggi

SEO OnPage e HTML

SEO OnPage e HTML

HTML e CSS

HTML e CSS

HTML - di.unito.itanselma/masterterritorio10/HTML.pdf · Il web e HTML! I documenti WEB ... Editor ditesto con supporto HTML: ! Notepad++ (open source ... Creare una pagina HTML:

HTML - di.unito.itanselma/masterterritorio10/HTML.pdf · Il web e HTML! I documenti WEB ... Editor ditesto con supporto HTML: ! Notepad++ (open source ... Creare una pagina HTML:

Seo html russo

Seo html russo

(X)HTML + CSS - Uniuddemis.ballis/cssslides.pdfCSS + (X)HTML Codice (X)HTML Codice CSS definisce la struttura del documento definisce la presentazione del documento (foglio di stile)

(X)HTML + CSS - Uniuddemis.ballis/cssslides.pdfCSS + (X)HTML Codice (X)HTML Codice CSS definisce la struttura del documento definisce la presentazione del documento (foglio di stile)

Big bang-html

Big bang-html

ESERCITAZIONE SUGLI ALGORITMI NUMERO TRE€¦  · Web viewEL1-1_5ST Client e server Word Il file di questa esercitazione index.html HTML Pagina html secondaria.html HTML Pagina html

ESERCITAZIONE SUGLI ALGORITMI NUMERO TRE€¦  · Web viewEL1-1_5ST Client e server Word Il file di questa esercitazione index.html HTML Pagina html secondaria.html HTML Pagina html

Guida inserimento link ipertestuali ai documenti (Mac e Libre Office)

Guida inserimento link ipertestuali ai documenti (Mac e Libre Office)

Wikibooks - HTML

Wikibooks - HTML

[Guida]OTTIMO Manuale HTML

[Guida]OTTIMO Manuale HTML

©Marco Ronchetti 2003 HTTP e HTML HTML: evoluzione.

©Marco Ronchetti 2003 HTTP e HTML HTML: evoluzione.

Tecnologie Web T Il linguaggio HTMLOtt 1991 HTML 1.0 HTML 1.1 HTML 5.0 XHTML 1.0 HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 ISO HTML Gen 1997 Nov 1992 Nov 1995 W3C (WWW Consortium) Dic 1997

Tecnologie Web T Il linguaggio HTMLOtt 1991 HTML 1.0 HTML 1.1 HTML 5.0 XHTML 1.0 HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 ISO HTML Gen 1997 Nov 1992 Nov 1995 W3C (WWW Consortium) Dic 1997

J0 1 Marco Ronchetti - ronchet@altavista.it HTTP e HTML HTML: evoluzione.

J0 1 Marco Ronchetti - [email protected] HTTP e HTML HTML: evoluzione.

Html parte1

Html parte1

Html per bibliotecari

Html per bibliotecari

HTMLslide html

HTMLslide html

Lezione HTML

Lezione HTML

Corso Base HTML

Corso Base HTML