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 nella prima lezione per essere visualizzati su Internet, i documenti che contengono dati in formato testo devono contenere i tag necessari ad informare il browser (Internet Explorer, Mozilla Firefox o altri) sulla sua attivazione per la visualizzazione della stessa. 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. "Lezioni di base su HTML" del 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 vera e propria inizia subito dopo quando inseriamo il tag <HEAD>. Questo tag rappresenta 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 da includere nell'intestazione HTML sarà il tag <TITLE>. Come dice la stessa definizione 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 dello stesso). 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). Se utilizzate PSPad Editor salvate semplicemente dal menu File ->Salva oppure, attraverso la barra dei menu, con il tasto Salva. Il tag <BODY> 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 poi ci permetterà 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 </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 "Lezioni di base su HTML" del prof. Maurizio Gambino – 02. Struttura è 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 rosso valori attributo <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: i più diffusi editor WYSIWYG per l'HTML prevedono istruzioni per la definizione di colori esadecimali, oltre ai software di fotoritocco, sono in grado di fornire il corrispondente valore esadecimale da copiare/incollare nella nostra pagina. L'attributo BACKGROUND permette di inserire un'immagine come sfondo per la pagina web. Il sottoscritto preferisce che si utilizzi il formato grafico jpg, o jpeg, per quanto riguarda le foto ma se utilizzate un disegno preferisco che utilizziate il formato png. 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ù 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. "Lezioni di base su HTML" del prof. Maurizio Gambino – 02. Struttura 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, nel quale, attribuendo allo stesso il valore "fixed", è possibile rendere lo sfondo immobile rispetto allo scorrimento della pagina, cioè il testo scorre e l'immagine resta ferma. 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. "Lezioni di base su HTML" del prof. Maurizio Gambino – 02. Struttura
Scarica
