La produzione di pagine web

La produzione di pagine web
Il Linguaggio HTML La produzione di pagine web

Il linguaggio HTML - Cristina Fregni
Il World Wide Web Il WWW è un progetto nato al CERN di Ginevra per risolvere il problema della ricerca di documenti che sono diventati disponibili a ritmo esponenziale su Internet. I precedenti sistemi di classificazione dei documenti (Gopher e Veronica), non erano adatti ad un pubblico eterogeneo ed abituato agli ausili delle interfacce grafiche e non erano in grado di fornire strutture di ricerca sufficientemente elastiche. Il linguaggio HTML - Cristina Fregni

Ipertesti Nasce l’idea di utilizzare il concetto di ipertesto esteso alle risorse della Rete. Vengono quindi riorganizzati i documenti in giganteschi ipertesti che guidano la consultazione mediante rimandi (link). L'ipertesto può contenere, oltre agli elementi testuali, anche immagini, suoni, filmati e qualsiasi altro oggetto digitalizzabile. Il linguaggio HTML - Cristina Fregni

Un ipertesto è un insieme di documenti che può essere consultato in modo non sequenziale, passando da un documento all’altro attraverso collegamenti (link). Il linguaggio HTML - Cristina Fregni

Il progetto WWW ha: definito un protocollo di trasmissione (HyperText Transfer Protocol): insieme di regole con cui i computer si trasmettono i dati; creato un linguaggio (HyperText Markup Language); fondato un consorzio (W3 Organization) con il compito di governare lo sviluppo futuro dello standard. Il linguaggio HTML - Cristina Fregni

URL (Uniform Resource Locator)
E’ l’indirizzo standard (mnemonico) per individuare una risorsa (in genere un file) di Internet. Gli indirizzi vengono definiti da uno schema di indirizzamento generale della forma: Protocollo://NomeHost.NomeDominio/Percorso/NomeFile/#NomeAncora Risorsa usata (FILE, HTTP, FTP..) Indica il nome simbolico del server (WWW) e il nome del dominio (gruppo di server dello stesso nodo). L'ultima parte identifica: con due lettere la nazione di appartenenza; con tre lettere il tipo di organizzazione cui si fa riferimento (COM, EDU, GOV). Pathname del file Segnalibro all’interno del file Il linguaggio HTML - Cristina Fregni

Gli URL per i collegamenti ipertestuali possono essere: ASSOLUTI: quando definiscono l’indirizzo completo di una risorsa. Hanno la sintassi precedentemente indicata; RELATIVI: se descrivono la destinazione del collegamento relativamente alla posizione corrente della pagina sorgente sul server Web. Il linguaggio HTML - Cristina Fregni

I nomi dei file Sono di norma liberi ed hanno estensione .htm oppure .html è utile comunque considerare che: per indicare la Home Page di un sito Internet esiste un identificativo particolare: index.htm o default.htm. Se questo file è presente nella directory del sito sul server, esso viene aperto automaticamente quando l’utente specifica l’indirizzo del sito; alcuni sistemi operativi che gestiscono i server Internet (Unix e Linux) sono case sensitive e non supportano i nomi lunghi per i file, quindi è conveniente utilizzare lettere minuscole e nomi di 8 caratteri al massimo per i file. Il linguaggio HTML - Cristina Fregni

I Browsers Per poter consultare il file in formato HTML occorre uno specifico programma (BROWSER) in grado di interpretare correttamente la sintassi del linguaggio. Il compito del browser è quello di leggere gli ordini contenuti nel documento e impaginare sul monitor il documento stesso. Può capitare che browser diversi rappresentino in maniera diversa lo stesso documento, ciò può dipendere da: una diversa interpretazione della sintassi; da errori presenti nel browser; dal mancato allineamento del browser allo standard. Il linguaggio HTML - Cristina Fregni

L’HyperText Markup Language
È un linguaggio di formazione delle pagine, non un linguaggio di programmazione; È un linguaggio statico nato solo per visualizzare informazioni; I documenti scritti in HTML sono normali file di testo, visualizzabili e modificabili con semplici programmi editor; Esistono molti editor, alcuni molto potenti, specializzati nella scrittura di documenti HTML che aiutano l'operatore nella corretta stesura dei documenti. Il linguaggio HTML - Cristina Fregni

Gli elementi del linguaggio
I file scritti in HTML hanno estensione .HTM o .HTML; Al contenuto di questi file vengono aggiunti dei TAG (marche, contrassegni) che consentono di impostare caratteristiche particolari per il testo contenuto tra i tag; I tag sono racchiusi tra le parentesi angolari '<' e '>' Esiste sempre un tag iniziale (<tag>) ed un tag finale (</tag>); Il linguaggio HTML - Cristina Fregni

La struttura della pagina HTML
<HEAD> <TITLE>La mia prima Home Page</TITLE> </HEAD> <BODY> Questa è la prima pagina web </BODY> </HTML> <b> testo o elementi ulteriori </b> PAGINA WEB intestazione corpo posizione errata Il linguaggio HTML - Cristina Fregni

Intestazione Contiene notizie dichiarative, informative o di impostazione globale del documento. Questa sezione inizia sempre con il tag <HEAD> e termina con </HEAD>. Il linguaggio HTML - Cristina Fregni

HEAD In questo tag vi sono informazioni di impostazione della finestra e può contenere: Il tag TITLE I tag META I CSS (Cascade Style Sheet) o fogli di stile Codice di programmazione Javascript, VBScript, PHP, ASP… Il linguaggio HTML - Cristina Fregni

TITLE Ad ogni pagina web può essere associato un titolo che ne descrive il contenuto. L’elemento <TITLE>…</TITLE> viene visualizzato solitamente dai browser nella barra del titolo della finestra; In caso di salvataggio dell’URL il tag TITLE dà il nome al collegamento; Viene utilizzato da alcuni motori di ricerca per indicizzare la pagina e trovare le parole chiave. Il linguaggio HTML - Cristina Fregni

I tag META I tag META sono stati creati per descrivere il documento agli occhi degli spider, i software usati dai motori di ricerca per indicizzare le pagine e inserirle, pronte per essere recuperate nei database. Attraverso questi tag il motore di ricerca ha le informazioni necessarie per catalogare la pagina. Il linguaggio HTML - Cristina Fregni

KEYWORDS <META name=“keywords” Content=“keyword1, keyword2, …”> Le parole chiave sono i termini che descrivono il contenuto della pagina, sono quelli che l’utente inserisce come chiave di ricerca. È attraverso questi termini che la pagina potrà essere trovata. DESCRIPTION <META name=“description” content=“descrizione della pagina”> Questa frase apparirà (nella maggior parte dei motori di ricerca) come titolo alla fine della ricerca. Attraverso queste parole l’utente deciderà se visitare o meno la nostra pagina. Il linguaggio HTML - Cristina Fregni

AUTHOR <META name=“author” content=“Nome Cognome”> Poco usato, ma previsto dal W3C, per segnalare l’autore della pagina html, spesso contiene anche l’indirizzo , l’homepage, l’URL e altre informazioni. GENERATOR <META name=“generator” content=“blocco note di Win98”> Non indispensabile, indica il nome del software usato per costruire la pagina. Tutti i programmi che aiutano a costruire una pagina HTML si auto-inseriscono in questo tag. Il linguaggio HTML - Cristina Fregni

I formati delle immagini
Le immagini utilizzate nelle pagine web devono avere i seguenti formati: GIF(Graphics Intercanghe Format), formato usato per le immagini grafiche, utilizzato anche per comporre brevi sequenze di immagini (GIF animate); JPG(Joint Photographic Experts Group), formato utilizzato per le immagini di tipo fotografico; PNG(Portable Network Graphics), formato di compressione di immagini destinato a sostituire il formato GIF rispetto al quale presenta miglioramenti e maggiore compressione. Il linguaggio HTML - Cristina Fregni

La rappresentazione dei colori
Il linguaggio HTML utilizza una combinazione dei tre colori fondamentali RGB (Red, Green, Blue) per l’impostazione dei colori nei vari elementi delle pagine. Tali colori vengono indicati attraverso 3 numeri, compresi ciascuno tra 0 e 255, che specificano la gamma cromatica del rosso, del verde e del blu. I valori devono essere scritti in formato esadecimale e quindi variano da 00 a FF. Ad esempio: nero bianco FF FF FF rosso FF 00 00 verde 00 FF 00 blu FF E’ possibile usare anche un nome simbolico corrispondente al valore esadecimale utilizzando un’apposita tabella. Il linguaggio HTML - Cristina Fregni

I commenti Per documentare il codice della pagina HTML, in vista di successive revisioni, l’autore può inserire commenti che vengono ignorati dal browser. Le righe di commento sono delimitate dalla coppia di tag: <!-- … --!>. I commenti possono essere formati da una o più righe. Il linguaggio HTML - Cristina Fregni

Corpo Contiene il documento vero e proprio con tutti gli elementi caratteristici di un ipertesto. Inizia sempre con il tag <BODY> e termina con </BODY>, tutto ciò che viene scritto all’esterno dei due tag non verrà visualizzato. Il linguaggio HTML - Cristina Fregni

BODY A questo tag si possono aggiungere attributi per l’impostazione dei colori di pagina e testo: Attributi di BODY Imposta... BGCOLOR=“rrggbb” il colore dello sfondo; BACKGROUND=“URL-file-immagine” una immagine di sfondo; LINK=“rrggbb” il colore del link VLINK=“rrggbb” il colore del link visitato; ALINK=“rrggbb” il colore del link attivo; TEXT=“rrggbb” il colore del testo; Il linguaggio HTML - Cristina Fregni

Il testo L’inserimento di testo si effettua digitando una o più frasi all’interno del corpo della pagina e completandolo con i tag di formattazione. Il testo di un documento HTML è visualizzato dal browser in modo da riempire lo spazio disponibile sullo schermo (word-wrapping). Il browser quindi non riconosce più di uno spazio o i ritorni a capo utilizzati durante l’editing del testo. Il linguaggio HTML - Cristina Fregni

I caratteri speciali Per inserire caratteri speciali e simboli particolari (es.: <, >, segni e accenti aggiunti agli altri caratteri per motivi di pronuncia) in modo che siano visualizzati da tutti i browser, si impiegano le character entity dell’HTML, ad esempio: Carattere Codice spazio virgolette " è &egrave È &Egrave é &eacute minore < maggiore > Il linguaggio HTML - Cristina Fregni

I paragrafi <BR>: inserisce un ritorno a capo per l’interruzione della riga; <P ALIGN=LEFT|CENTER|RIGHT>…</P>: specifica l’inizio di un nuovo paragrafo creando una porzione di testo separata dalle altre da una riga di spazio ; <PRE>…</PRE>”: permette l’inserimento di testo preformattato, cioè che viene visualizzato esattamente come scritto nel file HTML; <HR ALIGN=LEFT|CENTER|RIGHT SIZE=n WIDTH=n|n% NOSHADE>: inserisce una riga orizzontale; Il linguaggio HTML - Cristina Fregni

La formattazione del testo
Solitamente è necessario differenziare le dimensioni dei caratteri per distinguere il titolo dal resto del testo o per definire sottotitoli o elementi testuali evidenziati. HTML dispone dei seguenti tag: <B>…</B>: per il grassetto (Bold); <I>…</I>: per il testo in corsivo (Italic); <U>...</U>: per il sottolineato (Underline); <Hn>...</Hn>: permette di impostare i titoli. Vi sono sei livelli di intestazione che vanno da n=1, per il primo livello (con maggiore dimensione di carattere), fino a n=6 per il sesto livello. Il linguaggio HTML - Cristina Fregni

Font dei caratteri L’HTML permette di definire il font di un testo racchiudendolo nei tag <FONT>…</FONT> e specificando i suoi attributi, descritti nella tabella seguente: Attributi di FONT Definisce.. FACE=“font” il tipo di font da applicare. Se il font non è installato nel computer, il browser utilizza quello predefinito. SIZE=“n” le dimensioni indicate in modo assoluto da “1” a “7”, o relativo aumentando (+n) o diminuendo (-n) il valore di default (in genere 4). COLOR=“rrggbb” il colore con il formato RGB. Il linguaggio HTML - Cristina Fregni

Le liste E’ possibile definire due diversi tipi di liste che vengono classificati in elenchi puntati: Elenco non ordinato (unordered list) Elenco numerato (ordered list) <UL> <LI>primo punto</LI> <LI>secondo punto</LI> </UL> <OL> </OL> Il linguaggio HTML - Cristina Fregni

Visualizzazione di immagini
Per includere un’immagine nel documento si deve usare il tag: <IMG SRC=“URL-file-immagine” Attributi> L’URL può essere assoluto o relativo. Il file immagine è memorizzato separatamente dal documento HTML. In genere tutte le immagini di un sito web vengono inserite in una apposita cartella (images). Il linguaggio HTML - Cristina Fregni

Attributi di IMG Definisce… WIDTH=“nn” e HEIGHT=“nn” la larghezza e l’altezza occupate dall’immaginenella pagina. Vengono indicate in pixel oppure in percentuale (“n%”) rispetto allo schermo. ALT (ALTernate text) il testo visualizzato: durante il download del file; in caso di mouseover; al posto dell’immagine quando non viene visualizzata. BORDER=“n” la larghezza del bordo in pixel. ALIGN= RIGHT|LEFT come è visualizzato il testo intorno all’immagine. Il linguaggio HTML - Cristina Fregni

I collegamenti ipertestuali
La principale caratteristica di un ipertesto è la possibilità di consultare il documento in modo non sequenziale attraverso l’uso di collegamenti ad altri oggetti o pagine. Con i link si effettuano riferimenti a file remoti (esterni) o ad altre parti del documento stesso (interni). Il link appare sulla pagina come un’immagine, un’animazione o semplicemente un testo di norma evidenziato con sottolineatura e colore diverso, inoltre passando su di esso il puntatore del mouse si trasforma in mano indicando che si può attivare il link premendo con il tasto del mouse. Il linguaggio HTML - Cristina Fregni

I link esterni Sono collegamenti ad altri documenti HTML, oggetti multimediali o servizi Internet. Per realizzare un link si utilizza il tag: <A HREF=“URL”>descrizione</A> Documento a cui si vuole fare riferimento Testo/immagine che permette di collegarsi al documento di riferimento Il linguaggio HTML - Cristina Fregni

L’URL si può riferire ad oggetti diversi:
Oggetto URL File nella stessa directory dello stesso server “nome-file.htm” Sito internet remoto “ Invio di messaggio di posta elettronica Sito web remoto Pagina1 HTML Pagina2 HTML Gestore posta elettronica Il linguaggio HTML - Cristina Fregni

I link interni Sono collegamenti ad una determinata posizione dello stesso documento HTML. Vengono utilizzati quando i documenti da visualizzare sono molto lunghi. Si inseriscono specifiche ‘ancore’ per muoversi in modo mirato all’interno del documento garantendo una migliore leggibilità del documento stesso. Il linguaggio HTML - Cristina Fregni

<A NAME= “nome”>
I link interni si indicano con il tag: <A HREF= “#nome”>descrizione</A> Ancora a cui si vuole fare riferimento all’interno del documento Testo/immagine che permette di collegarsi al punto di riferimento nel documento L’ancora dovrà essere definita all’interno dello stesso documento con l’attributo: <A NAME= “nome”> Ancora a cui si fa riferimento nel documento Il linguaggio HTML - Cristina Fregni

I link possono anche essere fatti ad un punto specifico di un altro documento. Doc1 <A NAME=“inizio”> <A HREF=”doc2.htm#primo”>…</A> <A HREF=”#fine”>Vai alla fine</A> <A NAME=“fine”> <A HREF=”#inizio”>Torna su</A> Doc2 <A NAME=“primo”> Il linguaggio HTML - Cristina Fregni

Le Tabelle Nelle pagine web sono impiegate per: organizzare i dati in modo ordinato inserendoli in una griglia; creare layout di pagina complessi, posizionando i diversi oggetti multimediali in posizioni individuate dalle righe e colonne della tabella stessa. Il linguaggio HTML - Cristina Fregni

<TABLE> … </TABLE>
Nell’HTML, la descrizione di una tabella è racchiusa nel tag: <TABLE> … </TABLE> e nei seguenti elementi annidati, che ne definiscono le componenti (righe e colonne): Tag annidato in TABLE Delimita all’interno della tabella… <TR>…</TR> (Table Row) una singola riga <TD>…</TD> (Table Data) Una singola cella all’interno di una riga <TH>…</TH> (Table Heading) L’intestazione di una colonna Il linguaggio HTML - Cristina Fregni

BORDERCOLOR e BGCOLOR=“rrggbb”
Il formato di una tabella può essere modificato mediante gli attributi principali elencati di seguito: Attributo Imposta… BORDER=“n” il bordo della tabella, “n” ne definisce lo spessore, quando è 0 la tabella risulta senza bordi. BORDERCOLOR e BGCOLOR=“rrggbb” il colore dei bordi e quello interno della tabella. ALIGN= RIGHT|CENTER|LEFT l’allineamento della tabella nella finestra. WIDTH=“nn”(%) la larghezza della tabella in pixel o in percentuale. CELLSPACING=n lo spazio tra le celle. CELLPADDING=n lo spazio all’interno delle celle. Il linguaggio HTML - Cristina Fregni

BORDERCOLOR e BGCOLOR=“rrggbb”
Anche il formato delle celle (definite con i tag <TD> e <TH>) può essere modificato mediante gli attributi: Attributo Imposta… BORDERCOLOR e BGCOLOR=“rrggbb” il colore dei bordi e quello interno della cella. ALIGN= RIGHT|CENTER|LEFT l’allineamento orizzontale del testo nella cella. VALIGN= TOP|MIDDLE|BOTTOM l’allineamento verticale del testo nella cella. WIDTH=“nn”(%) la larghezza della cella in pixel o in percentuale. COLSPAN=“n” e ROWSPAN=“n” l’unione in orizzontale o verticale delle celle, “n” ne indica il numero. Il linguaggio HTML - Cristina Fregni

I Moduli Sono contenitori di elementi HTML che realizzano una Interfaccia Grafica per l’Utente (GUI) e gli permettono di interagire con il sistema In questo modo l’utente può operare scelte, fornire risposte, inserire dati . Il linguaggio HTML - Cristina Fregni

L’interazione tramite i form avviene attraverso due fasi: creazione del form con i suoi elementi e attributi per ricevere i dati in input; elaborazione dei dati che può avvenire: direttamente sul client tramite programmi di scripting; al momento della sottomissione del form, quando i dati vengono inviati ad un programma di script del server. Il linguaggio HTML - Cristina Fregni

<FORM> elementi form </FORM>
Per inserire un form si usa il tag doppio: <FORM> elementi form </FORM> i cui attributi, descritti nella tabella seguente, specificano il tipo di comunicazione tra il browser e i programmi eseguiti sul server. Attributo Definisce… NAME=“nome” l’identificatore del modulo. ACTION=“URL” l’URL del programma che elabora i dati o un indirizzo di . METHOD= “GET|POST” il metodo di trasmissione dei dati tra browser e server. “GET” – tutti i dati dei campi del modulo sono trasmessi in un’unica variabile stringa (query_string), lunga al massimo 256 caratteri, aggiungendoli all’URL dello script; “POST” – i dati vengono inviati al server in modo autonomo nel corpo del messaggio HTTP per diventare l’input dell’applicazione remota. Il linguaggio HTML - Cristina Fregni

Gli elementi dei moduli
Per inserire un campo in un modulo si deve annidare nell’elemento FORM il tag singolo <INPUT> con i principali attributi descritti di seguito: Attributo Definisce… NAME=“nome” il nome per richiamare l’oggetto durante l’elaborazione dei dati. VALUE=“valore” il valore iniziale del campo. TYPE= “TEXT|PASSWORD|HIDDEN |CHECKBOX|RADIO |BUTTON|SUBMIT|RESET” il tipo di funzionalità svolta dall’oggetto-campo. Il linguaggio HTML - Cristina Fregni

Caselle di Testo Hanno la funzione di raccogliere i dati digitati dall’utente, possono essere dei seguenti tipi: Valore TYPE Caselle di testo Funzioni Aspetto nel Browser TEXT a singola linea Input di una stringa digitata dall’utente nel browser PASSWORD password Input di dati nascosti durante la digitazione HIDDEN nascoste Invio di parametri al server definiti dal programmatore nell’attributo VALUE e non visualizzati all’utente Il linguaggio HTML - Cristina Fregni

Pulsanti di Comando Permettono di eseguire alcune azioni associate al loro evento predefinito (click) e dispongono di funzionalità diverse: Valore TYPE Pulsante L’evento click(): Aspetto nel Browser BUTTON normale deve definirlo il programmatore con un linguaggio di script SUBMIT invio dei dati provoca l’invio dei dati dal browser al programma del server web RESET cancellazione dati provoca la cancellazione di tutti i dati digitati Il linguaggio HTML - Cristina Fregni

Caselle di Selezione e Pulsanti di Opzione
Permettono all’utente di fare più (checkbox) o una sola scelta (radio button) all’interno di voci predefinite. Si devono utilizzare i seguenti valori degli attributi: Valore TYPE Campo L’evento click(): Aspetto nel Browser CHECKBOX casella di selezione provoca la selezione della casella RADIO pulsante di opzione causa la scelta del pulsante eliminando la selezione negli altri Il linguaggio HTML - Cristina Fregni

Caselle di selezione e pulsanti di opzione devono essere inseriti in un gruppo di campi individuato da un insieme di tag <INPUT> separati, ma con valore dell’attributo NAME comune. In entrambi i controlli: il valore inviato al server è definito dall’attributo VALUE; la presenza dell’attributo CHECKED, determina una selezione di default. Il linguaggio HTML - Cristina Fregni

<SELECT>…</SELECT>
Caselle di riepilogo Consentono di definire una lista mediante l’elemento doppio <SELECT>…</SELECT> che include un elenco di valori inseriti nei tag singoli <OPTION>. Il linguaggio HTML - Cristina Fregni

In questo tipo di controllo: il dato trasmesso al server è quello impostato dal programmatore nell’attributo VALUE di OPTION, sulla base della scelta fatta dall’utente nella lista; per impostare un elemento come selezionato, si deve aggiungere a OPTION l’attributo SELECTED; per poter scegliere più di una voce occorre aggiungere a SELECT l’attributo MULTIPLE. Il linguaggio HTML - Cristina Fregni

<TEXTAREA>…</TEXTAREA>
Aree di Testo Permettono di far inserire testo all’utente come all’interno di un editor, ammettendo quindi la composizione di un testo su più righe. Si definisce con il tag doppio: <TEXTAREA>…</TEXTAREA> Il linguaggio HTML - Cristina Fregni

Gli attributi che si possono utilizzare nell’area di testo sono indicati nella seguente tabella: Attributo Definisce… NAME il nome per richiamare l’oggetto durante l’elaborazione dei dati. ROWS=“n” il numero di righe visibili. COLS=“n” la larghezza in caratteri. WRAP= “virtual/off” se il testo va a capo automaticamente o solo quando l’utente preme INVIO. Il linguaggio HTML - Cristina Fregni

Formattazione di un Form
Il formato di un modulo può essere modificato inserendo nella sua definizione i tag o attributi descritti nella tabella seguente: Inserire… Per…. <FIELDSET> <LEGEND>Etichetta cornice</LEGEND> Elementi del form da raggruppare </FIELDSET> raggruppare un insieme di elementi del form in una cornice. <LABEL FOR=IDControllo> Valore etichetta </LABEL> inserire un’etichetta. Si associa a un altro controllo mediante gli attributi ID del campo e della label. TABINDEX determinare l’ordine di input dei dati. L’attributo va inserito nel tag <INPUT>. Il valore 1 determina il campo con il focus. Il linguaggio HTML - Cristina Fregni

La produzione di pagine web

Presentazioni simili

Presentazione sul tema: "La produzione di pagine web"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back

Entrare

Autorizzarsi attraverso i social network:

La produzione di pagine web

Presentazioni simili

Presentazione sul tema: "La produzione di pagine web"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back