1 Il linguaggio HTML

Corso: I O.S.P.A. Laboratorio: Elementi di grafica per il web C.S.F. En.A.I.P. Cuneo N° scheda 1
Titolo Esercitazione / Argomento trattato h previste: 2 Il linguaggio HTML data: ____________ Obiettivi: •
Come si crea una pagina WEB: i primi rudimenti Tipo di attività Cognome e Nome ................................................................ Attività individuale Considerazioni personali e difficoltà riscontrate nello svolgimento dell’esercitazione:
______________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ ________________________________________________________________________________________________ Esercitazione effettuata dal Formatore al Alessia Cesana Ore effettive Il linguaggio HTML INTRODUZIONE HTML (Acca ti emme elle) Il linguaggio in cui sono scritti gli ipertesti in Internet è l'HTML (HyperText Markup Language). Questo linguaggio creato una decina di anni fa al CERN, un centro di ricerca europeo, consente di descrivere la struttura di un documento, lo stile del testo, la posizione delle immagini, la modalità per visualizzare suoni e filmati, indipendentemente dal sistema operativo utilizzato da chi leggerà il documento. La struttura di un documento HTML è a prima vista complessa in quanto si basa sull'utilizzo di etichette (Tag) che descrivono l'aspetto tipografico che dovrà avere il documento. Queste etichette sono lette ed interpretate dai browser, i programmi che visualizzano sul nostro computer le pagine Web. Se stai leggendo questo testo con Internet Explorer, puoi visualizzare il codice HTML facendo clic sulla voce "Visualizza" della barra dei menu scegliendo successivamente l'opzione "HTML". Se invece utilizzi Nescape Navigator, devi scegliere dal menu "Visualizza" l'opzione "Sorgente pagina". Come si realizzano i documenti HTML Vi sono vari modi per realizzare un documento HTML: •
Si può utilizzare un editor di testi (ad esempio Notepad) e scrivere il codice. Questo sistema richiede naturalmente una buona conoscenza del linguaggio HTML. •
Si può utilizzare un editor specifico (ad esempio Macromedia Dreamweaver) che si occupa di scrivere il codice HTML mentre noi inseriamo il testo, le immagini, i suoni, i collegamenti ipertestuali. Questi editor sono abbastanza facili da utilizzare perché utilizzano un approccio che è chiamato WYSIWYG (What You See Is What You Get, che potrebbe essere tradotto in questo modo: quello che vedi è quello che ottieni). •
Si possono infine utilizzare le funzioni di creazione automatica dei documenti HTML presenti in molti programmi. Poiché in questo caso si utilizzano strumenti progettati per altri scopi (es. scrivere testi, creare archivi, impaginare documenti), i documenti che si ottengono hanno quasi sempre una struttura molto semplice. Le basi dell'HTML In un documento HTML sono incorporate delle etichette, chiamate TAG, che indicano al browser come visualizzare le informazioni. Questi comandi sono racchiusi fra i simboli "<" e ">". Ad esempio il tag <B> indica al browser che il testo che segue l'istruzione deve essere visualizzato in grassetto (in inglese bold). Un tag analogo, ma preceduto da una barra </B> indicherà al browser di tornare a visualizzare il testo con caratteri normali. Scheda n. 1 A. Cesana Il linguaggio HTML Se nella pagina HTML fosse inserito questo testo: <B>Attenzione</B>alla chiusura dei tag! Il browser lo visualizzerebbe in questo modo: Attenzione alla chiusura dei tag! Ricordati che all'interno dei tag sono contenute le istruzione per il browser; ciò che è fuori dai tag, invece, costituisce il testo che verrà visualizzato nella pagina Web. Un documento HTML inizia sempre con il tag <HTML> ed è chiuso dal tag </HTML>. All'interno troviamo due sezioni: •
l'intestazione (head) compresa fra i tag <HEAD> e </HEAD>. Questa sezione contiene fra l'altro il titolo del documento fra i tag <TITLE>. A parte il titolo le informazioni contenute nell'intestazione non sono visibili nella pagina Web. •
il corpo (body) compreso fra i tag <BODY> e </BODY>. Questa sezione contiene il documento che verrà visualizzato dal browser. Ecco come appare il codice di un semplice documento HTML: A questa semplice struttura possono essere aggiunti altri tag per indicare al browser che forma dare al testo, come inserire le immagini, i suoni, i collegamenti ipertestuali, ecc. Attributi La maggior parte dei TAG può essere ulteriormente dettagliata dall’utilizzo di ATTRIBUTI che consentono di definirne ulteriori caratteristiche. Gli attributi si inseriscono “dentro” i simboli “<” e “>” dei TAG ai quali si riferiscono. Esempio: <BODY bgcolo=”red”> Consente di colorare lo sfondo della pagina HTML con il colore rosso. Scheda n. 1 A. Cesana Il linguaggio HTML 10 CONSIGLI PER UN SITO WEB PERFETTO 1.
Dai sempre un nome in lettere minuscole ai file delle tue pagine. Per esempio: "PAGINA.htm" è sbagliato, mentre "pagina.htm" è giusto. 2.
Non inserire nella pagina immagini e foto superiori a 30 Kb di peso. 3.
Le dimensioni del testo non devono essere troppo piccole nè troppo grandi. Meglio una dimensione media, che permetta di leggere senza problemi. 4.
Il colore del testo della pagina non deve essere simile a quello di sfondo, altrimenti il testo si leggerà con troppa difficoltà. 5.
Ricorda che il tuo sito sarà visto su molti computer diversi dal tuo e che sicuramente alcuni non lo vedranno come lo vedi tu. 6.
Non utilizzare tipi di font troppo particolari, perchè rischi che altri, che non li hanno nel loro computer, non riescano a vederli. 7.
Utilizza GIF animate per abbellire il tuo sito. Ne trovi migliaia cliccando qui http://gifanimate.html.it Ma sta attento a non metterne troppe, altrimenti la pagina diventerà troppo lenta da caricare. 8.
Osserva e prendi spunto dai siti già esistenti. E' così che si educa il gusto e si diventa capaci di fare siti sempre più belli. 9.
È facendo pagine web che si diventa bravi a fare pagine web! Non preoccuparti se i tuoi primi lavoretti non saranno strabilianti... prima o poi lo saranno! 10.
La tua pagina web deve piacere prima di tutto a te, ma il cliente acquista un prodotto che… piace a lui. ESERCIZI Esercizio 1: crea una cartella con il tuo nome e cognome contenente due cartelle denominate “esercizi in classe” e “esercizi liberi”. Apri il blocco note del computer e digita il codice riportato nella pagina precedente salvando il file come “esercizio1.htm” (attenzione a scegliere “Tutti i file” vicino all’opzione “Salva come…”). Salva l’esercizio nella cartella “esercizi in classe”. Esercizio 2: apri il file “esercizio1.htm” e prova a cambiare lo sfondo della pagina utilizzando l’attributo del tag “BODY” denominato bgcolor con i seguenti valori. Completa poi la tabella seguente: BODY VALORE DELL’ATTRIBUTO bgcolor black lime purple teal red #7FFF00 #1E90FF #8A2BE2 #FFB6C1 #FFD700 Quale colore viene visualizzato? Scheda n. 1 A. Cesana