internet www html
Download
Skip this Video
Download Presentation
Internet – WWW - HTML

Loading in 2 Seconds...

play fullscreen
1 / 103

Internet – WWW - HTML - PowerPoint PPT Presentation


  • 80 Views
  • Uploaded on

Internet – WWW - HTML. Cristina Gena [email protected] http://www.di.unito.it/˜cgena/. Tecnologie informaTiche e comunicazione. Cosa intendiamo? Tecnologia dei computer + tecnologia delle comunicazioni

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Internet – WWW - HTML' - hertz


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
internet www html
Internet – WWW - HTML

cristina gena - [internet web html]

tecnologie informatiche e comunicazione
Tecnologie informaTiche e comunicazione
  • Cosa intendiamo?
  • Tecnologia dei computer + tecnologia delle comunicazioni
  • Tecnologie che combinano elaborazionedell’informazione (dati) e comunicazioni ad alta velocità per la trasmissionedell’informazione
  • ICT: Information & Communication Technology

cristina gena - [internet web html]

slide3
ICT
  • Da una visione del computer come sistema di calcolo "stand alone": i calcolatori sono isolati l\'uno dall\'altro e possono essere utilizzati solo da chi ha accesso diretto ad essi. Interazione uomo-macchina
  • Ad una visione del computer come sistema di elaborazione di informazioni in grado trasmettere e ricevere informazioni da altri computer a cui è collegato tramite reti di comunicazione

cristina gena - [internet web html]

slide4
ICT
  • interazione uomo-calcolatore remoto
  • interazione fra utenti mediata da calcolatori

cristina gena - [internet web html]

comunicazioni
Comunicazioni
  • Rete: sistema di comunicazione che connette due o più computer -> creazione di un cyberspazio in cui i nuovi utenti di computer possono interagire per vari motivi:
    • accedere a informazioni collocate su computer diversi dal proprio
    • accedere a servizi offerti da computer diversi dal proprio
    • scambio di messaggi (e-mail)
    • videoconferenze…etc.

cristina gena - [internet web html]

internet www
Internet & www
  • Cyberspazio: isoliamo 2 aspetti importanti
    • Internet, rete globale che unisce reti più piccole che si trovano in diversi paesi/continenti; supporta diversi servizi, tra cui:
    • World Wide Web (o WWW/ W3): servizio supportato da Internet: consiste in un insieme di documenti localizzati su computerdiversi fra loro connessi dalla rete, in cui l’informazione viene presentata in formato multimediale (testo + immagini + suoni + video…);

cristina gena - [internet web html]

internet
Internet
  • anni 1960 Guerra fredda
  • \'65-\'69 Progetto ArpanetARPA (Advanced Research Projects Agency)
      • 1. indipendenza da ogni nodo o tratta
      • 2. reinstradamento automatico
      • 3. efficienza e affidabilità
  • 1969 Nasce Arpanet: primi quattro nodi
  • 1974 Definizione TCP/IP (integrato poi in in UNIX)
  • 1981 RFC 791, 792, 793,..

cristina gena - [internet web html]

internet1
Internet

1983 Milnet, la parte per scopi militari, viene scorporata da Arpanet 1984. Introduzione del DNS

1986 NSFNET (National Science Foundation):rete accademica

parallela per università basata su TCP/IP.  Collegamento con Arpanet

1989 circa 100.000 hosts  integrazione nuove reti

1990 si dissolve Arpanet | 1990 Nascita del WWW

cristina gena - [internet web html]

internet2
Internet

1992 Internet Society (ISOC): respons. di guidare sviluppi di

Internet

1993 Internic: gestore dei domini su internet Es .com, .org, .net, ecc.

1998 Prima dorsale per Internet 2 NGI (Next Generation Internet), IPv6

oggi oltre 10.000.000 host

cristina gena - [internet web html]

slide10
www
  • WWW: tutti i documenti sono accessibili dall’utente del singolo PC tramite programmi di navigazione detti browser;
  • i vari documenti contengono dei collegamenti (link)
  • link: suggeriscono di saltare da un documento a un altro che eventualmente si trova su un altro computer della rete

cristina gena - [internet web html]

slide11
www
  • -> lettura ipertestuale dei miliardi di documenti interconnessi che costituiscono il WWW.
  • Lettura ipertestuale versus lettura lineare di un libro

cristina gena - [internet web html]

internet www1
Internet & www
  • Internet e WWW sono la stessa cosa?
  • NO, anche se il grande successo del WWW ha comportato che nell’uso quotidiano queste parole vengano usate come sinonimi
  • La rete vera e propria, che supporta la navigazione da un documento all’altro del WWW è Internet -> www servizio fornito da Internet
  • Internet fornisce anche molti altri servizi oltre al Web: es. posta elettronica (email), il trasferimento di dati fra computer connessi (ftp), l’accesso in remoto ad altri computer collegati (telnet)

cristina gena - [internet web html]

client e server
Client e Server
  • Ci si riferisce non tanto a tipi diversi di computer ma a un particolare modo di utilizzare computer connessi, a un modello di interazione -> modello client/server
  • Server: fornitore di servizi
    • computer centrale
    • contiene insiemi di dati (database) e programmi per i client
  • Client: fruitore di servizi
    • connessi tramite una rete cablata o senza filo (wireless)
    • PC, workstation, …

cristina gena - [internet web html]

slide15

Client

Server

cristina gena - [internet web html]

cos internet
Cos\'è internet?
  • Milioni di dispositivi di calcolo
  • tra loro interconnessi: host o
  • end-systems
    • Pc, workstation, server
    • eseguono applicazioni
  • Canali di comunicazione
    • fibra, rame, radio, satellite
  • Router:instradano
  • pacchetti di dati attraverso
  • la rete

cristina gena - [internet web html]

accesso a internet
Accesso a Internet
  • Accesso istituzionale: aziende università (collegati attraverso una LAN, Local Area Network)
  • E’ possibile essere in Internet, anche in modo
  • temporaneo, chiamando un fornitore di servizi
  • Internet mediante un modem a 56 Kb, oppure essere sempre connessi tramite un modem ADSL o la fibra ottica
  • -> Si parla di Internet Service
  • Provider (ISP): es. Tiscali,
  • Libero, FastWeb…

cristina gena - [internet web html]

slide18

unito

google

tiscali

cristina gena - [internet web html]

internet e protocolli
Internet e protocolli
  • la comunicazione delle macchine in Internet è governata da un insieme di protocolli di rete:
    • una macchina in Internet
      • usa la famiglia di protocolli TCP/IP
      • In informatica i protocolli definiscono delle regole comuni per lo scambio delle informazioni

cristina gena - [internet web html]

slide20

request

Server

client

response

Come funziona il Web

  • Architettura client-server
  • Un server è programma “in ascolto” su una porta TCP. Quando arriva una richiesta da un client, il server analizza questa richiesta (eventualmente con l’aiuto di altri programmi), elabora una risposta (anche in questo caso, eventualmente con l’aiuto di altri programmi ) e la invia al client.
  • Un client è un programma che si connette ad un server, fa una richiesta ed aspetta una risposta.
  • Un server, generalmente, può servire più client contemporaneamente.

cristina gena - [internet web html]

come funziona il web
Come funziona il Web
  • Ipertesto
  • Un ipertesto è un documento (o un insieme di documenti) costituito da un insieme di nodi e da un insieme di archi che collegano i vari nodi. Un ipertesto può essere visto come una rete, dentro la quale si può navigare, passando da un nodo all’altro percorrendo gli archi.
  • HTTP
  • HTTP (HyperText Transfer Protocol) è il protocollo di comunicazione utilizzato da un client (browser) e da un server (HTTP Server) per trasferire ipertesti (file che contengono ipertesti).

cristina gena - [internet web html]

come funziona il web1
Come funziona il Web
  • World Wide Web
  • Il WWW è un gigantesco ipertesto. I nodi (pagine Web) risiedono su macchine sparse in tutto il mondo e collegate tra loro tramite Internet.
  • Percorrere un arco (hyperlink - collegamento ipertestuale) significa attivare una connessione tra un client (browser) e un server. Questa connessione utilizza il protocollo HTTP e corrisponde alla richiesta di una pagina Web che viene inviata dal server e visualizzata dal client.
  • Il WWW è un ipertesto “aperto” perché la sua strutttura non è definita a priori, ma chiunque può inserire nuovi nodi (pagine Web) e nuovi archi (collegamenti).

cristina gena - [internet web html]

come funziona il web2
Come funziona il Web
  • Brevissima storia del World Wide Web
  • Il WWW nasce nel 1990 al CERN (European Particle Physics Laboratory) di Ginevra, come mezzo per facilitare la collaborazione scientifica tra centri di ricerca di fisica delle particelle. Il suo ideatore è il fisico Tim Berners-Lee.
  • La prima interfaccia grafica per il WWW (il browser Mosaic) uscì all’inizio del 1993, per opera di Marc Andreessen, che un anno dopo fondò la Netscape Communication Corp.
  • Nel 1994, CERN e MIT stipularono un accordo per costituire il Consorzio WWW (W3C), dedicato alla standardizzazione e allo sviluppo di protocolli e linguaggi per il Web. Al W3C hanno in seguito aderito centinaia di altri enti e resta il principale punto di riferimento per tutto ciò che riguarda il Web (www.w3.org)

cristina gena - [internet web html]

come funziona il web3
Come funziona il Web
  • Pagina Web
  • Una pagina Web è un nodo dell’ipertesto WWW. Una pagina Web può contenere testo, immagini, filmati, suoni, ecc...
  • Sito Web
  • Un sito Web è un insieme di pagine Web, generalmente residenti sullo stesso server, gestite da un unico Web master e con un contenuto omogeneo.
  • Home page
  • Una home page è generalmente la pagina di accesso ad un sito Web.

cristina gena - [internet web html]

come funziona il web4
Come funziona il Web

Home page: esempio

cristina gena - [internet web html]

slide26

Come funziona il Web

  • URL
  • Un URL (Uniform Resource Locator) è l’indirizzo di una risorsa, per es., di una pagina Web.
  • Ha la seguente forma:
  • http://www.di.unito.it/~cgena/index.html

protocollo

nome dellacartella

nome del file

DNS del

sito Web

cristina gena - [internet web html]

slide27

Come funziona il Web

  • DNS
  • Il DNS (Domain Name System) è un sistema di denominazione gerarchico, ripartito in domini, sotto-domini, sotto-sotto-domini, ecc…
  • Un sito Web viene univocamente identificato dal suo DNS:
  • www.di.unito.it = sito Web del Dipartimento di Informatica

dominio

sotto-dominio

server

(host)

sotto-sotto-dominio

DNS Server: programma che conosce le corrispondenze tra

DNS e indirizzi IP dato un DNS (www.di.unito.it)

restituisce l’IP (130.192.239.1) necessario per la connessione

cristina gena - [internet web html]

come funziona il web5
Come funziona il Web
  • I Web browser
  • Un Web browser è un programma, dotato di interfaccia grafica, che:
    • interagisce con un server, richiedendone i servizi (per es. pagine Web)
    • visualizza le pagine Web, mostrandone il contenuto e interpretando le indicazioni relative all’aspetto (colori, immagini, tipi di carattere, ecc…).

cristina gena - [internet web html]

come funziona il web6
Come funziona il Web
  • I Web browser: Microsoft Internet Explorer

cristina gena - [internet web html]

come funziona il web7
Come funziona il Web
  • I Web browser: Mozilla Firefox

cristina gena - [internet web html]

come funziona il web8
Come funziona il Web
  • I Web browser: funzioni principali
  • Non descriviamo tutte le funzioni dei browser in dettaglio: l’interfaccia utente infatti è molto intuitiva ed è facile imparare ad usarla (anche senza manuale…)

Vai al seguente indirizzo (URL)

Torna alla

pagina precedente/

Vai alla pagina

successiva

Lista di siti (URL) “interessanti”

(archiviati dall’utente)

cristina gena - [internet web html]

slide32

Come funziona il Web

  • Cosa vuol dire “navigare” sul Web
  • Quando un utente si connette ad un sito Web, per es. facendo click su un link, succedono le seguenti cose:
    • Il browser analizza l’URL
    • Chiede al DNS Server l’indirizzo IP corrispondente al DNS contenuto nell’URL
    • Effettua una connessione al server corrispondente all’IP ricevuto e gli invia una richiesta per il file indicato nell’URL
    • Il server risponde inviando il file richiesto
    • Il browser intepreta il file ricevuto, visualizzandolo secondo le specifiche in esso contenute

cristina gena - [internet web html]

slide33

request

(url)

Server

client

elaborazione

?

Server

client

pagina

response

(pagina)

Server

client

Come funziona il Web

  • Nel caso più semplice l\'URL contiene l\'indirizzo di una pagina HTML(per es. http://www.di.unito.it/~cgena/dida.html):
  • il contenuto è fisso, definito nel momento in cui la pagina HTML viene scritta
  • Pagine Web "dinamiche" = pagine il cui contenuto viene generato (selezionato, composto) al momento della richiesta

cristina gena - [internet web html]

slide34

Come funziona il Web

Pagine Web dinamiche

Client-side:

JavaScript (e VBScript)

Java Applet

NB: Per ogni tecnologia è necessario che il

Browser la supporti (sappia interpretarla)!

Server-side:

ASP (Active Server Pages)

PHP

JSP (Java Server Pages)

Java Servlet + XML

NB: Per ogni tecnologia è necessario che il

Server la supporti (sappia interpretarla)!

cristina gena - [internet web html]

slide35

Pagine Web dinamiche: esempi

cristina gena - [internet web html]

slide36

Pagine Web dinamiche: esempi

cristina gena - [internet web html]

slide37

Pagine Web dinamiche: esempi

cristina gena - [internet web html]

l informazione strutturata
L’informazione strutturata
  • L’informazione è strutturata quando è dotata di una precisa struttura che ne rende più semplice ed efficiente la ricerca e la consultazione
  • Si pensi ad esempio al catalogo di una biblioteca e a come potrebbero essere strutturati i dati

cristina gena - [internet web html]

slide39

Questa informazione probabilmente

risiede in una base dati

cristina gena - [internet web html]

xml extensible markup language
XML (Extensible Markup Language )
  • <?xml version="1.0" encoding="iso-8859-1"?>
  • <rubrica>
  • <!-- istanze dell\'elemento contatto -->
  • <contatto>
  • <nome>Andrea</nome>
  • <cognome>Crevola</cognome>
  • <telefono>011-555-1234</telefono>
  • <email>[email protected]</email>
  • </contatto>
  • <contatto>
  • <nome>Mario</nome>
  • <cognome>Rossi</cognome>
  • <telefono>011-555-5678</telefono>
  • <email>[email protected]</email>
  • </contatto>
  • </rubrica>

cristina gena - [internet web html]

html hypertext markup language
HTMLHyperText Markup Language

cristina gena - [internet web html]

html hypertext markup language1
HTMLHyperText Markup Language

Linguaggio base per produrre documenti per World Wide Web (WWW o WEB, ragnatela mondiale di informazioni..)

Documenti WEB

pagine ipertestuali che contengono contenuti multimediali

• testo

• immagini

• suoni

• legami ipertestuali a

- altre pagine

- programmi

- immagini, suoni, ...

 Pagine localizzate su server web e visualizzate da un client (browser)

cristina gena - [internet web html]

html hypertext markup language2

pagina papers:

link3

home page:

link1

link2

pagina di unito

pagina del coreplink4

HTMLHyperText Markup Language

L\'Ipertesto è un insieme di testi o pagine leggibili con l\'ausilio di un\'interfaccia elettronica, in maniera non sequenziale, per tramite di particolari parole che si chiamano hyperlink (rimandi), che costituiscono un rete raggiata o variamente incrociata di informazioni organizzate secondo criteri paritetici o gerarchici.(http://it.wikipedia.org/wiki/Ipertesto )

cristina gena - [internet web html]

html hypertext markup language3
HTMLHyperText Markup Language

Si parla di contenuti multimediali, specie in ambito informatico, quando per comunicare un\'informazione riguardo a qualcosa ci si avvale di molti media, cioè mezzi di comunicazione diversi: immagini in movimento (video), immagini statiche (fotografie), musica e testo.

(http://it.wikipedia.org/wiki/Multimedialit%C3%A0)

cristina gena - [internet web html]

html hypertext markup language4
HTML - HyperText Markup Language

HTML è un linguaggio di formattazione di documenti

Un documento HTML è un file di testo (file ASCII) contenente dei comandi per

• formattazione

• strutturazione del layout

• inserimento parti multimediali

• link ipertestuali

I comandi (TAG) hanno una forma sintattica particolare

<nome-tag> informazioni </nome-tag>

 I comandi (tag) generalmente hanno nomi mnemonici e significativi…

cristina gena - [internet web html]

slide48

Specifiche HTML 4

http://www.w3.org/TR/html4/

cristina gena - [internet web html]

slide49

Pagina visualizzata nel browser

Codice html della pagina

Visualizza > HTML

Visualizza > sorgente pagina

cristina gena - [internet web html]

slide50
HTML

Un documento HTML è costituito da due parti**

<html>

<head>

descrizione delle caratteristiche del documento

</head>

<body>

documento vero e proprio

</body>

</html>

** abituiamoci da subito a scrivere i tag minuscoli…(vedremo più avanti perché)

cristina gena - [internet web html]

slide51
HTML

Proviamo subito a costruire il nostro primo file HTML ….

Ci servono…

un editor testuale (Blocco Note, Word Pad, …)…

un browser per visualizzare una pagina (Explorer, Firefox. Opera)

Esistono dei programmi che creano automaticamente il codice (es. Macromedia Dreamweaver) in base ad azioni “user friendly”….

cristina gena - [internet web html]

slide52
HTML
  • HEAD
  • contiene il titolo del documento che verrà visualizzato come titolo nella finestra del browser
  • <head>
      • <title>
      • cristina gena’ home page
      • </title>
  • </head>
  • ATTN: poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è importante che esso sia significativo

cristina gena - [internet web html]

slide53
HTML

BODY

Contiene tutto quello che verrà visualizzato secondo le direttive di formattazione.

<body> corpo della pagina </body>

Vediamo cosa si può inserire all’interno di body…

cristina gena - [internet web html]

slide54
HTML

ATTRIBUTI DI BODY

Il tag BODY ha della opzioni che permettono di stabilire….

<bodybgcolor="colore sfondo"

text="colore testo"

background="pathname del file con immagine per lo sfondo"

link="colore link da visitare"

alink="colore link attivo“

vlink="colore link visitati">

cristina gena - [internet web html]

slide55
HTML

Il colore può essere specificato con

• parole chiave: red, yellow, ...

• codice esadecimale: Rosso Verde Blu

rosso verde blu vengono combinati numericamente per formare tutti i colori usando i numeri 0-9 e le lettere da A a F

es. #000000  nero

es. #FFFFFF  bianco

es. #FF0000  rosso

OSS: di default si ha sfondo bianco, testo nero, link da visitare blu, , link attiivi rossi, link visitati viola

cristina gena - [internet web html]

slide56
HTML

Tool per scegliere velocemente colori di primo piano e sfondo

http://www.yoyodesign.org/outils/ncolor/ncolor8.html.en

http://web-link.it/html/colori256.htm

www.asciitable.it/colorihtml.asp

cristina gena - [internet web html]

slide57
HTML

LEGAMI IPERTESTUALI

Vediamo ora come creare link ipertestuali in una pagina HTML

Primo passo:

Definizione precisa di URL standard

Un URL è costituito da tre parti

protocollo://indirizzointernet:porta/pathname#label

http://www.di.unito.it:80/cgena/master.html#corep

Il PROTOCOLLO descrive il tipo di collegamento da realizzare

cristina gena - [internet web html]

slide58
HTML

file: {per file locali}

http:{attiva collegamento a server http}

ftp: {attiva collegamento a server ftp}

news: {attiva collegamento a server news}

telnet: {attiva sessione di collegamento remoto}

mailto: {attiva spedizione di mail}

Il protocollo più importante per i collegamenti ipertestuali è http

cristina gena - [internet web html]

slide59
HTML

ES:

file:HTML/pippo.html

{collegamento al file pippo.html in directory HTML locale}

  http://www.di.unito.it/home.html

{collegamento al file file home.html su server www.di.unito.it}

ATTENZIONE! www in questo caso è il nome di una macchina nel dominio di.unito.it

Di solito alle macchine server WWW viene dato il nome www

cristina gena - [internet web html]

slide60
HTML
  • http://www.di.unito.it/cgena/wd.html
  • {file con pathname cartella/pagina.html}
  •  mailto:[email protected]
  • {attiva il programma di invio mail}

cristina gena - [internet web html]

slide61
HTML

CREAZIONE DEL LEGAME IPERTESTUALE

Sono coinvolti 2 elemeti

• il testo o l’immagine che fungono da LINK

• il collegamento da attivare

tag ANCHOR: <a>…</a>

<a href="URL servizio da attivare">

testo o immagine che funge da link

</A>

cristina gena - [internet web html]

slide62
HTML

<a href="http://www.di.unito.it/index.html">

questo testo funge da hotword </a>

<a href="mailto:[email protected]">

spedisce una mail a cristina gena </a>

<a href="http://www.di.unito.it/cgena/teaching.html">

<img src="pippo.jpg“ alt=“vai alla pagina teaching”> </a>

<a href="file:c:\pippo.html">

collegamento al file locale pippo</a>

cristina gena - [internet web html]

slide63
HTML
  • LINK A IMMAGINI SUONI E ANIMAZIONI ESTERNE
  • Si possono visualizzare immagini, suoni, animazioni specificando nella URL il nome di un file corrispondente
  • I formati riconosciuti sono:
  • immagini: GIF, JPEG, BITMAP, PNG
  • suoni: AIFF, AU, WAV, MP3
  • animazioni: .MOV (QuickTime) .AVI .MPEG

cristina gena - [internet web html]

slide64
HTML

<a href="pippo.jpg">

apre l’ immagine di pippo </a>

<a href="pippo.mpeg">

fa partire il filmato di pippo </a>

<a href=“pippo.mp3">

fa partire la canzone di pippo </a>

cristina gena - [internet web html]

slide65
HTML
  • ATTRIBUTI DEL TAG A
  • <a href=“pippo.html” title=“vai all’home page di pippo” target=“_blank”>
  • href indirizzo del collegamento
  • title descrizione della destinazione
  • target destinazione:
    • _blank  apre il collegamento in una nuova pagina

cristina gena - [internet web html]

slide66
HTML

HEADERS - I titoli

<h1> titolo1 </h1>

...

<h6>titolo6 </h6>

permettono di indicare quali parti di testo vengono usate

come titoli

OSS: H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli

cristina gena - [internet web html]

html hypertext markup language5
HTMLHyperText Markup Language

COMANDI PER ANDARE A CAPO

<br> a capo senza saltare una riga

<p>

a capo saltando una riga

<p></p> per ogni paragrafo (separato da una linea)

• HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi. Ma XHTML si!!

• HTML non è sensibile agli spazi e alle linee vuote

cristina gena - [internet web html]

slide68
HTML

IL CARATTERE

<font>…</font>

Questo tag supporta 3 attributi

• size per cambiare la dimensione

• color per cambiare il colore

• face per cambiare il font

<font size=“5” color="red" face=“Courier New, Courier, mono”>

Questo testo viene visualizzato in rosso, ha dimensione 5 e font Courier

</font>

cristina gena - [internet web html]

html hypertext markup language6
HTMLHyperText Markup Language

IL CARATTERE

<font>…</font>

dimensioni dei caratteri da 1 (piccolo) a 7 (grande)

<font size=“3”> testo a dimensione 3 </font>

cristina gena - [internet web html]

slide70
HTML

L’ ALLINEAMENTO

il tag <p> possiede un attributo align per l\'allineamento del testo nel paragrafo

<p align=“left”> testo allineato a sinistra </p>

<p align=“right”> testo allineato a destra </p>

<p align=“center”> testo allineato al centro </p>

L’allineamento al centro si può ottenere anche con il tag

<center>

testo da centrare

</center>

cristina gena - [internet web html]

slide71
HTML
  • FORMATO DEL CARATTERE
  • Esistono vari modi per cambiare il formato dei caratteri
  • Stili fisici (disuso…)
  • Stili Logici
  • STILI FISICI
  • <b> testo</b> testo in grassetto
  • <i>testo</i> testo in corsivo
  • <u>testo</u> testo sottolineato (sconsigliato..)

cristina gena - [internet web html]

slide72
HTML
  • STILI LOGICI
  • <STRONG>testo</STRONG> {grassetto}
  • <EM> testo</EM>{emphasized (corsivo)}
  • <CODE>testo</CODE>
  • {per codice di computer (font con caratteri a grandezza fissa)}

cristina gena - [internet web html]

slide73
HTML
  • Liste di elementi
  • Può essere utile poter costruire liste di elementi
  • HTML fornisce 2 tag per creare le liste
  • LISTE NON NUMERATE
    • <ul>  unordered list
  • LISTE NUMERATE
      • 2. <ol>  ordered list

cristina gena - [internet web html]

slide74
HTML
  • 1) Liste non numerate: <UL>
  •  Il menu prevede due primi:
  • <ul>
      • <li> penne all’arrabbiata </li>
      • <li> lasagne al forno </li>
  • </ul>

cristina gena - [internet web html]

slide75
HTML
  • 2) Liste numerate:<OL>
  • Il menu prevede due primi
  • <ol>
      • <li> penne all’arrabbiata </li>
      • <li> lasagne al forno </li>
  • </ol>
  • Produce
  • Il menu prevede due primi
  • 1. penne all’arrabbiata
  • 2. lasagne al forno  

cristina gena - [internet web html]

slide76
HTML

Commenti

Può essere utile inserire dei commenti nel documento che non sono visualizzati dal browser

<!-- Questo è un commento e non si vede -->

cristina gena - [internet web html]

slide77
HTML

Immagini

Fino ad ora abbiamo visto come si può formattare il testo; HTML permette di inserire immagini usando il tag <img>

• l\'immagine deve essere memorizzata su un file a parte

i browser supportano formati quali GIF, JPEG

BITMAP, PNG

• il tag <img> ha vari attributi

cristina gena - [internet web html]

slide78
HTML

<img

src=“pathname o URL dell\'immagine”

align=“left | right” {allineamento}

alt=“text” {testo alternativo all\'immagine}

border=“numero” {larghezza in pixel del bordo}height=“numero” {altezza in pixel}

width=“numero” {larghezza in pixel}

hspace=“numero” {spazio orizzontale intorno all\'immagine}

vspace=“numero” {spazio verticale intorno l\'immagine}

>

cristina gena - [internet web html]

slide79
HTML

ATTENZIONE!

per centrare l’immagine si può usare il tag <center>:

<center>

<img scr=“crifla.jpg”>

</center>

cristina gena - [internet web html]

slide80
HTML

Suoni

È possibile associare suoni alla presentazione di una pagina usando il tag <bgsound>

Anche i suoni devono essere memorizzati su file a parte che possono essere di vari formati

• .AU, .WAV, .MP3, …

• MIDI (.mid)

Esempi di suoni:

http://www.di.unito.it/~cgena/suoni/

cristina gena - [internet web html]

slide81
HTML

<bgsound

src="pathname | URL del file sonoro" loop="numero di volte" | "infinite"

>

Il parametro LOOP serve per stabilire quante volte si deve ripetere il suono. Se assume valore infinite si ripete il suono fino a quando non si esce dalla pagina

 ES:

<bgsound src="suoni/pippo.wav" loop="3">

cristina gena - [internet web html]

slide82
HTML

Tabelle

Per creare una tabella si usa il tag

<table>

istruzioni righe e celle della tabella

</table>

<table> ha vari attributi che servono per stabilire le caratteristiche della tabella

cristina gena - [internet web html]

slide83
HTML

<table

border=“numero” {larghezza in pixel dei bordi}

align=“left | right | center”

{allineamento della tabella nella pagina}

cellspacing=“numero” {spazio in pixel tra le celle}

cellpadding=“numero”

{spazio tra bordo e contenuto delle celle}

width=“numero | percentuale”

{larghezza della tabella in pixel o in %}

height=“numero | percentuale”

{lunghezza della tabella in pixel o in %}

summary= “descrizione del contenuto ” >

cristina gena - [internet web html]

slide84
HTML

TABELLA: LE RIGHE

<tr> nuova riga </tr>

<tr

align= “left | right | center” {allineamento nella riga}

valign= “top | middle | bottom |baseline”

{allineamento del testo rispetto alle celle}

bgcolor = “colore”

>

cristina gena - [internet web html]

slide85
HTML

TABELLA: LE CELLE

<td> nuova cella all’interno delle righe </td>

<td

align= “left | right | center” {allineamento nella cella}

valign= “top | middle | bottom |baseline”

{allineamento del testo rispetto alle celle}

bgcolor = “colore”

width=“numero | percentuale”

{larghezza della cella in pixel o in %}

height=“numero | percentuale”

{lunghezza della cella in pixel o in %}

>

cristina gena - [internet web html]

slide86
HTML

ES:

<table> <tr><td>Questa è la prima riga.</td></tr> <tr><td>Questa è la seconda riga.</td></tr></table>

cristina gena - [internet web html]

slide87
HTML

FORM

In alcuni documenti HTML può essere utile creare dei moduli che possono essere riempiti da chi consulta le pagine stesse e inviati a chi gestisce il sito o al server stesso.

Le informazioni inserite possono poi essere spedite per e-mail o attraverso una tecnologia server (pagine php, asp, …)

Per creare i moduli si deve usare il tag

<FORM>

modulo

</FORM>

cristina gena - [internet web html]

slide88
HTML

cristina gena - [internet web html]

slide89
HTML

FORM

I comando di "submit" deve sempre essere presente (a meno che si sostituisca la sua funzione con del codice Javascript).  

• "submit" quando viene cliccato spedisce il modulo (o meglio esegue l’azione specifica nell’action)

• "reset" quando cliccato cancella tutti i dati inseriti nel form (sarebbe meglio non usarlo….)

cristina gena - [internet web html]

slide90
HTML

FORM

È necessario creare degli elementi affinché l’utente possa inserire del testo e-o fare delle scelte, come

• testo libero

• check box (caselle a selezione multipla)

• radio box (caselle a selezione singola)

• menù a selezione singola o multipla

Ogni elemento deve avere un nome univoco che sarà associato ai dati inseriti dall’utente (nella forma nome=valore)

cristina gena - [internet web html]

slide91
HTML

Il tag <INPUT>

<input

type= "text" {input di testo}

"radio" {crea radio box}

"checkbox" {crea checkbox}

"password" {crea un campo password}

“hidden" {crea un campo nascosto}

“file" {per inserire dei file}

"submit“-"reset">

Il tag input ha degli attributi che dipendono dal type

cristina gena - [internet web html]

html il tag input
HTMLIl tag <INPUT>

1) type=“text”

< input type="text"

name="nome del campo di input"

size="numero"{larghezza in numero di caratteri}

value="testo" {testo di default–di solito vuoto}

maxlength="45” {numero massimo di caratteri inseribili}

>

ES: < input type="text" name="nazionalita"

size=“20” value="italiana“ maxlength=“50” >

cristina gena - [internet web html]

slide93
HTML

Il tag TEXTAREA

Per creare un campo di testo di più righe

<textarea

name="nome“ {nome del campo}

rows=“numero” {numero di righe per scrivere}

cols=“numero” {numero di colonne per scrivere}

>

questo sito è un capolavoro

</textarea>

cristina gena - [internet web html]

slide95
HTML

5) type="submit"

type="reset"

value="testo che compare sul bottone"

cristina gena - [internet web html]

xhtml
XHTML

Extensible  è basato su XML

Hypertext

Markup

Language

http://www.w3.org/TR/2000/REC-xhtml1-20000126

http://www.w3c.cnr.it/traduzioni/xhtml1-it.html

cristina gena - [internet web html]

xhtml1
XHTML

HTML  L’ultima raccomndazione rilasciata dal W3C è 4.01 (dicembre 1999).

http://www.w3.org/TR/html4/

XML XML è una sorta di "super-linguaggio" che consente la creazione di nuovi linguaggi di markup

http://www.w3.org/TR/2000/REC-xml-20001006

XHTML I tag sono gli stessi, ma il documento deve essere valido e ben formato

cristina gena - [internet web html]

xhtml2
XHTML
  • Il linguaggio torna a definire solo la struttura del del documento (la forma è stabilita da CSS)
  • È portabile capacitàdi un documento di essere visualizzato e implementato efficacemente su diversi dispositivi : PC, PDA, WebTV.
  • È estensibile
  • È accessibile

cristina gena - [internet web html]

xhtml3

L’elemento radice deve essere preceduto dal DOCTYPE

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" (identificatore della DTD)

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  il documento deve essere valido (e ben formato*)

(obbligatorio)

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">  l’elemento radice devo contenere la dichiarazione dello spazio dei nomi

<body>….. <head></head>

*deve rispettare le regole della sintassi XML: presenza di un elemento radice, corretto annidamento degli elementi, chiusura obbligatoria dei tag vuoti, etc.

cristina gena - [internet web html]

slide100

XHTML

  • Esistono 3 tipi di dtd
    • Strict  è la più rigida e non supporta i tag deprecati
      • <applet>, <basefont>, <center>, , <font>, <frame>, <frameset>, <iframe>, <noframes>,<u>
    • Transitional la più usata, è quella di transizione, Supporta tutti gli elementi e gli attributi di presentazione di HTML 4.0, anche quelli ritenuti sconsigliati.
    • Frameset  E\' identica alla Transitional, ma va usata quando si utilizzano i frame

cristina gena - [internet web html]

slide101

XHTML

  • Caratteristiche principali
    • Vietati  Gli attributi per il testo, i link, il colore di sfondo e i margini sono espressamente vietati solo nella DTD Strict, ma erano già sconsigliati in HTML 4.0. Non vanno pertanto usati e devono essere sostituiti dai CSS. Es.
    • alink
    • background
    • bgcolor
    • font
    • link
    • text
    • vlink

cristina gena - [internet web html]

slide102

XHTML

  • Caratteristiche principali
    • Gli elementi devono essere correttamente annidati.  gia lo sappiamo!
    • I nomi dei tag e degli attributi devono essere in minuscolo.  gia lo sappiamo!
    • I valori degli attributi devono essere tra virgolette  gia lo sappiamo!
    • Ogni attributo deve avere un valore. Es. <option selected="selected">

cristina gena - [internet web html]

slide103

XHTML

  • Caratteristiche principali
    • Gli elementi non vuoti devono essere chiusi. Es. <p>…</p>, <li>..<li>
    • Gli elementi vuoti devono terminare con />. Es. <br />, <img />
    • Per identificare un elemento si deve usare l\'attributo id e non name (perfetta conformità con XML). Es. <input type=“text” name=“email” id=“email”>

cristina gena - [internet web html]

ad