Laboratorio HTML 5 e CSS PDF

Programmazione per il web - lato client - HTML e CSS  Introduzione La programmazione web si basa su un tipo di architettura chiamata client-server in cui un’applicazione client richiede dati ad un’applicazione server che glieli fornisce. Pro...

Programmazione per il web - lato client - HTML e CSS  Introduzione La programmazione web si basa su un tipo di architettura chiamata client-server in cui un’applicazione client richiede dati ad un’applicazione server che glieli fornisce. Programmare per il web significa quindi produrre almeno due applicazioni: una applicazione client una applicazione server Senza un’applicazione client che fa delle richieste, l’applicazione server sarebbe inutile. 2  Architettura client-server Il server è tipicamente un processo sempre in esecuzione su un elaboratore. Un server deve: Rimanere in ascolto di richieste da parte del client; Soddisfare ogni richiesta che arriva e se possibile consegnare il documento richiesto Segnalare gli errori con un messaggio di notifica I server vengono chiamati demoni http o web server Il termine server è usato anche per indicare il computer su cui è in esecuzione l’applicazione server. 3  Architettura client-server Il client è lo strumento a disposizione dell’utente che gli permette l’accesso e la navigazione nell’ipertesto del web. Un client deve: trasmettere all’opportuno server le richieste di reperimento dati che derivano dalle azioni dell’utente ricevere dal server le informazioni richieste visualizzare il contenuto della pagina web richiesta dall’utente, gestendo tutte le informazioni in esso contenute. I client vengono comunemente chiamati browser. Esempi di browser sono: Chrome Mozilla Firefox Safari Edge Il termine client è usato anche per indicare il computer su cui è in esecuzione l’applicazione client. 4  Il browser Definizione il Browser è un’applicazione client, in grado di emettere richieste e interpretare le risposte, è installabile su ogni dispositivo e funziona su ogni sistema operativo. E’ stabile, è sicuro, è controllato, è aggiornato di continuo. Scrivere codice per il browser significa quindi scrivere codice che funzionerà: su tutti i sistemi operativi su tutti i dispositivi (PC, tablet, smartphone). Usare il browser come applicazione client garantisce una compatibilità pressoché totale. Un browser svolge due compiti fondamentali: Traduce codice HTML e CSS in pagine web Scambia dati con la rete. Per scrivere un’applicazione client dobbiamo quindi scrivere codice per il browser 5  HTTP La comunicazione fra client e server avviene tramite il protocollo di comunicazione HTTP (Hyper Text Transfer Protocol). L’HTTP è usato come principale sistema per la trasmissione d'informazioni sul web e si utlizza direttamente dal browser. Basta infatti osservare il prefisso http:// o il prefisso https:// presente nella barra degli indirizzi del browser quando visitiamo un sito web. La (s) sta per Secure e indica la versione sicura del protocollo HTTP. Le specifiche del protocollo sono gestite dal World Wide Web Consortium (W3C). 6  Il W3C Quando si parla di HTML e CSS bisogna sempre fare riferimento agli standard scritti dal W3C, World Wide Web Consortium. Tutto ciò che vìola le direttive del w3c andrebbe accuratamente evitato. Il consorzio è consultabile a questo indirizzo web: http://www.w3.org I motivi per cui è opportuno agire in questo modo possono essere letti qui: http://www.w3.org/Consortium/mission Il w3c lavora per rendere realtà concetti quali “web for all” e “web on everything”. E’ grazie al w3c, per esempio, che oggi possiamo scrivere lo stesso codice HTML sapendo che esso produrrà la stessa pagina web su tutti i browser e su tutti i device. 7  HTML = Hyper Text Markup Language L’Html è un markup language, non un linguaggio di programmazione, ed è costituito da un insieme di markup tags. Un markup tag HTML (o semplicemente tag) è costituito da una keyword (parola chiave) compresa tra due parentesi acute, come ad esempio. In genere i tag HTML viaggiano in coppia, ad esempio e. Il primo tag, in una coppia di tag, viene chiamato tag di apertura, il secondo tag viene chiamato tag di chiusura. Questo è un semplice esempio: Titolo della pagina Il mio primo titolo h1 Il mio primo paragrafo 8  Elementi HTML Un elemento HTML è definito da tutto ciò che si trova tra l’apertura di un tag e la rispettiva chiusura. è un tag testo contenuto nel paragrafo è un elemento l contenuto di un elemento è tutto ciò che si trova tra il tag di apertura e quello di chiusura. Ad esempio nel paragrafo: Testo nel paragrafo il contenuto è rappresentato dal testo “Testo nel paragrafo”. Quindi parlare del tag significa riferirsi al solo tag, mentre parlare dell’elemento significa parlare di tutto ciò che è compreso tra e , oltre che a stesso. 9  Elementi block ed elementi inline Tutti gli elementi HTML possono essere raggruppati in 3 grandi categorie: Block: elementi che si espandono per tutto per tutta la larghezza del documento HTML e costringono ad andare a capo. Ad esempio , ,..., , , , , , , , Inline: gli elementi HTML che occupano solo lo spazio nel quale vengono utilizzati e non impongono di andare a capo. Ad esempio , , , ,. Notdisplayed: elementi che non hanno un impatto visivo nella pagina HTML. Ad esempio i tag , , Esempio: Par 1Par 2 Par 1 Par 2 10  HTML: semplici regole L’esempio proposto racchiude alcune importanti informazioni che dobbiamo assolutamente memorizzare: un documento HTML deve iniziare con il tag il tag deve contenere il tag e il tag il tag deve contenere il tag i tag possono essere (e spesso sono) annidati, cioè dentro un tag possono esserci altri tag (il tag è annidato nel tag ) i tag devono essere chiusi in ordine inverso a quello di apertura, cioè l’ultimo tag aperto deve essere il primo ad essere chiuso è uso comune e ottima regola indentare il codice HTML per renderlo più leggibile 11  Doctype, , , Titolo della pagina …….. è un’istruzione che serve ad indicare al browser quali regole dovrà usare per leggere correttamente la pagina. Non è obbligatorio e può essere omesso, ma il W3C sconsiglia di ometterlo. non è un tag HTML! E deve essere il primo elemento ad aprire il documento html. Per essere ritenuto valido, un documento HTML deve contenere almeno i tag , , , e il tag non deve essere vuoto. 12  e In linea generale si può dire che il tag rappresenta tutto il documento, mentre rappresenta la parte del documento che il browser mostrerà a video, ossia il corpo del nostro documento HTML, la pagina web visibile all’utente finale. Il tag invece contiene informazioni utili al browser, ma che non vengono mostrate a video. Il tag è un contenitore di altri tag e deve essere aperto subito dopo il tag e chiuso prima dell’apertura del tag. All'interno del tag possono trovarsi script, istruzioni per il browser, indicazioni sui fogli di stile (vedremo in seguito cosa sono), meta informazioni, il titolo del documento e altro ancora. I tag che possono essere inclusi nel tag sono: , , , , e Il tag rappresenta meta informazioni. Questo tag può avere diversi attributi che ne dettagliano il tipo. In questo caso sono http-equiv e content, ma ce ne sono altri. Il tag rappresenta il titolo della pagina, quello che compare sulla scheda del browser e come deve essere presenti nel tag , ma come abbiamo visto non sono gli unici. Tuttavia, ai fini della validazione di un file HTML, gli altri possono anche non essere presenti. 13  Attributi HTML Lo scopo degli attributi è tanto semplice quanto fondamentale: aggiungere dettagli agli elementi HTML. Ad esempio il tag ha come compito quello di indicare un link: Link al sito del Nervi Ma per creare un link servono molte informazioni. Informazioni che da solo il tag non è in grado di fornire. Ad esempio bisogna indicare dove punta il link, oppure se aprirlo nella stessa pagina o in un’altra. Per aggiungere tutte queste informazioni vengono usati gli attributi. Nel nostro esempio viene usato l’attributo “href” per indicare dove punta il link. Tutti gli attributi devono avere un valore. Il valore viene indicato tra doppi apici o apostrofi. Non è obbligatorio ma necessario nel momento in cui il valore dell’attributo contiene degli spazi. Per assegnare tale valore all’attributo si usa il segno di uguaglianza “=”. Ogni tag consente di usare alcuni attributi e questo significa che gli attributi sono tantissimi. Per una lista completa degli attributi consentiti per ogni singolo tag, si rimanda al sito del w3c. Anche per gli attributi vale la raccomandazione w3c: scriviamoli in minuscolo. 14  I tag , , , , , sono chiamati “headings” e vengono usati per evidenziare i titoli. A seconda dell’importanza del titolo si possono usare 6 tipi di Headings diversi, da a. rappresenta un titolo di primaria importanza, un titolo di ultima importanza. Gli headings non devono essere usati per mettere un testo in grassetto né, più in generale, per una questione estetica. Devono essere usati solo e soltanto per indicare effettivamente un titolo. Questo per diversi motivi, tra i quali quello che i motori di ricerca danno particolare risalto a questi tag. Un uso scorretto può quindi intaccare l’affidabilità delle ricerche sul web. Titolo h1 Titolo h2 Titolo h3 Titolo h4 Titolo h5 Titolo h6 15  Il tag viene usato per indicare paragrafi. Esempio: Questo è un paragrafo Questo è un altro paragrafo Il tag deve essere chiuso. In genere i browser “intuiscono” dove chiudere un tag non chiuso, ma è sempre opportuno chiudere tutti i tag; il tag in particolare. Per mandare a capo il testo, si può usare il tag all’interno del tag. Ad un certo punto devo andare a capo e continuare a scrivere su un’altra riga il tag non prevede il tag di chiusura. 16  Collegamenti ipertestuali Un collegamento ipertestuale (o link) è una parola, o un gruppo di parole, o anche un’immagine che si può cliccare per passare a un nuovo documento o ad una nuova sezione all'interno del documento corrente. Generalmente quando si sposta il cursore del mouse su un link in una pagina web, la freccia del mouse si trasforma in una manina. Il tag con l’attributo “href” è usato per gestire un link: