docStruttura di una pagina HTML
download 
Reclamo Transcript
Struttura di una pagina HTML
Intestazioni HTML. Argomenti trattati: - Cosa è una pagina HTML: Cosa sono i tag, il tag di inizio pagina e ML. - Il tag di inizio codifica: Definizione del tag <HTML> e suo utilizzo. - I tag di intestazione: Come utilizzare i tag HTML per definire le informazioni di pagina. - Il tag <BODY>: Utilizzo e attributi del tag che contiene le informazioni della pagina. - Il trattamento degli errori: Come mai la mia pagina non visualizza niente? Cosa è una pagina HTML Da questo momento in poi cominceremo la vera e propria programmazione in HTML. Come accennato in precedenza, per essere visualizzati su Internet i documenti che contengono dati in formato testo devono contenere i tag necessari ad essere interpretati dal browser (Internet Explorer, Mozilla Firefox o altri) e visualizzati dagli stessi. In altri termini un documento contenente testo, salvato in formato .htm senza alcun tag HTML viene comunque visualizzato dal browser, ma privo di qualsiasi formattazione: senza ritorni a capo, paragrafi, testo centrato, grassetto, corsivo ecc. Lo scopo dell'HTML è quello di fornire, attraverso comandi chiamati, come già detto, tag una formattazione al documento, oltre all'inserimento di immagini ed altri elementi multimediali (filmati, foto, effetti, ecc.). Il lavoro che uno sviluppatore Web produce all'interno di un documento HTML è indirizzato a fornire tutte le informazioni necessarie al browser per interpretare correttamente la pagina. Un documento HTML si divide in due parti fondamentali: l'intestazione e il corpo del documento. E' facile comprendere che il corpo del documento contiene tutti gli elementi della pagina: il testo, le immagini, gli effetti e quanto altro viene materialmente visualizzato dal browser. Al contrario, l'intestazione contiene una serie di informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate all'interno dello stesso. L'intestazione, quindi, ha un ruolo non apparente ma sicuramente fondamentale. Solo per citare alcuni elementi forniti dall'intestazione: il titolo della pagina, i termini chiave per i motori di ricerca, il tipo di HTML supportato ed i link base di riferimento, tutte informazioni che nel corso di queste lezioni tratteremo. In questa sede analizzeremo solo alcuni elementi, omettendo per il momento lo studio degli altri non immediatamente necessari alla comprensione di HTML. Il linguaggio HTML - prof. Maurizio Gambino | 02. Struttura Il tag di inizio codifica Cominceremo con il definire il primo tag di un ipertesto: <HTML>. Esso è anche definito come tag di inizio codifica in quanto la sua presenza all'inizio del documento indica che il file è una pagina HTML. Questo tag, come la maggior parte dei marcatori che tratteremo, necessita della chiusura </HTML>, che rappresenta la fine della codifica HTML della pagina. I tag di intestazione L'intestazione inizia quando inseriamo il tag <HEAD>. Questo tag racchiude l'intera intestazione, ed al suo interno, tra l'apertura <HEAD> e la sua chiusura </HEAD>, verranno definiti altri tag che conterranno le informazioni, di varia natura, relativa alla pagina che andiamo a scrivere. Per il momento l'unico tag dell'intestazione che tratteremo sarà il tag <TITLE>. Come dice la stessa traduzione dall’inglese, esso rappresenta il titolo della pagina. La sua impostazione prevede che il titolo che definiremo verrà visualizzato nella barra del titolo del browser (la striscia azzurra in alto nella finestra o la scheda di visualizzazione, in base alle impostazioni del vostro browser). Per fare una prova vi invito a digitare il seguente codice: <HTML> <HEAD> <TITLE>La mia prima pagina web</TITLE> </HEAD></HTML> Questa pagina, anche se contiene la sola intestazione, è pienamente valida come pagina anche se logicamente non è corretto considerarla tale. Se utilizzate un editor di testo quale il Blocco Note, salvate il file come intestazione.htm (dalla finestra di Salva con Nome digitare il nome del file completo di estensione e nel modulo Salva come selezionare Tutti i file). Per iniziare a scrivere in HTML consiglio di utilizzare PSPad Editor, un editor multi linguaggio, salvate semplicemente dal menu File ->Salva oppure, attraverso la barra dei menu, con il tasto Salva. Il corpo della pagina Il tag <BODY>, seguito da opportuni attributi che adesso andremo a trattare, è l'elemento iniziale ed essenziale per poter iniziare a scrivere il codice che permette di visualizzare le informazioni inserite. E' posto in posizione immediatamente successiva alla chiusura del tag </HEAD>, e, come molti altri tag che vedremo successivamente, ha bisogno della chiusura per delimitare ciò che verrà visualizzato nello schermo. La sintassi generale del tag <BODY> è la seguente: <BODY> - Contenuto del documento - Il linguaggio HTML - prof. Maurizio Gambino | 02. Struttura </BODY> Il tag <BODY>, come accennato prime, possiede vari attributi che permettono di attuare diverse funzioni di visualizzazione dei dati inseriti, tutti di varia natura. Nella fattispecie vi è l'attributo BGCOLOR il quale consente l'impostazione di un colore di base per lo sfondo di un intera pagina. La sintassi per l'inserimento è la seguente: <BODY BGCOLOR="red"> Il valore di questo attributo (nel nostro caso abbiamo immesso "red" per visualizzare uno sfondo rosso) può essere anche dato tramite un valore numerico esadecimale di 6 cifre, preceduto dal carattere # (cancelletto), conosciuta come "notazione RGB" (dove RGB è l'acronimo di Red-Green-Blue). Il valore numerico viene espresso per coppie di numeri dal valore 00 al valore FF composte, in ordine, dalle prime due cifre per la tonalità del rosso (Red), le due centrali per il verde (Green) e le ultime due per il blu (Blue). Come sappiamo il rosso, il verde ed il blu sono i colori fondamentali che permettono la composizione dei restanti. Da ciò si evince che "dosando" sapientemente questi tre valori esadecimali saremo in grado di ottenere infinite tonalità personalizzate per il colore di sfondo della nostra pagina. Degli esempi possono chiarire il metodo: Colore Sfondo valori attributo rosso <BODY BGCOLOR="#FF0000"> verde <BODY BGCOLOR="#00FF00"> blu <BODY BGCOLOR="#0000FF"> giallo <BODY BGCOLOR="#FFFF00"> nero <BODY BGCOLOR="#000000"> bianco <BODY BGCOLOR="#FFFFFF"> Un suggerimento: in Rete vi sono innumerevoli tabelle che illustrano e spiegano come utilizzare la notifica RGB nelle pagine web. L'attributo BACKGROUND permette di inserire un'immagine come sfondo per la pagina web. Il sottoscritto preferisce che si utilizzi il formato grafico jpeg (Joint Photographic Expert Group), con estensione .jpg, per quanto riguarda le foto ma se utilizzate un disegno preferisco che utilizziate il formato png (Portable Network Graphics). La scelta del formato .jpg è dettata dal fatto che questo formato permette un alta risoluzione della stessa immagine, da scegliere in base alla risoluzione con cui stiamo sviluppando il sito (di solito è la stessa dello schermo in cui stiamo lavorando), che non "pesi" molto in termini di kilobyte. Di solito un immagine da 1024x768 (la risoluzione più Il linguaggio HTML - prof. Maurizio Gambino | 02. Struttura diffusa) pesa dai 100 ai 300 kilobyte, un peso accettabile per qualunque sito, anche in voce del fatto che ormai la maggior parte delle connessioni mondiali sono con linee ADSL. L'utilizzo del formato png è dettato dal fatto che i disegni presentano una qualità nella risoluzione maggiore di quella degli altri formati. Un esempio: se l'immagine da utilizzare si chiama sfondo.jpg e la stessa si trova nella stessa cartella in cui è memorizzata la nostra pagina, la sintassi per caricare l'immagine come sfondo è: <BODY BACKGROUND="sfondo.jpg"> Il browser visualizzerà l'immagine sfondo.jpg riempiendo lo spazio disponibile. Nel caso la nostra pagina occupi una risoluzione superiore a quella dell'immagine quest'ultima sarà "ripetuta" nel successivo spazio non coperto. Naturalmente la pratica di questa regola vale più di qualsiasi altra spiegazione, per adattarci a questo tipo di problema in cui facilmente potremo incappare. Per questa ragione è assolutamente necessario utilizzare uno sfondo con risoluzione pari (o in alcuni casi di poco superiore) a quella del nostro schermo. E' bene inoltre ricordare che la scelta di un'immagine di sfondo deve essere il più possibile conforme al tema affrontato nella pagina, o del sito in generale, in modo da rendere la pagina esteticamente gradevole. Trattando dell'attributo BACKGROUND abbiamo sottolineato il fatto di come le immagini inserite come sfondo si "adattino" allo schermo disponibile. Se, per nostre esigenze, la pagina risulterà tanto lunga da attivare lo scroller laterale per permettere la lettura del testo non visibile in una schermata, lo sfondo (e l'immagine associata) scorrerà insieme alla pagina e, se la lunghezza della pagina supera la risoluzione, per adattamento il browser la duplicherà. Per evitare questa fastidiosa "duplicazione" dell'immagine il tag BODY prevede un attributo chiamato BGPROPERTIES, al quale attribuendo il valore "fixed", è possibile bloccarlo rispetto allo scorrimento della pagina. Ecco la sintassi di come utilizzarlo: <BODY BACKGROUND="sfondo.gif" BGPROPERTIES="fixed"> Attualmente funziona solo con Microsoft Internet Explorer. L'utilizzo con altri browser potrebbe non essere efficace. Il trattamento degli errori Nessuno dei browser che visualizza le pagine in HTML possiede un compilatore di errori. Questo significa che se durante la scrittura del codice HTML della nostra pagina commettiamo errori veniali, quali l'omissione o la mancata chiusura di tag quali <HEAD>, <HTML> o <BODY> il browser visualizzera correttamente la pagina interpreterà tutto quello che viene dal tag in poi. In caso di errore grave (tipo tag scritto non correttamente) causera la mancata visualizzazione della pagina, o pagina bianca. Il linguaggio HTML - prof. Maurizio Gambino | 02. Struttura
