Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
vuoi
o PayPal
tutte le volte che vuoi
Il World Wide Web
Basato su architettura client/server -> Web server
Programma che invia delle pagine html, che vengono richieste dal computer e che vengono visualizzate sul computer
Costituito dall'insieme dei web server e i loro file
E' un sottoinsieme di internet
URL (Universal Resource Locator)
Modo di indicare un contenuto web (risorsa)
- protocollo -> dice al computer come gestire il file, come accedere alla risorsa (come)
- nome del server -> indirizzo del server (dove nella rete internet)
- percorso (o path) del file (opzionale) (dove nello specifico)
I contenuti del WWW sono specifici
Chiamati anche Pagine web
Server (web server) memorizza il file sorgente (html), descrive la pagina da visualizzare
Il browser (client) chiede qualcosa, ottiene la risposta e la visualizza
Browser crea l'immagine e la visualizza partendo dal file che contiene la descrizione (file sorgente), può adattare l'immagine alle caratteristiche del monitor, del dispositivo
della connessione, della lingua dichiarata dell'utente HTML -> linguaggio dei contenuti web Descrive la struttura delle pagine web (tipo di paragrafi; liste, tabelle e blocchi; immagini, video e altri dati multimediali da incorporare) IPERTESTO Documenti con organizzazione non sequenziale, documenti non lineari Si può passare da uno all'altro tramite link o collegamenti (ciò che lega le pagine del WWW), che permettono di "collegare" le parti di un ipertesto INTRODUZIONE A HTML5 Hyper Text Markup Language Linguaggio progettato per descrivere la struttura delle pagine Web (Formato descritto da tecnologia CSS) Uso di specifici strumenti per marcare il testo -> tag (etichettature) Tag -> parole o sigle racchiuse tra parentesi angolari (< >) Si usano a coppie (tag di apertura e tag di chiusura)(maiuscolo)Sequenza di caratteri racchiusa al loro interno —> stringa
Ci sono delle etichette(tag) utilizzate per dare enfasi
Enfasi: —> il teso deve essere enfatizzato, il browser decide come enfatizzarlo
Corsivo (italic):
Grassetto (bold):
Per dare ancora più enfasi:
Si possono avere enfasi multiple, applicare più specifiche contemporaneamente
L’ordine non ha importanza
È importante che i tag siano nidificati correttamente —> ogni coppia apertura-chiusura abbia la giusta corrispondenza
Es:
Veni, Vidi,Vici!
—> erratoVeni, Vidi, Vici!
—> correttoTAG SINGOLI
Tan che non hanno chiusura, poiché non ha senso che contengano del testo al loro interno
—> serazione fra parti
del documento (riga orizzontale di separazione)
—> interruzione di singolo capoverso (a capo forzato)
STRUTTURA PAGINA HTML
<!doctype html> —> considera tutto il contenuto come html
<html><head><meta …>Dati iniziali e titolo della pagina</head><body> Contenuto principale della pagina</body></html>
TAG NOTEVOLI
<!doctype html> —> indica al browser la versione del linguaggio htm
<meta charset=“utf-8”/> —> specifica la codifica dei caratteri utilizzata nel documento
INTESTAZIONI
HTML descrive la relazione tra le diverse parti di un documento
Dal livello 1 fino al livello 8: h1, h2, h3 ecc (di rilevanza decrescente)
FORMATTAZIONE HTML
Le righe del codice sorgente non corrispondono a quelle visualizzate (non WYSIWYG = What You See Is What You Get)
Codice HTML dice al browser quale sia la struttura della pagina in base al significato dei tag non all’aspetto del codice
sorgente. FORMA BEN STRUTTURATA —> rende facile la comprensione e la manutenzioneSPAZI NEL CODICE SORGENTE —> browser è insensibile agli spazi (space insensitive)
Utilizzati per facilitare la leggibilità da parte degli umani (spazi, tabulazioni, a capo)
IL BROWSER E GLI SPAZI
Ignora gli spazi, tranne uno. Trasforma sequenze di più spazi in uno solo, prima di elaborare il codice HTML
Unica eccezione —> tag <pre> e </pre> (performattel) (codice in un linguaggio di programmazione)
ALTRI TAG
<a href=“ref”> </a> —> collegamento a un link, nuova pagina. Href=“ref” indica l'URL della destinazione. “Ref” deve essere il riferimento a un file HTML. Genera contenuto ipertestuale
<img src”ref”> —> immagine. “Ref” deve essere l'URL di un file immagine (.jpg, .png, .gif)
ATTRIBUTI DEI TAG
Aggiungono ulteriori indizi azioni al tag
Sonoall'interno delle parentesi angolari di apertura. Ad esempio:
come tag visualizzando scorrettamente il testo (perché ignora gli spazi). CODICE DI ESCAPE Viene utilizzato per indicare i simboli speciali. & seguita da un codice specifico e da un punto e virgola. < viene visualizzato come < e > viene visualizzato come >. LETTERE ACCENTATE Nelle versioni di HTML precedenti, con codifica ASCII del testo, era necessario utilizzare simboli anche per gli avventi. Ora con utf-8 non è più necessario. è indica "è". CASCADE STYLE SHEET Tecnologia che attribuisce proprietà grafiche, visive alle etichette della pagina. Attribuiscono proprietà ai tag della pagina. Sono il modo formalmente e semanticamente.
Corretto per descrivere il layout e la formattazione (<strong>, <em> sono specifiche di struttura, non prescrizioni di formato visualizzato)
Linguaggio di specifica della formattazione<style> indica lo stile del documento (sta sempre nell’head)
Body {background-color: black; color:white}
H1 {color:red}</style>
STILI INLINE
Applica una specifica di stile ad una specifica occorrenza del tag
Esempio: <b style=“color:crimson”>Si applica solo a quel tag, non a tutti i tag della pagina
COME INIDICARE I COLORI
Un numero esadecimale prefisso da un # che indica le componenti RGB
COLLEGAMENTI È ÀNCORE
Collegamento ipertestuale
Àncora: il testo da cui parte il link del documento attuale
Riferimento ipertestuale: l’indirizzo delle pagine web arrivo del link
<a href=“url del file”> testo </a>
URL: PATH ASSOLUTO
Riferimento a pagine su altri siti Web
È un URL http://www.uniud.it/
http:// —> protocollo
www.uniud.it —> indirizzo /—> percorsoURL: PATH RELATIVO (solo un percorso, senza protocollo e indirizzo)
Riferimento a pagine locali (pagine sullo stesso server web del documento che stiamo considerando)
- Se nella stessa directory: il nome del file “prova.html”
- In un’altra directory: il path per trovarli
IMMAGINI
Usa gli stessi path dei link
Formato delle immagini dipende dal browser, quello che è in grado di interpretare
DOVE VANNO LE IMMAGINI?
Per default, le immagini sono inserite nel punto dove c’è il tag
Questo comportamento può essere modificato attraverso i CSS
LISTE
Puntata (non ordinata) <ul> </ul>
Numerata (ordinata) <ol> </ol>
Per gli elementi della lista utilizzati i tag <li> < /li>
SOTTOLISTA
Possibile nidificare una lista all’interno di un’altra lista
- testo
- testo
- testo
- testo
- testo
TABELLE
Usati i tag <table> </table>
Ogni riga è racchiusa tra <tr> </tr>
Ogni cella è racchiusa tra <td> </td>
ANCORA TABELLE
Si può creare un'intestazione centrata sopra la tabella con i tag <caption> </caption>
Le intestazioni di colonna sono la prima riga della tabella, inserendo al posto dei tag delle celle i tag <th> </th>
PRIVACY E SICUREZZA
Privacy — il diritto della persona di scegliere liberamente le circostanze e la misura in cui rivelare ad altri se stessa, il proprio atteggiamento e il proprio comportamento
Riguarda:
- i nostri corpi
- i nostri luoghi
- le informazioni
- le comunicazioni personali
Aspetti che riguardano la sfera privata dell'individuo
"Con i moderni dispositivi è possibile violare la privacy delle persone senza che se ne accorgano."
Nel 1890,
SOCIAL NETWORK
Riduzione volontaria della propria privacy: "La rete non dimentica mai." - comporta grandi rischi
Utilizzati regolarmente anche per le assunzioni
CHI MINACCIA LA PRIVACY?
Aziende commerciali - per campagne di marketing mirate
Organi governativi (soprattutto in Paesi meno democratici)
Spionaggio
Malavita (truffe)
COOKIE
Un piccolo file che contiene sette campi di informazione
Serve a identificare univocamente una sessione
Il cookie è memorizzato sul computer client, lettura e scrittura solo dal sito che si sta visitando
Tecnologia che è nata per ovviare all'assenza di memoria delle connessioni client/server
Nata per creare un minimo livello di memorizzazione
A seguito della prima operazione (client fa richiesta server risponde), server dà un cookie (nel quale scrive delle informazioni) che viene poi
rinviato nella prossima operazione
Il problema avviene quando i cookie non viene usato per questo scopo buono, ma per tenere traccia dei nostri comportamenti. Chiamati THIRD PARTY COOKIE
Quando ci colleghiamo a un determinato sito, il client fa richiesta al server. Questo server incorpora nella pagina web di risposta non solo i suoi cookie ma anche i cookie di un altro server. Usa delle immagini non visibili da noi, il client per poterla visualizzare deve chiedere l'immagine al server. È un'immagine minima ma basta per essere scaricata dal nostro client. Quando la scarica, scarica non solo i cookie legittimi ma anche i cookie d