Internet www html
Download
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

  • [email protected]

  • http://www.di.unito.it/˜cgena/

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]


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]


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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    Pagine Web dinamiche: esempi

    cristina gena - [internet web html]


    Pagine Web dinamiche: esempi

    cristina gena - [internet web html]


    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]


    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]


    Specifiche HTML 4

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

    cristina gena - [internet web html]


    Pagina visualizzata nel browser

    Codice html della pagina

    Visualizza > HTML

    Visualizza > sorgente pagina

    cristina gena - [internet web html]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    HTML

    ATTENZIONE!

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

    <center>

    <img scr=“crifla.jpg”>

    </center>

    cristina gena - [internet web html]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    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]


    HTML

    cristina gena - [internet web html]


    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]


    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]


    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]


    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]



    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]


    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]


    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]


    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]


    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