1- Tag Fondamentali

LINGUAGGIO HTML Tag fondamentali

Linguaggio HTML - Tag fondamentali Introduzione Tratto da Wikipedia http://it.wikipedia.org/wiki/Html: “HTML (acronimo per Hyper Text Mark-Up Language) è un linguaggio usato per descrivere i documenti ipertestuali disponibili nel Web. Tutti i siti web presenti su Internet sono costituiti da codice HTML, il codice che è letto ed elaborato dal browser, il quale genera la pagina come noi la vediamo. L'HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive il contenuto, testuale e non, di una pagina web. Punto HTML (.html) o punto HTM (.htm) è anche l'estensione comune dei documenti HTML.” In questo documento sono presentati, per completezza, anche elementi HTML deprecati. Questi sono segnalati alla fine del documento stesso, in un’apposita sezione.

Tag: html, head, title, meta, body Argomenti trattati Struttura di una pagina html Intestazione del documento Editor html testuali o Esempio 1: Creare una semplice pagina Web con un editor di testo Attributi del tag body o Esempio 2: Creare una pagina specificando il colore di sfondo e il colore del testo o Esempio 3: Creare una pagina specificando una immagine di sfondo Pathname di file Elementi deprecati

Struttura di una pagina html Una pagina html è costituita da semplice testo combinato con direttive di formattazione dette tag. I tag sono racchiusi tra parentesi angolari (i simboli di minore “<” e maggiore “>”). Convenzionalmente, in questo documento, i tag saranno di colore blu scuro, per distinguerli dal testo normale. Osservate la figura seguente, che mostra la struttura di una pagina html. INTESTAZIONE DEL DOCUMENTO CORPO DEL DOCUMENTO

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

1

LINGUAGGIO HTML Tag fondamentali Una pagina html deve obbligatoriamente contenere i tag html, head e body. − Il tag html racchiude tutto il documento. − Il tag head contiene l’intestazione del documento. − Il tag body contiene il corpo del documento. Una osservazione, prima di procedere: I tag html, head e body sono “tag doppi”, nel senso che si usano in coppia. Il tag di chiusura differisce dal tag di apertura solo per uno slash “/” iniziale. Nel seguito vedremo che esistono anche tag singoli, privi del tag di chiusura.

Intestazione del documento La sezione che rappresenta l’intestazione del documento, può contenere il titolo della pagina (informazione fortemente consigliata) e altre informazioni opzionali, dette meta-informazioni, quali l’autore del documento, l’editor utilizzato per scriverlo e così via. <meta name = "keywords" content = " parola 1, parola 2, ……, parola n "> <meta name = "description" content = " descrizione "> <meta name = "GENERATOR" content = " nome dell’editor "> <meta name = "author" content = "Nome e Cognome dell’autore"> Altre meta-informazioni sono: <meta http-equiv = "refresh" content = " x secondi"> Ricarica la pagina ogni x secondi. <meta http-equiv = "refresh" content = " x secondi; url = http://…// nome_file.html "> Dopo x secondi ricarica la pagina specificata. <meta http-equiv = "refresh" content = " data"> Ricarica la pagina dopo la data indicata. Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

2

LINGUAGGIO HTML Tag fondamentali <meta name = "ROBOTS" content = " NOINDEX"> Se la pagina non deve essere indicizzata nei Motori di ricerca. Osservazione I tag html possono contenere degli attributi. Un attributo ha sempre la forma nome_attributo = “valore_attributo” Convenzionalmente, in questo documento, i nomi degli attributi saranno rappresentati in arancione. Inoltre, quando il valore di un attributo non è completamente specificato o è generico (perché, per esempio si sta proponendo un esempio) viene rappresentato in corsivo.

Editor html testuali Esistono molti strumenti per creare pagine html, tuttavia è sufficiente anche un editor di testo come Blocco Note di Windows. Vi rimando al sito HTML.it http://download.html.it/categorie/start/114/windows/editor-html-testuali/ dove potete trovare numerosi editor testuali freeware e shareware da scaricare. Io ve ne consiglio tre: − Editplus http://download.html.it/software/vedi/1595/editplus/ − Notepad++ http://download.html.it/software/vedi/1871/notepad/ − Textpad http://download.html.it/software/vedi/2219/textpad/ Scegliete quello che vi aggrada maggiormente. Dopo aver installato l’editor testuale, potete provare a copiare il codice dell’esempio1 e a visualizzare la pagina creata.

Esempio 1: Creare una semplice pagina Web con un editor di testo Documento creato con TextPad 4.4.0. esempio1.html <meta name="description" content="Esempio di codice html"> <meta name="GENERATOR" content="TextPad 4.4.0"> <meta name="author" content="Bocchi Cinzia"> Primo esempio di pagina Web.

Copiate questo codice e salvate il documento con estensione .html. Il documento salvato sarà rappresentato con un’icona che dipenderà dal browser di default. Fate doppio clic sull’icona per aprire il documento: vedrete la vostra prima pagina html.

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

3

LINGUAGGIO HTML Tag fondamentali

Attributi del tag body Il tag body può specificare i seguenti attributi: - bgcolor, per impostare il colore di sfondo del documento; - background, per impostare un’immagine come sfondo del documento; - text, per impostare il colore del testo del documento; - link, per impostare il colore dei link non visitati; - alink, per impostare il colore dei link attivi; - vlink, per impostare il colore dei link visitati. •

Impostazione del colore di sfondo

Il colore può essere espresso in lingua inglese o in cifre esadecimali, in accordo con la seguente tabella: Nome del colore Codice esadecimale RGB (in inglese) aqua 00FFFF black 000000 blue 0000FF fuchsia FF00FF gray 808080 green 008000 lime 00FF00 maroon 800000 navy 000080 olive 808000 purple 800080 red FF0000 silver C0C0C0 teal 008080 white FFFFFF yellow FFFF00 se si utilizza il codice esadecimale occorre anteporre ad esso il simbolo cancelletto (#). Per esempio: oppure

•

Impostazione dello sfondo a una immagine

Il file deve contenere un’immagine in formato GIF o JPEG. Se si desidera che l’immagine di sfondo non scorra con la pagina, si può utilizzare l’attributo bgproperties, nel modo seguente: •

Impostazione del colore del testo

•

Impostazione del colore dei collegamenti ipertestuali

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

4

LINGUAGGIO HTML Tag fondamentali

Esempio 2: Creare una pagina specificando il colore di sfondo e il colore del testo esempio2.html <meta name="description" content="Esempio di codice html"> <meta name="GENERATOR" content="TextPad 4.4.0"> <meta name="author" content="Bocchi Cinzia"> Secondo esempio di pagina Web.

Esempio 3: Creare una pagina specificando una immagine di sfondo Esempio3.html <meta name="description" content="Esempio di codice html"> <meta name="GENERATOR" content="TextPad 4.4.0"> <meta name="author" content="Bocchi Cinzia"> Terzo esempio di pagina Web.

Pathname di file Analizziamo il percorso del file specificato in



Il file contenente l’immagine si trova nella cartella Immagini mentre il file html si trova nella cartella Codice. Le due cartelle sono contenute, a loro volta, in una cartella di livello superiore di nome Lezione 1. Lezione 1

Codice

Immagini

esempio3.html

BACKGRND.GIF

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

5

1- Tag fondamentali.doc

LINGUAGGIO HTML Tag fondamentali Quando inseriamo il collegamento all’immagine nel file Esempio3.html, dobbiamo specificare anche il percorso per arrivare a tale file. Il percorso è: ..\Immagini\BACKGRND.GIF

− I due punti iniziali indicano la cartella superiore rispetto a quella nella quale si trova il file esempio3.html, cioè Lezione1. − Immagini è la cartella che contiene l’immagine di sfondo. − BACKGRND.GIF è il nome del file contenente l’immagine. Tutti gli elementi del percorso (detto anche pathname) sono separati da un backslash “\” perché stiamo operando in ambiente Windows. In altri ambienti unix-like come Linux, si usa lo slash “/” per separare gli elementi di un pathname. Un pathname può essere: − assoluto se il percorso inizia dalla radice (es. l’unità C in Windows) − relativo se il percorso inizia dalla cartella nella quale ci troviamo ad operare attualmente. Il pathname dell’esempio è relativo.

Elementi deprecati (specifica HTML 4.01 del W3C) Tutti gli attributi del tag body bgcolor background link alink vlink Vedremo in seguito come sia possible impostare tali proprietà del documento con i fogli di stile (CSS).

Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale 2.5 Italia. Per leggere una copia della licenza visita il sito web http://creativecommons.org/licenses/by-nc/2.5/it/ o spedisci una lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

6