HTML: Il Linguaggio del Web PDF

Prof. M. Zaninelli HTML Il linguaggio che ha creato il Web HTML 1 di 35  Prof. M. Zaninelli Il World Wide Web Si basa sul protocollo HTTP ed è stata la vera novità informatica degli anni ’90...

Prof. M. Zaninelli HTML Il linguaggio che ha creato il Web HTML 1 di 35  Prof. M. Zaninelli Il World Wide Web Si basa sul protocollo HTTP ed è stata la vera novità informatica degli anni ’90. Sviluppato presso il CERN di Ginevra è il più potente mezzo di diffusione telematica di documenti elettronici. E’ un mezzo di comunicazione globale, interattivo, multimediale e ipertestuale ed ha cambiato radicalmente il modo di comunicare e di lavorare. HTML 2 di 35  Prof. M. Zaninelli Come si legge generalmente un testo? Lettura sequenziale: ogni pagina viene visitata seguendo la numerazione delle pagine pag1 pag6 pag7 pag4 pag2 pag5 pag3 HTML 3 di 35  Prof. M. Zaninelli Come si legge un ipertesto? Lettura associativa: ogni pagina viene visitata seguendo dei legami associativi nodi (pagine) link ancore HTML 4 di 35  Prof. M. Zaninelli Cos’è il markup? In un documento, il markup è il codice che contiene le informazioni per la sua formattazione, visualizzazione e “navigazione” … e i linguaggi di markup sono i linguaggi con cui tali informazioni possono essere aggiunte ai testi HTML 5 di 35  Prof. M. Zaninelli Come si visualizza il testo? Per visualizzare un testo creato con un linguaggio di markup occorre un opportuno editor. Per questi editor, il testo è costituito da due parti: – il contenuto vero o proprio, – le “istruzioni” che specificano come il contenuto deve essere rappresentato sul dispositivo (lo schermo di un PC ma anche per esempio una stampante). Le istruzioni sono chiamate tag (o etichette o codici) e in genere racchiudono il testo vero e proprio. I tag sono comunque scritti usando i normali caratteri e perciò i documenti finali sono sempre documenti visionabili anche attraverso i normali editor di testi (Word, ecc. ) anche se non nella modalità markup. HTML 6 di 35  Prof. M. Zaninelli Cos’è l’HTML? L’Hyper Text Markup Language (HTML) è un linguaggio di markup con cui vengono scritti gli ipertesti presenti sul Web. Attenzione: l’HTML non è un linguaggio di programmazione! Come già detto, è un linguaggio che permette di descrivere la disposizione e la formattazione di tutti gli elementi presenti all’interno di un documento. HTML 7 di 35  Prof. M. Zaninelli Caratteristiche dell’HTML I documenti scritti in HTML, come per tutti gli altri linguaggi di markup, sono sempre dei file in formato testo (codice ASCII). Si possono creare anche con dei comuni editor di testo (Word, ecc.) dando l’estensione.htm o.html in fase di salvataggio. I browser (software applicativi comunemente presenti nei calcolatori) leggono i documenti HTML e li visualizzano interpretando le specifiche di formattazione e “navigazione” in modo sequenziale HTML 8 di 35  Prof. M. Zaninelli Esempio: file HTML WordPad (o qualunque altro editor di testo) Documento HTML Salvare il file nel formato solo testo e specificare l’estensione.htm (.html) HTML 9 di 35  Prof. M. Zaninelli HTML: la sintassi Ogni istruzione HTML ha sempre la seguente struttura: informazioni Un documento HTML inizia sempre con il tag e termina sempre con il tag NB: il linguaggio HTML è case-insensitive e quindi , , sono tutti tag leciti (lo stesso vale per gli altri tag) HTML 10 di 35  Prof. M. Zaninelli HTML: la struttura La macrostruttura di un documento HTML è la seguente: che contiene le caratteristiche del documento che contiene il contenuto del documento HTML 11 di 35  Prof. M. Zaninelli HTML: l’ L’ contiene alcune informazioni fondamentali sia per la visualizzazione che per gli algoritmi dei motori di ricerca (Google, ecc.) titolo del documento.................................… HTML 12 di 35  Prof. M. Zaninelli HTML: il Il contiene invece il contenuto informativo del documento titolo del documento documento vero e proprio HTML 13 di 35  Prof. M. Zaninelli HTML: attributi del Esempio di attributi del tag che specificano alcune caratteristiche grafiche che il browser dovrà utilizzare per la visualizzazione del documento. NB: l’ordine con cui si scrivono gli attributi non è importante HTML 14 di 35  Prof. M. Zaninelli I colori negli attributi HTML: l’RGB Ogni colore può essere codificato mediante tre numeri compresi tra 0 e 255 che rappresentano le quantità di ROSSO VERDE e BLU presenti nel colore stesso (Red Green Blue = RGB). Ogni numero compreso tra 0 e 255 deve essere trasformato nella rappresentazione esadecimale (base 16) corrispondente. Con questa codifica si possono rappresentare più di 16,7 milioni di colori diversi. HTML 15 di 35  Prof. M. Zaninelli HTML: RGB, conversione esadecimale decimale #esadecimale Nero 0 0 0 #000000 Blu 0 0 255 #0000ff Verde 0 255 0 #00ff00 Rosso 255 0 0 #ff0000 Bianco 255 255 255 #ffffff NB: Nei file HTML le codifiche esadecimali vanno scritte senza lasciare spazi vuoti tra le cifre HTML 16 di 35  Prof. M. Zaninelli HTML: come si trovano i colori? NB: Si può trovare il codice RGB di un colore usando la tavolozza dei colori di un programma di grafica (in questo caso Paint) HTML 17 di 35  Prof. M. Zaninelli HTML: come si convertono i colori? NB: Una volta trovato il codice RGB del colore in notazione decimale, si può usare la calcolatrice per trovare la codifica esadecimale corrispondente. HTML 18 di 35  Prof. M. Zaninelli Alcuni tag ricorrenti: i titoli Il contenuto del documento viene visualizzato dai browser seguendo le direttive di formattazione contenute all’interno dei tag. Ad ogni elemento grafico, corrisponde uno specifico tag. Per esempio, nel caso si vogliano inserire dei titoli si possono usare i seguenti tag: titolo1 titolo2 … e per andare a capo: oppure …. HTML 19 di 35  Prof. M. Zaninelli Esempio: i titoli Prova di documento Titolo importante Titolo meno importante Hello world hello world hello world hello world Hello world hello world hello world hello world HTML 20 di 35  Prof. M. Zaninelli Alcuni tag ricorrenti: i caratteri Formato dei caratteri – grassetto – corsivo – enfatizzato – codice – grassetto – testo –... –... HTML 21 di 35  Prof. M. Zaninelli Alcuni tag ricorrenti: l’allineamento Allineamento del testo all’interno i un documento – – – – testo da centrare HTML 22 di 35  Prof. M. Zaninelli Alcuni tag ricorrenti: gli elenchi e (unordered list) primo elemento secondo elemento e (ordered list) primo elemento secondo elemento HTML 23 di 35  Prof. M. Zaninelli Esempio: le liste Prova di documento < < < Primo elemento della lista