La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

HTML LHTML è un linguaggio di markup: le istruzioni vengono date attraverso comandi denominati tag e racchiusi tra i segni di maggiore e minore ( ). LHTML.

Presentazioni simili


Presentazione sul tema: "HTML LHTML è un linguaggio di markup: le istruzioni vengono date attraverso comandi denominati tag e racchiusi tra i segni di maggiore e minore ( ). LHTML."— Transcript della presentazione:

1 HTML LHTML è un linguaggio di markup: le istruzioni vengono date attraverso comandi denominati tag e racchiusi tra i segni di maggiore e minore ( ). LHTML è un linguaggio interpretato dal browser e non è case sensitive. I tag possono essere: duplici: quando esiste un tag di apertura e un tag di chiusura entro i quali è racchiuso loggetto che deve assumere certe caratteristiche singoli: quando non prevede la chiusura Un documento HTML è racchiuso tra i tag … che indicano al browser linizio e la fine di un documento. 1

2 La struttura di un documento HTML Un documento HTML è costituito da due parti: HEAD, che è lintestazione del documento: … BODY, che è il corpo del documento: … Un documento HTML sarà quindi: … I tag possono essere nidificati ad eccezione di e. 2

3 : intestazione Nellintestazione del documento ( ) possono essere presenti due tag: … riferito al titolo che apparirà nella barra superiore del browser e verrà utilizzato dai motori di ricerca i meta tag che hanno diverse funzioni: Niente di ciò che è presente nei meta tags verrà visualizzato dal browser. 3

4 : il corpo Nel corpo del documento si trova tutto ciò che verrà visualizzato dal browser. Il tag body ha attributi mediante i quali è possibile definire caratteri generali del documento: il colore o limmagine di sfondo da impostare nel background bgcolor=colore background= immagine.gif il colore del testo text=colori il colore dei collegamenti ipertestuali presenti nel documento link=colore alink=colore vlink=colore Esempio: … 4

5 Come creare un documento HTML Per scrivere un documento html è sufficiente: aprire un editore di testo qualsiasi (blocco note, word pad) scrivere il codice salvarlo con estensione htm o html aprire il browser aprire il documento 5

6 I tag di posizionamento Definiscono lo stile e il posizionamento del testo nella pagina: nuova linea (non richiede un tag di chiusura) nuovo paragrafo (non richiede un tag di chiusura) nuovo paragrafo con allineamento del testo... testo allineato al centro... allineamento del testo al centro inserisco una linea 6

7 I tag fisici Definiscono lo stile e il formato del testo:... con n=1,2,3,4,5,6 per creare intestazioni. Il testo viene ingrandito in una scala da 1 a 6 (dove con n=1 si ha il font più alto) e viene scritto in carattere grassetto in un nuovo paragrafo... specifica lo stile, il colore e la grandezza del testo definiscono il testo corsivo, grassetto, sottolineato e barrato permettono di scrivere il testo in posizione di apice e pedice 7

8 I tag logici Definiscono unicamente la struttura del testo e non lo stile. Ad esempio:... contrassegna informazioni di indirizzo... usato per citazioni più lunghe di due o tre righe... per righe di codice di informazione... indica che il testo compreso è una definizione... enfatizza il testo 8

9 I colori, i font, le dimensioni E possibile indicare il colore usando il nome inglese del colore (blue, yellow, …) oppure usando la notazione RGB = RedGreenBlue e potendo così creare ogni tipo di colore. In HTML si usa la numerazione esadecimale per definire la notazione RGB. Per es.: bgcolor=# Nella scelta del font è importante definirne più di un tipo, considerando che non tutti i sistemi operativi hanno la stessa dotazione di font. E buona regola prevedere almeno un font di sistema come può essere lArial. Gli oggetti (immagini, tabelle, livelli, …) vengono dimensionati in pixel o in percentuale relativamente al loro oggetto contenitore. 9

10 I caratteri ASCII Non tutti i caratteri possono essere digitati in HTML, direttamente da tastiera. Per es. uno spazio bianco o parole che vengono interpretate dal browser (come o ) o caratteri strani non presenti sulla tastiera Ci sono due modi per risolvere: &#numero dove numero rappresenta il numero del carattere nel codice ASCII Entità HTML Quindi: o   per uno spazio bianco <p> o <p> per scrivere ; 10

11 Le liste (1) Le liste ordinate sono elenchi indicizzati. In HTML sono strutturate con i seguenti tag: … che definiscono linizio e la fine della lista. Lattributo Type definisce quale tipo di indicizzazione utilizza la lista stessa: Type = A (lettere maiuscole) Type = a (lettere minuscole) Type = I (numeri romani maiuscoli) Type = i (numeri romani minuscoli) Il type predefinito sono i numeri arabi. che individuano ogni elemento della lista 11

12 Le liste (2) Le liste non ordinate sono elenchi puntati ma non indicizzati. In HTML sono strutturate con i seguenti tag: … che definiscono linizio e la fine della lista. Lattributo Type definisce quale tipo di puntatura utilizza la lista stessa: Type = disc (pallini) Type = circle (pallini vuoti) Type = square (quadratini) che individuano ogni elemento della lista 12

13 Le immagini (1) I formati di immagini supportati dal browser sono: JPG a 16 milioni di colori ed è un formato compresso GIF a 256 colori Linserimento di immagini avviene utilizzando il tag Gli attributi sono: src che specifica lindirizzo relativo o assoluto dellimmagine alt definisce il testo che appare quando il mouse passa sopra limmagine width=n height=n definiscono la dimensione align=(top, bottom, middle, right, left) indica il posizionamento del testo rispetto allimmagine border=n la dimensione del bordo 13

14 Le immagini (2) Le mappe cliccabili si creano da ununica immagine allo scopo di creare più link su un solo oggetto, dividendolo in zone. In HTML sono strutturate con i seguenti tag: … Il tag area definisce forma, coordinate e url del link: Il riferimento alla mappa è inserito come attributo nel tag : 14

15 I collegamenti ipertestuali (1) Sono lo strumento tecnico che consente una fruibilità reticolare dei contenuti, la personalizzazione dei percorsi e limmediatezza nel reperimento delle informazioni. Il tag utilizzato: … I suoi attributi: href che definisce lurl della pagina collegata usando lindirizzamento relativo o assoluto title definisce il testo che appare quando il mouse passa sopra il link target che definisce dove verrà caricata la pagina … (_top:nella finestra competa; _parent:nel frame genitore di quello corrente; _self:nel frame che conteneva il collegamento; _blank:apre una nuova finestra; nomeframe:nel frame che ha name=nomeframe) 15

16 I collegamenti ipertestuali (2) Un link può linkare: un indirizzo esterno Google un indirizzo interno pagina2 un paragrafo interno al documento vai a segnalibro dovrà essere creato il punto (segnalibro)in cui inserire il tag questo è il punto segnalibro un indirizzo

17 Le tabelle (1) Sono uno degli strumenti più usati in quanto consentono la definizione dei layout della pagine. In HTML sono strutturate con i seguenti tag: … I suoi attributi: background inserisce unimmagine di background border=1,2,3.... definisce la dimensione del bordo width e height definiscono la dimensione della tabella cellpadding=1,2,3… definisce la distanza del testo dal bordo della tabella cellspacing=1,2,3…definisce la distanza delle celle dal bordo della tabella e dal bordo delle altre celle 17

18 Le tabelle (2) Vanno definite le righe e le colonne secondo lorientamento dallalto a sinistra fino al basso a destra. Ogni riga conterrà la definizione delle sue colonne: le righe sono strutturate con i tag … le colonne con i tag … lintestazione della tabella... che sostituisce il tag Esempio:... 18

19 Le tabelle (3) Gli attributi del tag : align=center/right/left definisce lallineamento orizzontale valign=top/bottom/center definisce lallineamento verticale bgcolor definisce il colore di background width e height definiscono la dimensione background inserisce unimmagine di background colspan e rowspan definiscono il numero di righe o colonne che deve occupare la cella 19

20 I frame (1) Consentono di definire sezioni, separate e distinte, allinterno della finestra del browser. Definiscono un controllo maggiore sulle informazioni presentate e sono utilizzati come strumento di navigazione. Non tutti le versioni dei browser supportano i frame. Si usa quindi: … il cui contenuto è visualizzato solo da tali browser. Per creare un set di frame (il contenitore generale): … Questi tag vanno inseriti dopo lintestazione e mai allinterno del tag : infatti il documento html che definisce i frame non avrà il tag body. 20

21 I frame (2) Il tag definisce la dimensione relativa e assoluta di ciascun frame Gli attributi del tag : cols=%,pixel,* definisce numero e dimensione delle colonne da creare rows=%,pixel,* definisce numero e dimensione delle righe da creare (pixel=dimensione in pixel; %=dimensione in percentuale; *=dimensione proporzionale agli altri frame) frameborder=1/0 definisce se i frame sono visualizzati con un bordo border=n dimensione del bordo dei frame 21

22 I frame (3) Allinterno del tag viene definito il contenuto di ciascun frame con il tag. Ci sarà un tag per ogni riga e colonna definita nel. Gli attributi del tag : name definisce il nome del frame per i riferimenti ad esempio nel target dei collegamenti ipertestuali src definisce lURL del documento HTML che verrà visualizzato allinterno del frame scrolling=no/yes/auto definisce se appare una barra di scorrimento nel frame 22

23 I frame (4) frameborder=1/0 definisce se i frame sono visualizzati con un bordo noresize se presente lutente non può ridimensionare il frame marginheight=n definisce laltezza del margine superiore e inferiore marginwidth=n definisce laltezza del margine sinistro e destro 23

24 I frame (5) … 24

25 I form (1) I moduli (form) permettono di introdurre interattività allinterno di una pagina e scambiare informazioni. I contenuti di un form sono inviati ad uno script CGI. In HTML i form sono strutturati con i seguenti tag: … Gli attributi de tag : method=post/get definisce comè inviata linformazione allo script. Con il metodo get (default) i dati sono aggiunti allurl e separati quando arrivano a destinazione (script_name e query_string). Con il metodo post i dati sono inviati allo script come flusso informativo separato action definisce il percorso dello script Non è possibile inserire un modulo allinterno di un altro. 25

26 CGI (Common Gateway Interface) è la norma che permette su un server Web d'includere dei programmi capaci di ricevere dei parametri e di trasmettere delle informazioni al navigatore. Abbreviazione di Common Gateway Interface, è una specifica per il trasferimento di informazioni tra un server WWW ed un programma CGI. Un programma CGI è un'applicazione strutturata per ricevere e restituire dati che siano conformi alla specifica CGI. Il programma può essere scritto in un qualsiasi linguaggio di programmazione, come C, Perl, Java, Visual Basic. I programmi CGI sono la soluzione più comune perché un server Web possa interagire con l'utente. Le soluzioni CGI sono procedure server-side, in quanto le operazioni avvengono sul server Web. I form (2) 26

27 I form (3): elementi Ciascun elemento del form è inviato come una coppia di nome_campo=valore nel momento in cui lutente sottoscrive il form stesso. Il form è un insieme di tag che ne definiscono gli elementi. In generale, ciascun elemento è inserito usando il tag. Gli attributi del tag : type definisce come appare sullo schermo il campo di input name definisce il nome assegnato al campo Il valore di type definisce nove tipi di campi di input: 27

28 I form (4): elementi restituisce valore allo script solo se è selezionato. Il valore di default è on. restituisce valore allo script solo se è selezionato. 28

29 I form (5): elementi Gli attributi del tag : align=top/middle/bottom/left/right allineamento del campo checked reseleziona una checkbox o un radiobutton maxlenght=n definisce il numero massimo di caratteri che possono essere inseriti in un campo text o password size=n definisce la dimensione fisica del campo Se il form utilizza un FormMail è necessario inserire un campo nascosto che consenta di specificare lindirizzo 29

30 I form (6): elementi Altri elementi di un form: casella di selezione e area di testo. La casella di selezione può essere un elenco a discesa o un menù di voci. In HTML è strutturata con i seguenti tag: prima opzione seconda opzione 30

31 I form (7): elementi Gli attributi del tag : multiple consente la selezioni di più voci del menu size=n specifica il numero di voci visibili del menu Gli attributi del tag : value definisce il valore attribuito al campo se viene scelta lopzione selected definisce quale voce è pre-selezionata 31

32 I form (8): elementi L area di testo è unarea di testo libero di n righe e n colonne. In HTML è strutturata con il seguente tag: eventuale testo visualizzato Gli attributi del tag : name definisce il nome di riferimento della textarea rows definisce il numero di righe visibili dellarea di testo cols definisce il numero di colonne visibili dellarea di testo 32

33 Inserimento di un file audio I formati supportati dal web più utilizzati sono:.mid,.wav,.mp3 E possibile inserire una musica di sottofondo che parte allapertura della pagina con il tag Se si desidera creare un link che permetta di sentire un file audio, è possibile creare una pagina html che contenga il tag che apra il file MID. Se si crea un link che punta direttamente al file.mid, verrà aperto dal browser lapplicativo che permette di ascoltare i file audio. 33


Scaricare ppt "HTML LHTML è un linguaggio di markup: le istruzioni vengono date attraverso comandi denominati tag e racchiusi tra i segni di maggiore e minore ( ). LHTML."

Presentazioni simili


Annunci Google