Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
BODY PowerPoint Presentation

BODY

114 Views Download Presentation
Download Presentation

BODY

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. BODY A CAPO Sintassi: <br>(a capo) oppure <hr attributi> (a capo con una linea) attributi:noshade sfuma la linea "size" l’altezza in pixel, "width" larghezza in pixel ESEMPIO <br> <hr noshade size="5" width="50%" > 2

  2. BODY Font family 3

  3. BODY GLI ELENCHI • Elenchi ordinati • Elenchi non ordinati • Elenchi di definizioni Sintassi <elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento ………. …… </elenco> 4

  4. BODY GLI ELENCHI Elenchi ordinati Sintassi <ol> <li>nome del primo elemento <li>nome del secondo elemento ………. …… </ol> ol= order list li=list item Esempio <ol> <li> primo elemento <li>secondo elemento <li>terzo elemento </ol> Testo fuori lista 5

  5. BODY GLI ELENCHI Elenchi ordinati Sintassi <ol type=“attributo”> <li>nome del primo elemento <li>nome del secondo </ol> ol= order list li=list item Attributo:1=numeri arabi; a=alfabeto minuscolo; A=alfabeto maiuscolo; i=romani minuscoli; I=romani maiuscoli Esempio <ol type=“a”> <li> primo elemento <li>secondo elemento <li>terzo elemento </ol> Testo fuori lista 6

  6. BODY GLI ELENCHI Elenchi non ordinati Sintassi <ul>type=“attributo”> <li>nome del primo elemento <li>nome del secondo </ul> ul= unorder list li=list item Attributo:disc=pallino pieno; circle=pallino vuoto; square=quadrato pieno; Esempio <ul type=“circle”> <li> primo elemento <li>secondo elemento <li>terzo elemento </ul> Testo fuori lista 7

  7. BODY GLI ELENCHI Elenchi di definizioni Sintassi <dl>> <attr>nome del primo elemento <attr>nome del secondo </dl> dl= definition list Attributo: dt=senza rientro; dd= con rientro; Esempio <dl> <dd>nome del primo elemento <dd>nome del secondo </dl> 8

  8. Ipertesti I LINK I link sono "il ponte" che consente di passare da un testo all’altro • Sono formati da: • la risorsa verso cui il collegamento punta • contenuto che "nasconde“ il collegamento (non importa se si tratta di testo, di immagine o di files) Sintassi: <a href=“risorsa">contenuto</a> ESEMPIO <a href=“www.cataniaedintorni.it">notizie su Catania e non solo</a> Nota bene Per motivi di sicurezza non è possibile eseguire un file ".exe" direttamente dal web; l’utente dovrà sempre prima scaricarlo sul proprio PC. 9

  9. Ipertesti I LINK Nota bene E’ opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo all’interno di un contesto omogeneo. Per creare collegamenti verso i documenti più reconditi, destreggiandoci tra le strutture più ramificateesistono due tecniche: indicare un percorso assoluto Viene utilizzato per far riferimento ad un percorso certo(se si è già in possesso di un proprio sito) http://www.itcdefelice.it/corsi/programmatori/materie.html indicare un percorso relativo Viene utilizzato per far riferimento ad un percorso ancora da definire(se non si è già in possesso di un proprio sito) 10

  10. Ipertesti UN TITOLO AI LINK L’attributo title è molto importante, e serve per descrivere l’elemento a cui fa riferimento il link. Sintassi: <a title=“commento" href=URL" > testo</a> Nota bene L’attributo title è molto importante per descrivere l’elemento a cui fa riferimento il link ed è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto. 11

  11. Href Ipertesti • Per far riferimento a un file che si trovi all’interno della stessa directory basta linkare il nome del file • <a href="paginaDaLinkare.html">pagina</a> • Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, nominare la cartella seguita dallo "slash", e poi il nome del file.<a href="prima/interna/interna.html">pagina interna</a> • Per tornare su di un livello, è sufficiente utilizzare la notazione • <a href="../../index.html">pagina interna</a> 12

  12. ancore • Link interni alla stessa pagina • Ci permettono di scorrere la pagina fra un punto e un altro sfruttando il meccanismo ad indice • Sono costituiti da due parti: • RISORSA CHE PUNTA • <a href="#primo">Primo paragrafo</a> • RISORSA PUNTATA • <a name="primo"><h3>Primo paragrafo</h3></a> 13

  13. Vediamo un esempio E poi costruimao un esempio di due pagine collegate fra loro e che sfruttino le ancore.

  14. Img

  15. Inutile provare dunque a inserire un file ".psd" (formato nativo di Photoshop) all'interno della vostra pagina HTML: con grande probabilità il browser non caricherà il file (dovete infatti prima convertire il file in uno dei formati sopra-indicati). È importante ricordare che il codice HTML fornisce delle indicazioni al browser su come visualizzare il testo e le immagini - ed eventualmente i video e i suoni - all'interno della pagina: il testo (come abbiamo visto) è scritto direttamente nel file HTML, le immagini invece sono caricate insieme alla pagina.

  16. <img src="logo.gif" alt=” logo” width="224" height="69" />

  17. Immagini con link <a href="http://www.sito.it" target="_blank"> <img src="logo.gif" border="0" width="224" height="69" /></a>