INTRODUZIONE HTML - Dott. Giuseppe Sgroi-Dipartimento di Matematica e Informatica - 20 Marzo 2019- DMI Unict

INTRODUZIONE HTML
           - Dott. Giuseppe Sgroi –
-   Dipartimento di Matematica e Informatica –

              -   20 Marzo 2019 –

COS’È IL WEB ?
• Il web è “una rete di risorse di
  informazioni”.
• E’ composto da 3 elementi
  fondamentali:
    1. Un Uniform Naming Scheme per
       localizzare le risorse nel Web
       (e.g., URIs).
    2. Protocolli, per accedere alle
       risorse “per nome” del Web (e.g.,
       HTTP / HTTPS)
    3. Ipertesti per la navigazione sul
       Web (e.g., HTML)

URI (Uniform Resource Identifier)
Ogni risorsa disponibile su web (documenti
HTML,immagini,video,mp3,...) ha un indirizzo che può essere
codificato da un URI.
L'URI è un modo generico ed estendibile per identificare le
risorse. Gli URL e gli URN, specificano come identificarle.
Gli URL identificano una risorsa attraverso l'indicazione su
come ottenerla/prelevarla dalla rete;
Gli URN identificano una risorsa attraverso un nome, creando
un identificatore per la risorsa che sia persistente e
indipendente dalla posizione.
                                                                                       Esempi
Un URI consiste tipicamente da tre parti:                      Indirizzo WEB:
1. Meccanismo usato per accedere alla risorsa (Naming          http://svg.dmi.unict.it/~xml/xml2006/index.html
   Scheme);
                                                               • Naming Scheme: accedo alla risorsa tramite il
2. Nome della macchina su cui risiede la risorsa                 protocollo http;
   (Machine Hosting);                                          • Machine Hosting: questa risorsa si trova sul server
                                                                 www.dmi.unict.it
                                                               • Risorsa: index.html
3. La Risorsa: Il path della risorsa sulla macchina che
   ospita;

URI (cont.)
                         A che cosa servono gli URI?
• Creare Link ad un altro documento o risorsa;

• Creare Link a fogli di stile o script esterni;

• Inserire un’immagine o un oggetto nelle pagine;

• Spedire una form;

• Citare riferimenti esterni;

• Riferirsi a metadati che descrivono i documenti;

COS’È L’HTML ?
HTML (Hyper Text Markup Language) è un semplice
linguaggio basato su un sistema di tag o tagging scheme,
derivato dal linguaggio SGML.

I documenti HTML possono essere creati da semplici editor di
testo (es. Wordpad) o generati dinamicamente da linguaggi
di scripting sever side (PHP, Python, etc.)

§   Tramite l’HTML si può:
     § Pubblicare documenti online con titoli, testo,
       tabelle, liste, foto, etc.
     § Recuperare informazioni online cliccando i links
       ipertestuali
     § Costruire forms per condurre transazione con servizi
       remoti, per fare ricerche, prenotare alberghi, fare
       acquisti ecc.
     § Inserire fogli di calcolo, video, suoni, e molte altre
       applicazioni.

QUANDO, DOVE E CHI HA INVENTATO L’HTML ?
L'HTML è stato sviluppato nei primissimi anni 90’ da Tim
Berners-Lee al CERN di Ginevra (Svizzera), assieme al
protocollo HTTP dedicato al trasferimento di documenti in
tale formato.

Nel 1989 Tim propose un progetto che riguardava la
pubblicazione di ipertesti, noto con il nome di "World
Wide Web".

All'interno di questo progetto in seguito nacquero sia il
server web "httpd" (HyperText Transfer Protocol
Daemon), sia il client WorldWideWeb (il primo browser
della storia), il cui uso fu esclusivamente interno al CERN
fino alla sua pubblicazione nella rete internet nel corso del
1991.

La prima versione dell'HTML, fu ufficialmente resa
pubblica nel giugno del 1993.

LA PRIMA PAGINA HTML

Questa è in assoluto la prima pagina web mai scritta!!!

     Ed era ospitata da questo server:
     • 8 Mega di RAM
     • 256 Mega di Hard Disk
     • Processore a 25 MHz

VERSIONI DI HTML

• HTML – 1990          • HTML 4.0.1 – 1999

• HTML 2.0 – 1995      • XHTML – 2000

• HTML 3.2 – 1997      • XHTML 1.1 – 2001

• HTML 4.0 – 1998      • HTML5 - 2014

STRUTTURA DI UNA PAGINA HTML

          Il mio primo
HTML!
    
          Hello World !

STRUTTURA DI UNA PAGINA HTML

STRUTTURA DEI TAG HTML
Un generico TAG HTML (elemento) è del tipo:
 Parte interna (può contenere altri tag) 

Vediamo, alcune buone abitudini:
Ø In HTML i tag sono scritti solo in minuscolo.

Ø   In HTML tutti i TAG devono essere chiusi (I tag singoli si chiudono con / es. )

Ø   I valori degli attributi vanno scritti sempre tra “ “;

Nelle varie versioni di HTML, spesso si sono mantenuti obsoleti o “sbagliati” alcuni tag e
alcuni attributi per retro-compatibilità. Tali elementi vengono detti “deprecated”.

COS’È UN BROWSER ?

Un Browser è un particolare software che consente di
recuperare, presentare e navigare determinate risorse sul
Web, tipo pagine, immagini, video, canzoni o altri tipi di
contenuti, identificandole attraverso un appropriato URL.

Tipici esempi di browser sono Google Chrome, Internet Explorer,
Mozilla Firefox, Microsoft Edge, Safari.

Per fare questo l’utente in genere utilizza un indirizzo sotto forma di
URL, tipo https://www.google.it, inserendolo nella relativa barra
degli indirizzi del browser in uso.

Di solito, però, il browser viene utilizzato per lo più attraverso un
motore di ricerca, tipo Google, che in base ad una o più parole
chiave permette di restituire un certo insieme di risultati.

TAG HTML

                                             ...
Delimita un documento HTML. Questi tag sono opzionali in HTML ma alcuni browser e altre utility possono non
riconoscere il documento senza di essi.

Attributi:
•   Lang: Specifica la lingua del contenuto della pagina (IT, EN)
•   Dir: Specifica la direzione del testo (Left o Right)
•   Translate    : Specifica se il contenuto di una pagina deve essere tradotto o meno

TAG HEAD

                                              ...
Delimita la sezione header (d'intestazione) del documento che contiene informazioni sulla pagina. Questi tag sono
opzionali in HTML; se omessi l'esistenza dell'header può essere dedotto in altri modi.

Tag opzionali:
•   title: Indica il titolo della pagina
•   style: Specifica un foglio di stile per il documento
•   link: Specifica qualsiasi tipo di link per un documento, l’uso più comune è collegare un foglio di stile;
•   meta: utilizzato per specificare la descrizione della pagina, parole chiave, social (Facebook e Twitter), etc.
•   script: utilizzato per includere JavaScript o altri script nel documento.

TAG BODY

                                              ...
Delimita il corpo del documento che contiene i contenuti visualizzati nella pagina. Come  e  i tag non sono
necessari se il documento è in HTML.

Alcuni attributi opzionali:
•   background: Specifica un'immagine di sfondo per un documento
•   bgcolor: Specifica il colore di sfondo di un documento

IDENTIFICATORI
Un selettore ID o identificatore, svolge funzione di etichetta di un
contenitore o tag, così che quando serviranno basterà richiamare il nome
del selettore (ID) e con esso saranno richiamati tutti i valori a lui associati.

q   Gli attributi id, class vengono usati rispettivamente per assegnare un
    nome unico ad un elemento e per assegnare l’elemento ad una o più
    classi.

q   Ad esempio id viene usato come selettore di stile, per i link, per i
    linguaggi di script, ecc.

q   Class viene usato sostanzialmente per i fogli di stile

ELEMENTI INLINE o BLOCK-LEVEL

Gli elementi o tag HTML si distinguono in “inline” o “block level”.

I block-level contengono altri block-level o inline, gli inline solo dati o altri
inline.

Ad esempio:
• Block-level: il tag …

• Inline: il tag …

TAG PIU’ UTILI
 grassetto (bold)

 sottolineato (underlined)

 corsivo (italic)

 crea delle linee separatorie

 testo centrato

 crea testo più piccolo

 crea testo più grande

 testo barrato

RAGGRUPPARE GLI ELEMENTI: DIV e SPAN
                              …
Contenitore per elementi block-level;

                              …
Contenitore per elementi inline;

Attributi:
• Id
• Class
• Align: Allineamento del testo, left|center|right|justify;

TITOLO (HEADINGS)

                         Da ... a …

Intestazioni (o Titoli) a diversi livelli. Si utilizza  per il livello massimo di
intestazione (la sezione principale),  per il successivo livello sottostante
(sottosezione),  per un livello al di sotto del precedente e così via. Il
livello più basso d'intestazione è .

Gli elementi d'intestazione non sono utilizzabili solamente per creare testo
grande o in grassetto: indicano il testo più importante della pagina,
descrivono la struttura del documento e l'organizzazione.

CITAZIONI (BLOCKQUOTE)
                       …

Crea una citazione. Può automaticamente aggiungere delle virgolette.

                                 …

Crea una breve citazione. Può essere visualizzata con virgolette. Si usa per
inserire citazioni in mezzo del testo.

Attributi:
• Cite: può fornire la fonte e deve essere una URL completa.

AGGIUNGERE I COMMENTI

E’ possibile includere in una pagina web un commento, che non verrà mai
visualizzato dal browser.

Il commento ha la seguente sintassi:

APICE E PEDICE

                         ... e …

Crea un testo Pedice o un Apice.

Ad esempio:
• Scrivere l’equazione: y=ax2+bx+c
   • y=ax2+bx+c

• Scrivere la matrice: Mi,j
  • Mi,j

LINEE E PARAGRAFI

                                 …
Crea un paragrafo. In HTML il tag di chiusura non è opzionale.

                               …
Crea del testo preformattato, cioè del testo che viene stampato dal
browser così come lo abbiamo scritto.

Specifica un'interruzione di linea. Si utilizza per andare “a capo”
forzatamente. E’ un tag che non si chiude. Se viene scritto consecutivamente
2 volte, non va “ a capo ” ma salta una riga.

FONT
                                      …
Specifica alcune caratteristiche del font utilizzato.

Attributi:
•   size: definisce la grandezza de testo
•   color: definisce il colore del testo
•   face: definisce il tipo di font
Esempi:
• text (Crea testo verde)
• text (Crea testo di grandezza 4)
• text (Crea testo con il font verdana)

COLORI
•   Si possono usare fino a 16 milioni di colori.
•   Si possono descrivere in formato decimale o esadecimale.

Decimale:
    •   rgb(R,G,B) - da 0 a 255
         •   rgb(255,0,0); ROSSO

Esadecimale:
    •   #000000 – da 00 a FF
         •   #FF0000 ROSSO

COLLEGAMENTI IPERTESTUALI
                                     testo collegamento
Un collegamento ipertestuale è un testo contenente un link per collegarsi ad un sito internet o
ad una risorsa per leggerla o scaricarla. Un link può puntare ad una parte della stessa pagina.

Di solito, la parte compresa tra l’inizio e la fine del tag, viene sottolineato e quando ci si passa
sopra il cursore del mouse cambia forma. Va chiuso obbligatoriamente.

Attributi:
•   href: indica la destinazione della risorsa. Può essere relativo (nello stesso computer) o assoluto (URL
    completo)
•   title: indica il nome del link
•   target: permette di aprire il link nella stessa finestra del browser ( _self - default) , in una nuova finestra
    (_blank);

COLLEGAMENTI IPERTESTUALI (cont.)
Alcuni esempi:

1.    Link alla pagina dell’università
     • Se clicchi qui vai al sito
         dell’università di Catania 

2.    Link alla pagina di Google in un’altra finestra
     • Vai a
         Google

3.    Link ad una risorsa locale
     • Apri
         risorsa

ESERCIZI

                  Esercizio 1                                                 Esercizio 3

   Scrivere la struttura minima di HTML e                 Aggiungere un commento ad una pagina HTML.
    visualizzarla su un qualsiasi browser.

                  Esercizio 2                                                 Esercizio 4

Visualizzare il codice sorgente di una qualsiasi          Scrivere i tag: h, blockquote, sub, sup, p, pre, br
           pagina web dal browser.                                             ed a (link).

INTRODUZIONE HTML
           - Dott. Giuseppe Sgroi –
-   Dipartimento di Matematica e Informatica –

              -   25 Marzo 2019 –

IMMAGINI
                                         
Permette di inserire un’immagine all’interno di un documento html. E’ un tag di tipo
Inline. Le immagini consentite sono solo di tipo: .gif, .jpg e .png qualsiasi altro formato
non verrà visualizzato perchè c’è il rischio che non sia elaborato da tutti i vari browser.

Attributi:
•   src: definisce l’indirizzo URL del file che vogliamo visualizzare (Path assoluto o
    relativo)
•   alt: definisce testo alternativo nel caso l'immagine non possa essere visualizzata.
•   width: definisce la lunghezza dell’immagine (in % o in pixel)
•   height: definisce l’altezza dell’immagine (in % o in pixel)

IMMAGINI (cont.)

IMMAGINI: MAP e AREA
                          …

Il tag  definisce una zona all’interno di una mappa immagine (una mappa
immagine è un’immagine con varie zone cliccabili).

Attributi:
•   coords: definisce le coordinate in pixel dell’area.
•   href: definisce il link alla risorsa (locale o esterna).
•   shape: definisce la forma dell’area (rettangolare, circolare, poligonale)
•   target: permette di aprire il link nella stessa finestra del browser ( _self - default) , in
    una nuova finestra (_blank);
•   alt: definisce un testo alternativo per un’area.

IMMAGINI: MAP e AREA (esempio)

TABELLE
                                            …
Le tabelle in HTML costituiscono un modo per organizzare “dati” in righe e colonne;
Le “celle” di ogni tabella delle possono contenere:
    • Testo
    • Immagini
    • Link

Il tag  definisce una tabella e necessita di almeno altri due tag  e  (descritti più avanti) che
servono per definire righe e colonne.

Attributi:
• align: consente di specificare l’allineamento della tabella rispetto al documento (center, left o right)
• background: permette di avere un’immagine come sfondo della tabella
• bgcolor: permette di avere un colore come sfondo della tabella
• border: permette di avere un bordo in tutte le celle della tabella (0 nessun bordo, >= 1 bordo 1px)
• width: permette di specificare la larghezza della tabella (in pixel o %)

TABELLE: 
                                           …

Il tag  inserito all’interno di  definisce l’inizio di una riga della tabella, significa
che il numero di righe di una tabella è pari al numero di elementi  in essa contenuti.

Non contiene dati al suo interno in quanto serve solo per creare la struttura delle righe.

TABELLE: 

                                        …
Il tag  inserito all’interno di  e di  definiscono la cella vera e propria della
tabella.

 supporta tutti gli attributi di  quindi non soltanto i vari allineamenti ma è
possibile avere anche colori e/o immagini di sfondo diversi e indipendenti tra le singole
celle.

TABELLE: Esempio

ELENCHI

L’HTML permette di rappresentare dati sotto forma di elenco.

Essi, si dividono in due principali categorie:
                               • Elenchi Ordinati
                            • Elenchi Non Ordinati

ELENCHI: 

                                   …

Il tag  (list item), da solo serve a poco perchè deve essere combinato
con altri tag, come ol e ul descritti nelle slide successive.

E’ un tag inline e non necessita della chiusura  ma è consigliato
metterla.

ELENCHI ORDINATI: 
                                             …
Il tag  (order list) lista ordinata, richiede al suo interno il tag  per visualizzare le voci in
elenco. Serve per creare una lista ordinata e numerata di un elenco puntato di voci.

Attributi:
•   type: definisce il tipo di lista
    •   type=“A” (Lettere maiuscole) - Ex: A, B, C, …
    •   type=“a” (Lettere minuscole) - Ex: a, b, c, …
    •   type=“I” (Numerazione romana maiuscola) - Ex: I, II, III,
    •   type=“i” (Numerazione romana minuscola) - Ex: i, ii, iii, …
    •   type=“l” (Numeri come da default) - Ex: 1, 2, 3, …
•   start: cambia il valore iniziale nel caso in cui si volesse partire da un qualsiasi numero
    diverso da “1”, o da una lettera diversa da “a”;

ELENCHI ORDINATI:  (esempio)

ELENCHI NON ORDINATI: 

                                             …

Il tag  (unorder list) lista non ordinata, richiede al suo interno il tag  per visualizzare le
voci in elenco. Serve per creare una lista non ordinata di un elenco puntato di voci.

Attributi:
•   type: definisce il tipo di simbolo della lista
    •   type=“disc” (Disco solido)
    •   type=“circle” (Cerchio)
    •   type=“square” (Quadrato)

ELENCHI NON ORDINATI:  (esempio)

MARQUEE
                                   …
Il tag  permette di creare l’effetto di testo scorrevole sullo schermo, con molte
combinazioni possibili a disposizione. E’ un tag inline.

Attributi:
• behavior: indica il tipo di movimento del testo
    Ø scroll: il testo arrivato alla fine viene ripresentato dall'inizio in modo continuo;
    Ø slide: il testo arrivato alla fine si ferma;
    Ø alternate: il testo arrivato alla fine rimbalza e torna indietro;
• direction: indica la direzione del movimento
    Ø left: verso sinistra;
    Ø right: verso destra;
    Ø up: verso l'alto;
    Ø down: verso il basso;
• loop: indica il numero di volte per il quale il movimento deve ripetersi. Se non specificato equivale a
    infinito.
• scrollamount: indica la velocità del movimento. Il numero è espresso in pixel al secondo.
• bgcolor: specifica il colore di sfondo.

CSS
La sigla CSS sta per Cascading Style Sheets, in italiano fogli di
stile.

Il CSS è un linguaggio che gestisce il design e la
presentazione delle pagine web (cioè l’aspetto estetico) e
lavora in combinazione con l’HTML

Con il CSS potete stabilire le regole secondo cui il sito dovrà
mostrare le informazioni, mantenendo tutti i comandi
relativi alla formattazione e allo stile (font, colori,
dimensioni, ecc) separati da quelli relativi al contenuto.

Vengono chiamati cascading (a cascata) perché i fogli di stile
su cui lavorare sono svariati, ma solo uno eredita a cascata
tutte le proprietà dei fogli precedenti.

CSS (cont.)
Esistono tre tipi di fogli di stile CSS: esterni, interni, in linea.

§ Gli stili esterni controllano l’aspetto degli oggetti presenti su diverse
  pagine di un sito.

§ Gli stili interni controllano l’aspetto di una singola pagina.

§ Gli stili in linea controllano solo un elemento su di una singola pagina,
  anche una sola parola.

NB: E’ possibile utilizzare fogli di stile multipli all’interno della stessa pagina
HTML;

CSS: Esempi
CSS Esterni                   CSS Interni

               CSS In linea

FORM
                                      …
Il tag  serve per creare un modulo input per l’inserimento dati.

In un documento html possono esserci più moduli ma questi dovranno essere tutti
indipendenti fra di loro, nel senso che il tag  non può essere annidato (un modulo
all’interno di un altro modulo) come per le tabelle o per altri tags di html.

L’elemento form necessita di alcuni attributi per funzionare: action, method ed enctype.

Attributi:
•   action: specifica la locazione del file o dello script al quale vengono inviati i dati del
    modulo
•   method: specifica il metodo per accedere all’URL dichiarato in action (GET e POST)
•   enctype: specifica il tipo di media utilizzato per codificare i dati del modulo

FORM (esempio)

FORM – INPUT TEXT
                                   
Il tag  rappresenta il campo più importante di un form.
Questo campo consente di inserire o modificare dati in diversi modi a seconda del tipo di
input adoperato. In questo caso parliamo di dati testuali.

Attributi:
•   type: definisce il tipo di input (text)
•   value: imposta il valore iniziale di un campo
•   size: definisce le dimensioni del campo
•   name: definisce un nome univoco per il campo
•   maxlength: indica il numero massimo di caratteri che possono essere immessi

FORM – INPUT PASSWORD
                                
Questo attributo type viene utilizzato per le password, o meglio per inserire testo nel
campo senza che questo venga visualizzato, al posto dei caratteri inseriti si vedranno
una serie di asterischi o di pallini.

Attributi:
•   type: definisce il tipo di input (password)
•   value: imposta il valore iniziale di un campo
•   size: definisce le dimensioni del campo
•   name: definisce un nome univoco per il campo
•   maxlength: indica il numero massimo di caratteri che possono essere immessi

FORM – INPUT CHECKBOX
                                   
Questo attributo di type viene utilizzato per caselle di scelta dove il suo valore è di tipo
booleano, cioè può essere soltanto vero o falso, si o no.

Attributi:
•   type: definisce il tipo di input (checkbox)
•   value: imposta il valore iniziale di un campo
•   name: definisce un nome univoco per il campo

FORM – INPUT RADIOBOX
                                 
Questo attributo di type viene utilizzato per selezionare un singolo valore su campi radio
con diverse alternative.

Attributi:
•   type: definisce il tipo di input (radio)
•   value: imposta il valore iniziale di un campo
•   name: definisce un nome univoco per il campo
•   checked: definisce una scelta iniziale

FORM – INPUT FILE
                                   
Questo attributo di type viene utilizzato per inviare un file contenuto nel proprio PC,
ovviamente il server che lo riceve deve essere configurato per poterlo archiviare sul
disco.

Attributi:
•   type: definisce il tipo di input (file)
•   name: definisce un nome univoco per il campo

FORM – ALTRI INPUT

FORM – SELECT
                                   …
Il tag  consente di effettuare delle scelte, singole o multiple, rappresentate dai vari
elementi .

Attributi:
•   multiple: per effettuare diverse scelte (facoltativo)
•   name: definisce un nome univoco per il campo

FORM – TEXTAREA
                                …
Il tag  consente di immettere testo su più righe, praticamente si crea un’area per
l’immissione di testo decisamente più comoda di una sola riga nel caso in cui si prevede
l’introduzione di testo libero di una certa lunghezza.

Attributi:
•   name: definisce un nome univoco per il campo
•   cols: definisce la dimensione per colonne
•   rows: definisce la dimensione per righe

ESERCIZI

                Esercizio 1                                                     Esercizio 2

        Scrivere un documento html                             Scrivere un documento html “marquee.html”,
 “elenchi_tabelle.html”, utilizzando i tag                       aggiungendo il relativo tag e provare I vari
e relativi attributi riproducendo tabelle ed                                     attributi.
                elenchi puntati.

                                                 Esercizio 3

                                 Scrivere un document un form con tutte le
                                  tipologie di input visti precedentemente.

INTRODUZIONE HTML
           - Dott. Giuseppe Sgroi –
-   Dipartimento di Matematica e Informatica –

              -   27 Marzo 2019 –

ESERCITAZIONE

ESERCITAZIONE (Note)

  • Il testo di tutta la pagina deve essere bianco

 • Il Titolo deve rimbalzare (behavior=alternate)

       • Immagine di sfondo (Risorsa: Link)

• L’immagine in fondo deve scorrere (Risorsa: Link)

LISTA TAG HTML

LISTA TAG HTML

LISTA TAG HTML

LISTA TAG HTML

LISTA TAG HTML

LISTA TAG HTML