Introduzione HTML Maurizio Palesi Multimedialità - Maurizio Palesi 1
Generalità sull HTML HTML: HyperText Markup Language (linguaggio di marcatura ipertestuale) E il linguaggio che permette di descrivere una pagina web Marcatori (tag) consentono di organizzare le informazioni all interno della pagina Titolo, sfondo, colori, link, tabelle, immagini, liste, elenchi, ecc. Multimedialità - Maurizio Palesi 2
Formato Marcatori (tag) <marcatore>testo cui si riferisce il marcatore</marcatore> Per esempio B è il marcatore che indica il grassetto (bold) quindi: <B>Ciao mondo!</b> Ciao mondo! Sarà visualizzato in grassetto: Ciao mondo! Multimedialità - Maurizio Palesi 3
Struttura di un Documento HTML <html> <head>... qui l'intestazione del documento da impaginare... </head> <body>... qui il contenuto del documento </body> </html> Multimedialità - Maurizio Palesi 4
Struttura di un Documento HTML <html> <head> <title>la prima pagina Web di Mario Rossi</title> </head> <body> <h1 align="center">home page di Mario Rossi</h1> <p>questa è la mia prima pagina in HTML.</p> </body> </html> Multimedialità - Maurizio Palesi 5
Titoli <html> <head> <title>la prima pagina Web di Mario Rossi</title> </head> <body> <h1 align="center">home page di Mario Rossi</h1> <p>questa è la mia prima pagina in HTML.</p> <h1>intestazione di primo livello</h1> <h2>intestazione di secondo livello</h2> <h3>intestazione di terzo livello</h3> <h4>intestazione di quarto livello</h4> <h5>intestazione di quinto livello</h5> <h6>intestazione di sesto livello</h6> </body> </html> Multimedialità - Maurizio Palesi 6
Paragrafi <p>questa riga</p><p>appare spezzata.</p> <p>quest'altra riga, invece, appare scritta tutta di seguito nonostante gli a capo.</p> Questa riga appare spezzata. Quest'altra riga, invece, appare scritta tutta di seguito nonostante gli a capo. Multimedialità - Maurizio Palesi 7
Liste <ul> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> </ul> <ol> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> </ol> Prima voce Seconda voce Terza voce 1. Prima voce 2. Seconda voce 3. Terza voce Multimedialità - Maurizio Palesi 8
Stili Logici <strong> </strong> Testo molto rilevante (viene di norma reso in grassetto) <em> </em> Testo enfatizzato (viene reso di norma in corsivo) <cite> </cite> Testo citato (viene reso di norma in corsivo) <address> </address> Indirizzo (viene reso in corsivo o in grassetto con un carattere piccolo e allineato a sinistra) Multimedialità - Maurizio Palesi 9
Stili Fisici <b> </b> Bold (grassetto) <i> </i> Italic (corsivo) <u> </u> Underlined (sottolineato) <address> </address> <big> </big> Carattere grande <small> </small> Carattere piccolo Multimedialità - Maurizio Palesi 10
Gli Attributi di Body background="file-grafico" permette di indicare un file grafico (in formato GIF o Jpeg) che viene inserito sullo sfondo della pagina; se l'immagine è più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie come mattonelle su una parete bgcolor="#colore RGB" permette di assegnare un colore allo sfondo text="#colore RGB" indica il colore del testo all'interno della pagina link="#colore RGB" indica il colore dei link vlink="#colore RGB" indica il colore dei link già seguiti alink="#colore RGB" indica il colore dei link mentre si attivano con il mouse Ad esempio: <body bgcolor="#ffffff" text="#990000" link="00ff00" vlink="#00aa00" alink="#ffff00"> Multimedialità - Maurizio Palesi 11
Dimensionamento dei Caratteri <font size="n">testo</font> Dove 'n' è un numero che va da 1 a 7, ad es.: <font size="4">testo</font>. La dimensione normale del font è 3. Dunque se si usano gli indici 1 o 2 si ottiene un font ridotto rispetto al testo normale, mentre con 4, 5, 6 e 7 si ottiene un font ingrandito. Per esprimere la dimensione del font in termini relativi si usa la seguente marcatura: <font size="+/- n">testo</font> In questo caso n può variare da -2 a +4. Miscelando queste varie direttive è possibile ottenere effetti come questo: <font size="+4">c</font><font size="+3">i</font><font size="- 1">A</font><font size="+2">o</font> CIAO Multimedialità - Maurizio Palesi 12
Incorporare le Immagini <img src= file-grafico > <img src= tigre.gif > <img src="http://www.e-text.it/immagini/tigre.gif"> <img src="immagini/natura/felini/tigre.gif"> <img src="../../../immagini/tigre.gif"> Multimedialità - Maurizio Palesi 13
Attributi di img width="n n%" e height="n n%" Per indicare le dimensioni in pixel dell'immagine <img src="tigre.gif" width="296" height="181"> alt="descrizione" Per inserire una descrizione dell'immagine (es.: <img src="tigre.gif" alt="una tigre">). Tale descrizione viene visualizzata dai browser mentre l'immagine viene prelevata Si sostituisce alle immagini se il browser ne ha disabilitato il prelievo automatico Appare sullo schermo ogni qualvolta il puntatore del mouse si porta sull'immagine Multimedialità - Maurizio Palesi 14
Link <a href="url del documento di destinazione">testo attivo</a> La 'a' del tag sta per anchor, e l'attributo 'href' sta per 'riferimento ipertestuale', e contiene la URL completa del documento di destinazione. <a href="mario.htm">testo cliccabile</a> Il file 'mario.htm' si trova nella stessa directory nella quale è memorizzato il file che contiene il link <a href="biografia/mario.htm">testo cliccabile</a> Il file 'mario.htm' si trova in una sub-directory ('biografia' nel nostro caso) <a href="../mario.htm">testo cliccabile</a> Il file 'mario.htm' si trova nella directory superiore rispetto a quella che contiene il link <a href="../biografia/mario.htm">testo cliccabile</a> Il file 'mario.htm' si trova in una directory che è gerarchicamente allo stesso livello di quella che contiene il link Multimedialità - Maurizio Palesi 15
Web Editor Sebbene un documento HTML possa essere editato con un semplice editor di testo, usare degli strumenti più specifici permette spesso un notevole risparmio di tempo e fatica. Tre categorie di editor HTML Editor di documenti orientati al codice Editor di documenti WYSIWYG ('What You See Is What You Get', cioè 'ciò che vedi è ciò che ottieni') Ed editor di siti Multimedialità - Maurizio Palesi 16