Slide Linguaggio HTML, Slide di Elementi di Informatica

Scarica Slide Linguaggio HTML e più Slide in PDF di Elementi di Informatica solo su Docsity!

anno accademico 2012

Scienze e tecniche del servizio sociale

Abilità informatiche:

Fondamenti del linguaggio Html

HTML

HTML e i browser

Come funziona un Browser

Lo standard HTML

Come è fatta una pagina HTML

Le estensioni dei File e le impostazioni del browser

I TAG dell’HTML come scriverli

I commenti

Maiuscolo o Minuscolo

Struttura della Pagina

L’HTML e i fogli di stile CSS

Separare il Layout dal contenuto

Gli elementi HTML e i fogli di stile

Lo sfondo di un documento HTML

Impostare il colore di sfondo

Inserire un immagine di sfondo

Eliminare i margini delle pagine

Impostare la lingua del documento

Lo sfondo con i CSS

Attributi di , ,

Impaginare un layout con le tabelle

I Frame

Comporre una pagina in Frame

Attributi dei frames per la visualizzazione

I link in unframe set e il tag no frames

L’IFrame

Vantaggi e svantaggi dei Frame

Impaginare a livelli con i CSS

I Moduli

Struttura del tag form

Method

Enctype (tipo di codifica)

Il tag input

Includere elementi multimediali e script

Premessa il tag object

Includere un file Audio

Includere un file video

Includere un file Flash

Includere un file Java

Includere un file di scripting o CSS

Linguaggi e strumenti

I meta tag

I doc type

Configurare un programma FTP

Gli editor visuali

1.1 HTML e i browser

L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Un documento html non è nient'altro infatti che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere. Il Browser è il programma che usate quando navigate nel Web e svolge principalmente due compiti:

• scarica i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo
• legge i documenti scritti in html, e a seconda delle indicazioni ivi contenute, visualizza la pagina in un modo, piuttosto che in un altro; inoltre i vari files associati a quel documento (ad esempio le immagini, o i filmati in flash) vengono disposti secondo le indicazioni del codice html Oltre ad Internet Explorer, il browser più diffuso, esistono altri browser: prima di tutto lo "storico" Netscape Navigator , con cui la Microsoft ha ingaggiato una vera e propria guerra (vincendola). Poi il browser open source Mozilla , che nasce da Netscape e ha la particolarità di essere a codice aperto, cioè con la possibilità per gli sviluppatori di vedere com'è fatto il programma. Una parte di utenti (si tratta sempre di una minoranza comunque rispetto allo strapotere di Internet Explorer) utilizza poi Opera , un browser norvegese celebre per la sua velocità di visualizzazione delle pagine. Ovviamente esistono anche molti altri browser. Per ciascuno di essi esistono poi differenti versioni a seconda del sistema operativo (Windows, Mac OS, Linux, o altri). E’ importante sin dall'inizio acquisire una mentalità multi-­‐browser , perché il mestiere del webmaster non consiste tanto nel conoscere nei minimi dettagli il codice HTML, quanto piuttosto nel sapere come il codice HTML verrà visualizzato sul computer dell'utente: infatti uno dei lavori più difficili è quello di riuscire a far vedere correttamente il proprio sito con i browser e le piattaforme più svariate. I files scaricati dal web vengono memorizzati in una particolare cartella del computer che prende il nome di cache. In Internet Explorer è possibile visualizzarla utilizzando i comandi: Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file In Mozilla: Modifica > Preferenze > Avanzate > Cache In questo modo verrà mostrato il percorso della cartella in cui i documenti vengono temporaneamente memorizzati.

La visualizzazione di un file html da parte del browser prende il nome di rendering della pagina. Motore di rendering è dunque quella sezione del browser che si occupa di mostrare sul video la pagina. Il compito del linguaggio HTML è dunque quello di spiegare al browser come i vari files relativi al documento in esame devono essere disposti all'interno della pagina che stiamo visualizzando. In qualsiasi momento è possibile visualizzare il codice HTML delle pagine che stiamo visitando. Con Internet Explorer: Visualizza > HTML Con Mozilla : Visualizza > Codice Sorgente oppure si può effettuare la stessa operazione, utilizzando il tasto destro del mouse per visualizzare il menù a tendina, e scegliendo poi la voce corrispondente.

1.3 Lo standard HTML

L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: World Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); e -­‐ da un certo punto in poi -­‐ l'HTML si è evoluto in XHTML (si tratta dell'HTML riformulato come linguaggio XML -­‐ ne sono già state rilasciate due versioni). La versione dell'HTML che esamineremo in questo corso è l'ultima rilasciata: si tratta dell'HTML 4.01 del 24 dicembre 1999. Anche se abbiamo detto che l'HTML si è evoluto in XHTML ci sono delle ottime ragioni per incominciare a studiare l'HTML e non l'XHTML:

• di fatto l'HTML verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web
• alcuni concetti dell'XHTML richiedono già una certa comprensione dei problemi che si acquisisce solo con l'esperienza. L'HTML è più immediato e consente di incominciare subito a produrre documenti web
• chi conosce l'XHTML non può non conoscere l'HTML. La conoscenza dell'HTML è infatti il prerequisito essenziale di ogni webmaster. Comunque le differenze tra i due linguaggi non sono così marcate e passare dall'uno all'altro non dovrebbe richiedere molta fatica. Per gli approfondimenti sulle differenze tra i vari linguaggi vi rimando tuttavia all'appendice di questa guida. Un'ultima avvertenza: in molte lezioni è presente una sezione denominata "approfondimenti". Chi inizia adesso a studiare HTML ed è alla sua prima lettura può tranquillamente ignorare quel paragrafo. Le indicazioni ivi contenute vi torneranno utili a una seconda lettura, o man mano che prendete confidenza con l'HTML e l'arte di sviluppare siti web.

2 Come è fatta una pagina HTML

2.1 Le estensioni dei File e le impostazioni del browser

Per iniziare a scrivere pagine web avete bisogno di:

• uno o più browser per visualizzare le pagine
• un editor testuale per scrivere il codice HTML (potete usare il blocco note di Windows, o altri editor testuali come Ultra Edit oppure Html Kit, che è gratuito.
• durante questo corso non utilizzeremo editor visuali: né FrontPage, né DreamWeaver, né GoLive, o altri. Su HTML.it troverete delle guide appositamente scritte per loro. L'estensione del file Aprite una pagina con il blocco note, e salvate il file in qualche cartella del vostro computer. Il file dovrà avere estensione "html", ad esempio mia Pagina.html. Fino a qualche tempo fa si era soliti attribuire ai file l'estensione htm , ma questo avveniva perché il dos e poi Windows 3.1 non erano in grado di gestire i file con nomi di grandezza superiore a 8 caratteri ed estensione superiore alle 3 lettere. Dunque .html era diventato .htm , così come .jpeg era diventato .jpg. Il problema delle estensioni è stato ampiamente superato sin dai tempi di Windows 95, e di conseguenza oggi il webmaster può decidere se attribuire ai files estensione .html o .htm. Siccome stiamo parlando di linguaggio HTML, personalmente preferisco l'estensione .html, ma è una questione di gusti (HTML.it, ad esempio, continua con il vecchio metodo). Se avete dato alla pagina l'estensione .html o .htm, il browser dovrebbe essere in grado di aprire il file in automatico cliccandoci su due volte. Per modificare la pagina utilizzate i comandi Visualizza > HTML , cambiate il codice, salvate, utilizzate il pulsante "aggiorna" del browser e dovreste visualizzare le modifiche. Se invece il file non è associato al browser, ma continua ad apparire come documento di testo, evidentemente questo avviene perché l'estensione non è .html, ma .html.txt , alcuni sistemi operativi hanno infatti la cattiva abitudine di nascondere l'estensione dei file (con il pretesto di rendere più usabile il sistema operativo stesso). Per visualizzare l'estensione del file in sistemi Windows andate in una cartella e quindi: Strumenti > Opzioni cartella > Visualizzazione

Annidamento e indentazione Una caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo. Ad esempio:

contenuto

contenuto

Potremmo quindi avere ad esempio:

testo

testo

L'annidamento ci permette quindi di attribuire formattazioni successive al testo che stiamo inserendo. Come si può vedere già nell'esempio, è una buona norma utilizzare dei **caratteri di tabulazione** (il tasto tab a sinistra della lettera Q) per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento. In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: non si tratta soltanto di un fattore visivo, ma l'allineamento di apertura e chiusura tag viene mantenuto anche se scorriamo in verticale il documento con il cursore. Questa procedura si chiama **indentazione** , e grazie ad essa il codice HTML risulta più leggibile. Si confronti ad esempio:

testo 1

testo 2

con:

testo

testo

per il browser i due esempi sono equivalenti, ma per l'utente umano è evidente che la differenza è notevole: pensate ad una pagina complessa visualizzata in un unico blocco di testo: sarebbe del tutto illeggibile!

2.3 I commenti

Un'altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi. La sintassi è la seguente:

e ci permette di "commentare" i vari punti della pagina. Ad esempio:

2.5 Struttura della Pagina

Basandoci sulle indicazioni precedenti, incominciamo a scrivere la nostra prima pagina html. Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del World Wide Web Consortium che riguardano il codice HTML:

esamineremo ulteriormente questa riga nell'appendice, per ora lasciamola così. Poi apriamo il nostro primo tag, che indica che quanto è compreso tra apertura e chiusura è in codice HTML:

... altri tag ...

Un documento HTML è normalmente diviso in due sezioni: Testa ( **** ) Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere -­‐ ad esempio -­‐ i meta-­‐tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera Corpo ( **** ) Qui è racchiuso il contenuto vero e proprio del documento Ci occuperemo in seguito della head (l'argomento verrà ripreso poi nella conclusione della guida. Per ora facciamo riferimento soltanto a due tag che devono essere presenti in questa sezione:

indica al browser che deve caricare il set di caratteri occidentale (e non -­‐ ad esempio -­‐ il set di caratteri giapponese).

Nome del sito Il title è il titolo della pagina e compare in alto sulla barra del browser (se guardate in alto a sinistra del browser noterete la scritta "Struttura della pagina"). È bene compilarlo da subito, onde evitare poi di avere pagine senza titolo. Da quanto abbiamo detto la nostra prima pagina sarà questa, che è consultabile anche nell'esempio allegato:

HTML.it

> Qui il nostro contenuto

D'ora in poi i vari tag che impareremo all'interno della guida andranno scritti all'interno del body, quando non sia indicato diversamente.

avvertirò che esistono altre soluzioni applicabili tramite i fogli di stile. Tuttavia in questo contesto non esamineremo i fogli di stile (detti anche CSS: "Cascading Style Sheets"), perché è un argomento che presuppone già la conoscenza del linguaggio HTML. Per questo vi rimandiamo all'apposita guida ai CSS di HTML.it, che se vorrete potrete consultare dopo aver letto la guida all'HTML.

3.2 Gli elementi HTML e i fogli di stile

Un altro concetto importante è che gli elementi vengono classificati nella trattazione a fogli di stile secondo tre tipologie: Elementi di blocco Sono sostanzialmente gli elementi che costituiscono un blocco attorno a sé, e che di conseguenza vanno a capo, come i paragrafi, le tabelle, le form. Elementi "inline" Sono gli elementi che -­‐ non andando a capo -­‐ possono essere integrati nel testo, come i collegamenti o le immagini Liste Lista numerate, o non numerate La guida che state leggendo, senza entrare minuziosamente in questa classificazione, ne tiene conto, in modo da rendere più agevole il passaggio da una formattazione inserita nel codice HTML, a una formattazione che utilizzi i fogli di stile. Infatti, man mano che comincerete a costruire siti web, sentirete l'esigenza di passare a una formattazione avanzata. Le due cose tuttavia non vanno sentite in contrapposizione: i fogli di stile sono semmai un arricchimento e un'espansione del codice HTML, viceversa non è possibile apprendere i fogli di stile senza conoscere il codice HTML.

4 Lo sfondo di un documento HTML

4. 1 Impostare il colore di sfondo

Incominciamo col vedere come ottenere la nostra prima pagina HTML nel modo in cui desideriamo visualizzarla. Se vogliamo impostare un colore di sfondo è necessario impostare il relativo attributo del tag body. Così:

bgcolor sta per "background color", cioè "colore di sfondo". Molti colori sono disponibili utilizzando le corrispondenti parole chiave in inglese. Qui potete trovare un esempio della pagina con lo sfondo blu Tuttavia non è consigliabile inserire la notazione del colore facendo riferimento a questo tipo di sintassi, dal momento che non possiamo sapere esattamente a quale tonalità di colore corrisponda il blu del computer dell’utente. È preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore, che ci permette – tra le altre cose – di scegliere anche tonalità di colore non standard. Con la notazione esadecimale il nostro esempio diventa:

Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti "dark" e "light", ad esempio: "darkblue", "lightblue"):