Concetti preliminari (pagina web, spazio web, provider, ) Come è strutturata una pagina web e consigli per sviluppare un sito

Transcript

1 HTML (HyperText Markup Language) Ing. Lucia Vaira Ing. Marco Zappatore 2 Sommario Concetti preliminari (pagina web, spazio web, provider, ) Come scrivere una pagina web Come è strutturata una pagina web e consigli per sviluppare un sito Elementi chiave (testo, link, immagini, tabelle, layout, ) Introduzione ai form 1

2 3 Concetti preliminari Pagina web: un file che contiene testo e istruzioni formattate un file che può essere visualizzato su un browser Un file con estensione.htm o.html (pagine statiche) Spazio web: spazio fisico in cui viene memorizzata la/e pagina/e del sito offerto sotto pagamento Provider: società che gestisce lo spazio web dietro stipulazione di un contratto di fornitura Web server: applicazione software installata all interno di un server fisico che si occupa di gestire le richieste http e https provenienti dai vari client Dominio: nome univoco associato al sito web, chiamato anche URL - Universal Resource Locator: link permanente che, digitato nel web browser, viene convertito dal DNS (Domain Name System) in indirizzo IP necessario per l instradamento della comunicazione tra web server e client Quando, dove e da chi è stato inventato l HTML? 4 QUANDO: nel 1990 DOVE: al CERN Conseil Européen pour la Recherche Nucléaire DA CHI: da Tim Berners-Lee e Robert Caillau 2

3 5 La prima pagina HTML Questa è in assoluto il primo sito web mai scritto Era ospitato da questo server: (NeXT computer) 8 MB di RAM 256 MB di Hard Disk Processore a 25 MHz 6 HTML4 XHTML HTML5: L evoluzione HTML4: sviluppato da Tim Berners-Lee nel 1990, è la versione più vecchia di HTML ancora in uso. Ha una sintassi molto sciolta (ad esempio i tag di chiusura sono spesso opzionali) à problemi con i diversi browser XHTML (extensible Hypertext Markup Language): nel 2000, più restrizioni sul codice (tutti i tag devono avere un tag di chiusura corrispondente) HTML5: nel 2004, nuova specifica che fornisce importanti funzionalità che riflettono il modo in cui viene utilizzato oggi il web (ad esempio lo sviluppo di applicazioni mobile). Introduce elementi di controllo per i menu di navigazione, dei contenuti multimediali, dei moduli elettronici; viene supportato il canvas per creare animazioni e grafica bitmap; viene introdotta la geolocalizzazione, 3

4 7 Cos è una pagina web? Un file che contiene testo e istruzioni formattate Un file che può essere visualizzato su un browser Estensione.htm o.html (pagine statiche) Creazione del documento: creare un nuovo file di testo (con estensione.txt) e rinominarlo con una estensione.html. Scrittura del documento: aprire il file appena creato con un editor di testo e scriverci: Ciao, sono la tua prima pagina web! Salvare le modifiche e riaprire il file con il browser. Struttura di una pagina web 8 Tag che specifica alcune informazioni sul documento Tag in cui vanno inserite le informazioni e i dettagli della pagina Tag che contiene tutto il documento Tag in cui vanno inseriti i contenuti della pagina METATAG 4

5 Scrivere una pagina web con html I tag: parole o lettere racchiuse tra i simboli < > 9 Il tag più utilizzato <p>: (paragraph) unità base entro cui suddividere un testo, che lascia una riga vuota prima della sua apertura e dopo la sua chiusura Non va a capo! Impaginazione diversa! Scrivere una pagina web con html 10 Separare i paragrafi con i tag <br /> (break) e <hr /> (horizontal rule) <br /> viene usato per andare a capo. Una cosa importante da sapere è che anche se scrivendo all interno di un paragrafo vai a capo, il browser non va a capo! Può ovviamente essere utilizzato anche per creare degli spazi bianchi tra un paragrafo e l altro <br /> <br /> <hr /> serve a dividere due paragrafi con una linea oltre che con un po di spazio bianco 5

6 11 I Titoli Tag <h1> <h2> <h3>.. à gerarchia 12 Un editor HTML online per i primi test È possibile esercitarsi nella scrittura utilizzando uno dei molti editor HTML disponibili online gratuitamente Questi editor consentono di: Scrivere il codice direttamente usando i tag HTML Comporre una pagina usando un editor WYSIWYG (come nei programmi del pacchetto Office) Controllare il codice HTML generato usando le funzioni WYSIWYG Esistono differenti tipi di editor (HTML semplice, HTML+CSS, HTML5, ecc.) 6

7 13 Un editor HTML online per i primi test Colleghiamoci a: Editor: TinyMCE 14 Un editor HTML online per i primi test Potete usare l editor WYSIWYG per esaminare il sorgente HTML della porzione di testo da voi inserita oppure per modificare il sorgente HTML ed esaminare poi il risultato nella porzione di testo ad esso corrispondente 7

8 15 Un editor HTML online per i primi test Colleghiamoci a: Editor: Full TinyMCE (questo editor offre maggiori funzionalità) 16 Un editor HTML online per i primi test Colleghiamoci a: Editor: Full TinyMCE (questo editor offre maggiori funzionalità) 8

9 17 Le immagini Tag <img src= alt= /> Percorso relativo: l immagine si trova nella stessa cartella del documento html Percorso assoluto: alt è il testo alternativo, ovvero il testo che appare se, per qualche motivo, il browser non riesce a mostrare l immagine (utile per l accessibilità e i motori di ricerca) Consiglio per i nomi dei file: è consigliabile non lasciare spazi vuoti nei nomi dei file, meglio usare i trattini bassi (in gergo tecnico: «underscore»), come ad esempio nel nome file seguente: mia_immagine.jpg 18 Percorsi relativi e assoluti I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento: src = cartella_1/cartella_2/immagine.jpg I percorsi assoluti si utilizzano solitamente quando citiamo una fonte (diversa da noi) alla quale vogliamo fare riferimento: src = file:///c:/sitiweb/cartellasito/immagini/black.gif src = Vantaggi: È un metodo rapido La destinazione viene tenuta aggiornata automaticamente Svantaggi: Se la destinazione sparisce, sparisce anche nel nostro sito 9

10 19 Le immagini - style <img src= alt= style= width:100% ; height: 50%; /> 20 I link Tag <a href= > </a> <a href= > CLICCA QUI </a> CLICCA QUI La destinazione La parte cliccabile È possibile forzare l apertura di un link in una nuova finestra del browser aggiungendo l attributo target= _blank Anche un immagine può essere trattata come un link: <a href= > <img alt= Home page SITO src= home.gif /> </a> 10

11 21 I div Tag <div id= >.. </div> Il blocco di testo va a capo, ma, a differenza del paragrafo, non lascia spazi prima e dopo la sua apertura. Rappresenta un contenitore e può essere univocamente definito con l attributo id (parametro non obbligatorio) che può servire al browser per far riconoscere i tag ai css o agli script. <div style="border:1px solid black; margin:15px; padding:5px; width:300px; float:right; text- align:center; color:#0080c0; font- size:10px; font- style:italic; font- weight:bold;"> <p> Contenuto del div </p> </div> 22 Gli elenchi 1. Elenchi ordinati 2. Elenchi non ordinati 3. Elenchi di definizioni Struttura Elenchi ordinati: tag <ol> per la lista (ordered list) e <li> (list item) per gli elementi. Lo stile di enumerazione visualizzata di default dal browser è quello numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell'attributo type. type = 1 : numeri arabi type = a : alfabeto minuscolo type = A : alfabeto maiuscolo type = i : numeri romani minuscoli type = I : numeri romani maiuscoli 11

12 23 Gli elenchi Elenchi non ordinati (elenchi puntati): tag <ul> (unordered list) per la lista e <li> per gli elementi. Il tipo di segno grafico utilizzato per individuare gli elementi dell'elenco di default dipende dal browser, ma di solito è un "pallino pieno". È possibile comunque scegliere un altro tipo di segno mediante l'attributo type. type = disc : pallini pieni type = circle : cerchio vuoto type = square : quadrato pieno Gli elenchi Liste di definizione: tag <dl> (definition list) per la lista e <dt> (definition term) per il termine da definire e <dd> (definition description) per la definizione vera e propria del termine

13 25 Le tabelle Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono: <table> apre la tabella <tr> table row : indica l apertura di una riga <th> table header : indica l intestazione di una colonna <td> table data : indica una cella all interno di una riga Le tabelle rowspan e colspan È possibile raggruppare le celle all interno delle colonne in modo diverso, non costante à attributo di <td>: colspan, specificando il numero di colonne che devono essere occupate. 26 Tramite l attributo rowspan è invece possibile creare delle celle che occupino più di una riga. 13

14 27 Le tabelle attributi di <table> Gli attributi che permettono di regolare le distanze tra i margini della tabella (o della cella) e il contenuto: Con questa sintassi: si imposta una tabella con bordo di 1 pixel, senza spazio tra le celle e con il contenuto che è distanziato dai bordi della cella di 10 pixel 28 Le tabelle attributi di <table>, <tr>, <td> Attributi width e height che determinano la larghezza e l altezza (in pixel o in percentuale) di tabelle, righe o celle Si può assegnare un colore di sfondo tramite l attributo bgcolor, oppure un immagine tramite background L attributo align: se riferito al tag <table>, sposta la tabella a sinistra, a destra o al centro del documento (left, right e center) se riferito a <tr> o a <td> è invece il contenuto delle celle ad essere allineato a sinistra, al centro oppure a destra. Allo stesso modo valign è per l allineamento verticale delle celle. I valori possibili sono top (alto), middle (in mezzo è il valore di default), bottom (in basso), baseline (alla linea di base). Per i bordi: attributi bordercolor, bordercolorlight, bordercolordark. 14

15 29 Good manners È buona norma utilizzare i caratteri di tabulazione per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento. In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab. Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile. Un'altra strategia importante, per rendere il codice più leggibile è di inserire dei "commenti" (che non verranno mai visualizzati dal browser) nei punti più significativi <!- - questo è un commento - - > Cascading Style Sheet (css) Un foglio di stile è una collezione di regole stilistiche che descrivono il look degli elementi Ogni regola è costituita da un selettore cui è associato un elenco di proprietà. Ad ogni proprietà si associa un valore 30 selector{ property1: value1; property2: value2;. propertyn: valuen; } 15

16 31 Cascading Style Sheet (css) Struttura abbastanza semplice: si sceglie il tag html da modificare lo si trascrive senza i simboli < > si apre la parentesi graffa e si scrive l attributo del tag che si vuole modificare seguito da: il simbolo : il valore che vogliamo assegnare il simbolo ; Colori in esadecimale: Il rosso #ff0000 (massima luminosità su R e minima luminosità su G e B) il verde #00ff00 (massima luminosità su G e minima luminosità su R e B) il blu #0000ff (massima luminosità su B e minima luminosità su R e G) 32 I colori HEX ed RGB Si possono utilizzare 16 milioni di colori Si possono descrivere in formato decimale o esadecimale 16

17 33 CSS dove si scrivono? Fogli di stile all interno dell elemento stile nella sezione <head> di un documento. Il tag <style> dovrebbe sempre contenere un attributo type per indicare il tipo di foglio di stile usato <style type= text/css >.. </style> <style> può essere usato anche come attributo di altri tag HTML <h1 style= color: red; text- transfrom: capitalize; >Prova CSS</h1> Metodo migliore: collegamenti a file css esterno (che può essere condiviso da più file HTML) usando l elemento <link> <link href= foglio.css rel= stylesheet type= text/css title= titolo > Cascading Style Sheet (css) - Tips Contrasto: fai sempre in modo che il testo risalti facilmente, non usare per esempio scritte gialle su sfondo bianco o testo nero su sfondo grigio scuro! Dimensioni: va bene dare le giuste dimensioni ai titoli ma attenzione a non esagerare con la grandezza del testo nei paragrafi. Le giuste dimensioni per il font dei paragrafi sono di 10-12pt. Carattere: anche se sono meno belli, utilizza caratteri normali come Arial o Verdana, evitando caratteri di fantasia o utilizzandoli al massimo solo per brevi titoli. 34 Se un sito internet ha una grafica incredibile ma è scomodo da leggere e navigare, nessuno lo visiterà una seconda volta! 17

18 35 I form HTML Una web form è costituita principalmente da due parti: Il front end HTML (gestisce la parte di presentazione) Il back end per il processing lato server (gestisce i dati inviati dal form), solitamente scritto in PHP, ASP,. 1. Un utente visita una pagina web che contiene una web form 2. Il web browser mostra il form HTML 3. L utente riempie i campi e sottomette (invia i dati) 4. Il browser invia i dati sottomessi al web server 5. Uno script in esecuzione sul web server processa i dati ottenuti 6. Viene inviata una pagina di risposta al browser I form Tag <form>.. </form>: area che contiene form fields (text box, drop down list, radio button, checkbox,.) 36 Motore di ricerca: 1. Le parole di ricerca vengono mandate a un programma sul server; 2. Il programma cerca un database per i riscontri; 3. Il programma crea una pagina web con i risultati; 4. La pagina web con i risultati viene rimandata al visitatore. Form di login: 1. Username e password vengono inviate ad un programma sul server; 2. Il programma cerca un database per le entrate valide; 3. Se l'entrata è valida il visitatore viene mandato alla pagina protetta di login; 4. Se l'entrata non è valida il visitatore viene mandato a una pagina di "non validità. 18

19 I form validazione form di registrazione 37 I form tag 38 19

20 39 Firebug È un plugin (addon) per Firefox, molto utile, che permette di ispezionare e modificare codice HTML, CSS e JavaScript di una pagina web direttamente dal browser (c è anche per Chrome e Internet Explorer) Ogni elemento della pagina web analizzata è cliccabile e modificabile. È assolutamente innocuo fare qualunque tipo di modifica in quanto si lavora su copia in memoria e nessuna delle modifiche viene salvata. Offre molti strumenti per l analisi e la modifica di fogli di stile CSS e codice JavaScript. Include ad esempio un debugger JavaScript o dei righelli per allineare le proprietà CSS quali margini, padding, ecc Mini-guida 20