1 / 16

Un’introduzione a HTML (I)

Un’introduzione a HTML (I). Un’introduzione a HTML. I tag descrivono le caratteristiche grafiche di una pagina web Formattare con i tag: parole racchiuse tra parentesi angolari < > si usano a coppie (apertura e chiusura): <title> </title>

galen
Download Presentation

Un’introduzione a HTML (I)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Un’introduzione a HTML(I)

  2. Un’introduzione a HTML I tag descrivono le caratteristiche grafiche di una pagina web Formattare con i tag: parole racchiuse tra parentesi angolari < > si usano a coppie (apertura e chiusura): <title> </title> I tag non distinguono tra maiuscole e minuscole, ma il testo al’interno dei tag sì

  3. Tag per grassetto e corsivo Bold: <b> </b> Italic: <i> </i> La coppia di tag racchiude il testo da formattare Potete applicare più di un tipo di formattazione alla volta <b><i>Veni, Vidi, Vici!</i></b> produce:Veni, Vidi, Vici! L’ordine non ha importanza, ma i tag devono essere nidificati correttamente Alcuni tag non sono a coppie e non hanno una chiusura: <hr> riga orizzontale di separazione <br> interruzione di riga

  4. Una pagina HTML Inizia con <html> e finisce con </html> <html> <head> informazioni preliminari, come il titolo della pagina </head> <body> contenuto principale della pagina </body> </html>

  5. Strutturare i documenti un linguaggio di markup descrive la relazione tra le diverse parti di un documento Intestazioni: dal livello 1 per i titoli e le intestazioni più grandi, fino al livello 8 un’intestazione è visualizzata con un corpo più grande su una nuova riga <h1>Papa</h1><h2>Cardinale</h2><h3>Arcivescovo</h3> produce: Papa Cardinale Arcivescovo

  6. Il formato del codice HTML Nell’esempio precedente, codice HTML scritto su una sola riga è visualizzato su tre righe separate L’HTML dice al browser come produrre l’immagine formattata in base al significato dei tag, non dell’aspetto del codice sorgente Normalmente si cerca di scrivere l’HTML in una forma ben strutturata per renderne facile la comprensione e la manutenzione

  7. Spazio bianco Spazio inserito per facilitare la leggibilità spazi tabulazioni a capo Il browser trasforma ogni sequenza di spazi bianchi in un singolo carattere di spazio prima di cominciare l’elaborazione del codice HTML eccezione: l’informazione cosiddetta “preformattata”, ovvero inclusa nei tag <pre> e </pre> viene sempre visualizzata così come appare nel codice sorgente

  8. Caratteri speciali: il simbolo di escape Se la nostra pagina dovesse contenere una relazione matematica come 0 < p > r Il browser potrebbe interpretare < p > come un tag di paragrafo e potrebbe non visualizzare correttamente il testo Per indicare i simboli di maggiore e minore si utilizza il simbolo di escape, cioè la E commerciale o ampersand (&), seguito da un codice distinto e da un punto e virgola (;) &lt; compare sulla pagina come <

  9. Attributi dei tag in HTML L’allineamento richiede ulteriori informazioni Per giustificare un testo, dobbiamo specificare se desideriamo farlo a sinistra, a destra o centrato Gli attributi sono aggiunti all’interno delle parentesi angolari <p align = "center"> (di default la giustificazione è a sinistra) Attributi per la riga orizzontale: la larghezza e lo spessore possono essere specificati oppure lasciati con i valori di default <hr width = “50%“ size=4>

  10. Collegamenti e àncore (1) Un collegamento ipertestuale è costituito di due parti: Àncora (il testo che nel documento attuale è evidenziato) Riferimento ipertestuale (l’indirizzo dell’altra pagina web) Cominciate con <a seguito da uno spazio Specificate il riferimento ipertestuale con href="nome del file" Chiudete con </a>

  11. Collegamenti e àncore (2) • Esempio: <a href= http://www.unimi.it ”> Università degli Studi di Milano </a> Riferimento ipertestuale (hyperlink) àncora

  12. Àncore (cont.) Path assoluti: il riferimento a pagine su altri siti web è costituito da un URL Path relativi: riferimento alle pagine memorizzate localmente (se nella stessa directory basta solo il nome del file) i path relativi sono più flessibili — permettono di spostare un gruppo di file anche su un altro server i path relativi possono anche far riferimento a una cartella più in basso o in alto nella gerarchia delle directory

  13. La gerarchia delle directory è localizzata sul server web con indirizzo di dominio: www.bioz.com

  14. Path relativi ed assoluti: esempi • Path assoluto: http://www.bioz.com/bios/art/magritte.html Indirizzo simbolico di dominio o indirizzo IP Specifica di protocollo “cammino” verso il file • Path relativo (file corrente: magritte.html) • chagall.html • ../sci/russell.html • pictures/notpipe.html

More Related