La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò INTRODUZIONE HTML L HTML è un linguaggio (non di programmazione) che consente di realizzare.

Presentazioni simili


Presentazione sul tema: "Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò INTRODUZIONE HTML L HTML è un linguaggio (non di programmazione) che consente di realizzare."— Transcript della presentazione:

1 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò INTRODUZIONE HTML L HTML è un linguaggio (non di programmazione) che consente di realizzare ipertesti. Un ipertesto è un documento che può essere consultato anche in modo non sequenziale, ma con collegamenti (link) che consentono di passare velocemente da una parte allaltra del documento, o in altri documenti.

2 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Pagine WEB Le pagine web sono documenti ipertestuali scritti con il linguaggio HTML. In una pagina web è possibile consultare documenti, immagini, video e suoni, anche memorizzati in computer (server) differenti, attraverso gli indirizzi dei vari siti (URL) associati ai link. La Navigazione è lattività di consultazione delle pagine web.

3 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Html HTML (HyperText Markup Language) non è un linguaggio di programmazione, non fornisce istruzioni per interagire con i sistemi operativi dei computer. LHtml è un insieme di istruzioni (TAG) che consente di applicare, ad un normale testo ASCII, particolari stili, formattare paragrafi, titoli, liste, realizzare link.

4 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Browser Linterpretazione dei codici Html (tag) è riservata ai browser: programmi utilizzati per navigare su internet (Internet Explorer, Netscape, Firefox, Safari, ecc.). Ciò a volte è causa di problemi legati a come i singoli browser interpretano alcuni TAG.

5 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Html Standard Esistono TAG che non sono riconosciuti da tutti i browser. Si costruiscono quindi versioni Standard (ufficiali) di Html che includano istruzioni che vengano correttamente interpretate dal maggior numero di browser possibile. Le principali versioni Standard sono: HTML 2.0 – HTML 3.5 – HTML 4.0 (da realizzare HTML 5.0)

6 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Pagine web Per scrivere una pagina web con lHtml si può utilizzare un qualunque programma text editor (Block Notes, Word, ecc.) che consenta di salvare il documento in formato ASCII. Un file scritto con lHtml deve avere estensione.html (o.htm) e non.txt (e, evidentemente, nemmeno doc).

7 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Struttura di una pagina web Un documento web (standard) inizia con il TAG e finisce (si chiude) con Un TAG è sempre costituito da un termine delimitato dai simboli, senza distinzione tra minuscolo e maiuscolo e, solitamente, presenta un marcatore iniziale (ad esempio ) ed un marcatore finale che si esplicita inserendo come prefisso il simbolo / (ad esempio ).

8 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Head e Body Un documento Html ha la seguente struttura: Intestazione (le istruzioni vanno inserite tra i due tag) Corpo del documento (le istruzioni vanno inserite tra i due tag) Doctype (Opzionale)

9 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Doctype Il tag doctype, praticamente ignorato dai vecchi browser, attualmente è sfruttato per ottimizzare la visualizzazione della pagina. Fornisce informazioni sul documento: il tipo di linguaggio utilizzato (solitamente HTML), se il documento è pubblico, se fa riferimento alle specifiche W3C, …)

10 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Head Lintestazione contiene solitamente dei tag che non influiscono sulla formattazione della pagina, ma che permettono di assegnare un titolo al documento, di associare risorse esterne come fogli di stile e javascript e consentire ai motori di ricerca (google, altavista, …) di ottenere informazioni generiche sulla pagina stessa.

11 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Il titolo della pagina web Foglio di Stile associato Istruzioni Javascript Reindirizzare verso una nuova pagina Descrizione del contenuto della pagina (Mot. Ricerca) Termini associati alla pagina (Mot. Ricerca) Head Bla bla bla …

12 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Body Il body è la sezione principale del documento. È in questo spazio che si inseriscono tutti gli elementi specifici della pagina: titoli, paragrafi, liste, immagini, link, tabelle e contenuti multimediali.

13 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Titoli Un titolo di un paragrafo si realizza con i TAG Titolo … Titolo … Leventuale attributo align=center/right/left permette lallineamento centrato/a destra/a sinistra (predefinito) ….

14 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Paragrafi Un paragrafo si specifica con … Il TAG potrebbe essere utilizzato senza chiusura, ma è sempre consigliabile terminare il paragrafo con tale marcatore, specie quando tale paragrafo è caratterizzato da una formattazione particolare (colore del testo, tipo di font, ecc.) che non si vuole ripetere nella frase successiva. Il tag fa iniziare un nuovo paragrafo sempre su una nuova riga (implica cioè un ritorno a capo).

15 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Il testo va a capo senza lasciare una riga vuota e senza cambiare gli attributi dellattuale paragrafo. Permette di inserire una riga di separazione li lunghezza x (valore percentuale o numero di pixel), spessore y, allineata a sinistra o a destra (e non centrata), noshade, se presente, permette di ottenere una linea senza ombra tridimensionale. … Il testo delimitato tra questi tag rimane preformattato cioè mantiene la struttura preimpostata durante la scrittura (spazi tra parole, ritorni a capo, ecc.)

16 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò … Il testo è scritto in modo enfatizzato (corsivo). … Testo in grassetto e di dimensione relativamente maggiore. … Il testo è scritto come pedice … Il testo è scritto come apice.

17 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò … Testo in grassetto. … Testo in corsivo. … Testo sottolineato. … Testo con una riga sopra. … Il testo è scritto in una dimensione relativamente minore. … Il testo è scritto in una dimensione relativamente maggiore.

18 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Immagini I browser permettono di visualizzare immagini di diversi formati grafici. I più comuni sono: GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)

19 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Il formato GIF è utilizzato principalmente per immagini che contengono fino a 256 colori (più che sufficiente per pulsanti, sfondi ed icone) ed offre una buona compressione del file. Permette di realizzare: Effetti di trasparenza Immagini interlacciate (visualizzate in modo graduale) Animazioni (gif animate) Questo formato non è indicato per foto che, solitamente, contengono milioni di colori.

20 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Il formato JPEG è invece utilizzato per immagine fotografiche con una varietà di milioni di colori e permette di ottenere una buona compressione del file (dimensione del file minore, in termini di byte, ma con conseguente perdita di qualità dellimmagine). A differenza del formato gif, però, non permette di ottenere effetti di trasparenza né immagini interlacciate.

21 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Il formato PNG, infine, permette di ottenere effetti di trasparenza e di interlacciamento, e supporta immagini con milioni di colori (come il jpeg). A differenza del formato gif (proprietario), il metodo di compressione è pubblico quindi liberamente utilizzabile (senza dover pagare diritti di utilizzo). Lunico inconveniente è che, ancora, non è pienamente supportato da tutti i browser.

22 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Per inserire una immagine in un documento HTML si utilizza il tag bla Align: allineare limmagine rispetto al testo Alt: visualizzare una descrizione (o una frase alternativa allimmagine) Height e width: dimensioni in pixel (o in percentuale) Hspace e Vspace: margine da lasciare tra testo (eventuale) e immagine Border: spessore delleventuale bordo Src: percorso specifico del file. Tranne src, tutti gli altri attributi sono opzionali e possono tranquillamente essere omessi.

23 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Link (o ancore) Mediante i link è possibile realizzare collegamenti ipertestuali con altre pagine html o file che si trovano nello stesso server o in altri (esterni). bla bla oppure bla bla

24 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Il testo racchiuso tra i tag … è visualizzato, solitamente, sottolineato e di un colore diverso (per default blu) ad esempio: bla Cliccando sul termine linkato ci si collega alla pagina specificata dal parametro href (o viene proposto di visualizzare il file relativo). N.B. È possibile realizzare link con immagini utilizzando il tag :

25 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Liste Le liste (elenchi), puntate o numerate, si realizzano, rispettivamente, con i seguenti tag: uno due tre uno due tre uno due tre uno due tre 1)uno 2)due 3)tre 1)uno 2)due 3)tre

26 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Opzioni per gli elenchi numerati : Start: definisce il valore iniziale dellelenco; Type: può assumere i valori 1, A, a, I, i. Opzioni per gli elenchi puntati : Type: disc, square, circle.

27 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Tabelle Una tabella permette di strutturare il testo in righe e colonne. I tag per definire una tabella sono: per la struttura, per ciascuna riga, per una cella di intestazione e, infine, per una comune cella. colonna A colonna B aaaa bbbb

28 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Parametri di Cellpadding=x permette di specificare lo spazio x (distanza) da lasciare tra il contenuto della cella ed i suoi bordi; Cellspacing=y consente di settare la distanza y, in pixel, tra celle adiacenti; Bgcolor=color consente di assegnare un colore di sfondo per lintera tabella; Background=file.jpg/png/gif imposta come sfondo limmagine contenuta nel file specificato (nella stessa cartella della pagina html); width=n stabilisce, se specificato, la larghezza complessiva della tabella: n può assumere un valore intero (pixel) o percentuale rispetto la larghezza del browser. Se questo parametro non è specificato la tabella si adatta al contenuto;

29 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò I principali parametri di sono: align=center/left/right (allineamento orizzontale) valign=baseline/bottom/middle/top (allineamento verticale) bgcolor=color (colore di sfondo) I principali parametri di e, invece: align=center/left/right valign=baseline/bottom/middle/top bgcolor=color colspan=n (raggruppamento di n colonne) rowspan=n (raggruppamento di n righe) N.B., a differenza di, centra il testo nella cella e gli applica lo stile grassetto.

30 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Colori I colori, in HTML, possono essere definiti esplicitandoli con il nome inglese (red, green, lightblue, black, …) oppure in RGB. RGB sta per Red Green Blue e costituisce la via principale per definire un colore. In pratica RGB esprime la combinazione dei tre colori fondamentali rosso, verde e blu, rispettivamente, espressi da tre numeri variabili da 00 a FF (notazione esadecimale) preceduti dal simbolo #. Esempi: #FF0000 (red)#FF00FF (fuchsia) #0000FF (blue)# (maroon) #00FFFF (aqua)# (navy) # (green)#FFFF00 (yellow)

31 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Form Mediante i form è possibile interagire (scambiare dati) con gli utenti che visitano una pagina web. Ciò è possibile inserendo nella pagina elementi quali Pulsanti, Caselle di testo, Caselle di spunta a scelta multipla (Checkbox) o esclusiva (Radio). La seguente costituisce la sintassi essenziale del tag : … Lattributo action specifica o la pagina dove inviare i dati o un indirizzo al quale spedire i dati del form Se tale attributo non fosse specificato, i dati del form verrebbero inviati alla stessa pagina. Lattributo method, invece, permette di specificare come deve avvenire linvio dei dati. I valori possibili sono due: get oppure post. Con get i dati inviati sono visibili a tutti in quanto inseriti nellURL della pagina specificata nellaction; con post, invece, i dati non vengono accodati allURL, non sono quindi visibili e non vi è un limite alla loro quantità (questo è particolarmente conveniente quando transitano password o enormi quantità di dati).

32 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Input Il tag è utilizzato allinterno dei tag per realizzare i suoi elementi (pulsanti, caselle, …). La sua sintassi essenziale è: Gli attributi type, name e value sono solo alcuni dei possibili, oltre quelli specifici del particolare tipo di oggetto realizzato (ad esempio se type fosse uguale a checkbox, potremmo avere anche lattributo checked, altrimente non presente). name rappresenta il nome associato allo specifico elemento, utile per leggere il relativo valore inviato; value è il valore preimpostato che quellelemento contiene; type, invece, identifica il tipo di elemento che si vuole ottenere (pulsante, casella di testo, ecc.). I possibili valori di type sono: button, checkbox, file, password, radio, reset, submit e text.

33 Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò type=button (pulsante generico) type=submit (pulsante di invio dei dati del modulo) type=reset (pulsante di azzeramento dei dati, senza invio) Input type type=checkbox (casella di spunta, per selezionare una o più voci. Con Lopzione checked lelemento appare selezionato.) type=radio (radio pulsante, usato per scegliere tra valori alternativi: V o F, Si, No. Con lopzione checked lelemento appare selezionato.) type=text (casella di testo) type=password (casella con testo sostituito da asterischi) type=file (permette di selezionare un file)


Scaricare ppt "Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò INTRODUZIONE HTML L HTML è un linguaggio (non di programmazione) che consente di realizzare."

Presentazioni simili


Annunci Google