……………………………… ………………………………...

12
Il linguaggio HTML Il linguaggio HTML I documenti HTML vanno racchiusi I documenti HTML vanno racchiusi dentro una coppia di TAG dentro una coppia di TAG (marcatori): apertura e chiusura. (marcatori): apertura e chiusura. <html> ……………………………… ……………………………… …………………………… ………………. </html>

description

Il linguaggio HTML I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura. ……………………………… ……………………………… …………………………… ………………. . I tag devono essere racchiusi dentro parentesi acute Il tag di chiusura è preceduto da uno slash / . - PowerPoint PPT Presentation

Transcript of ……………………………… ………………………………...

Page 1: ……………………………… ……………………………… …………………………… ……………….

Il linguaggio HTMLIl linguaggio HTMLI documenti HTML vanno racchiusi dentro una I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura.coppia di TAG (marcatori): apertura e chiusura.

<html>

………………………………

………………………………

……………………………

……………….

</html>

Page 2: ……………………………… ……………………………… …………………………… ……………….

I tag devono essere racchiusi dentro I tag devono essere racchiusi dentro parentesi acute parentesi acute <tag><tag>

Il tag di chiusura è preceduto da uno slash /Il tag di chiusura è preceduto da uno slash / </tag></tag>

Page 3: ……………………………… ……………………………… …………………………… ……………….

Il documento è diviso in due sezioni :Il documento è diviso in due sezioni : 1. intestazione (head) 1. intestazione (head) 2. corpo del documento (body) 2. corpo del documento (body)

<html><html> <head> <head>

………….. ………….. </head> </head>

<body> <body> ……….. ……….. </body> </body></html></html>

Page 4: ……………………………… ……………………………… …………………………… ……………….

Il titolo (Il titolo (titletitle) del documento appare solo nella ) del documento appare solo nella barra superiore della finestra del BROWSER. barra superiore della finestra del BROWSER. Non viene visualizzato nella pagina web. Non viene visualizzato nella pagina web.

<html><html> <head><head> <title>. . . . . . . . . . . </title><title>. . . . . . . . . . . </title> </head></head> <body><body> ………… ………… <body><body> <html><html>

Page 5: ……………………………… ……………………………… …………………………… ……………….

I tag <h1>. . . <h6> e </h1> . . . </h6> indicano la I tag <h1>. . . <h6> e </h1> . . . </h6> indicano la dimensione del carattere di scrittura. dimensione del carattere di scrittura. h1 è la dimensione massima, h6 è la minima.h1 è la dimensione massima, h6 è la minima.

. . . . . . . . . . . . . .. . . . . . . . . . . . . .

. . . . . . . . . . . . . .. . . . . . . . . . . . . . <body><body>

<h3>Home page personale</h3><h3>Home page personale</h3> </body></body><html><html>

Page 6: ……………………………… ……………………………… …………………………… ……………….

I tag di allineamento (align) dispongono la stringa al I tag di allineamento (align) dispongono la stringa al centro, a sinistra o a destra della riga:centro, a sinistra o a destra della riga:

align=centeralign=centeralign=leftalign=left

align=rightalign=right

. . . . . . . . .. . . . . . . . .

. . . . . . . . .. . . . . . . . . <body><body> <h3 align=“center”>Home page personale</h3><h3 align=“center”>Home page personale</h3> </body></body></html></html>

Page 7: ……………………………… ……………………………… …………………………… ……………….

<center> e </center> dispongono il testo a <center> e </center> dispongono il testo a centro pagina:centro pagina:

. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . .. . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . <body><body> <center><center> <h1>Messaggio pubblicitario</h1><h1>Messaggio pubblicitario</h1> </center></center> </body></body></html></html>

Page 8: ……………………………… ……………………………… …………………………… ……………….

Definita la struttura del documento html , Definita la struttura del documento html , analizziamo brevemente altri tag utili:analizziamo brevemente altri tag utili:

<br> porta a capo la successiva riga di testo<br> porta a capo la successiva riga di testo<p> lascia una riga vuota<p> lascia una riga vuota<hr> traccia una linea orizzontale<hr> traccia una linea orizzontale<b> e </b> danno la stringa in grassetto<b> e </b> danno la stringa in grassetto<i> e </i> danno la stringa in corsivo<i> e </i> danno la stringa in corsivo<blink> e </blink> per il testo lampeggiante<blink> e </blink> per il testo lampeggiante

Page 9: ……………………………… ……………………………… …………………………… ……………….

Per inserire immagini nella pagina:Per inserire immagini nella pagina:<img src=“C:/documenti/foto.gif”> <img src=“C:/documenti/foto.gif”> (( inserisce nella pagina il file grafico foto.gif inserisce nella pagina il file grafico foto.gif memorizzato nella cartella documenti )memorizzato nella cartella documenti )

<img src=“foto.gif”width=“200 height=“150”><img src=“foto.gif”width=“200 height=“150”>( indica in PIXEL la larghezza e l’altezza ( indica in PIXEL la larghezza e l’altezza dell’immagine )dell’immagine )

N.B. l’HTML supporta i formati immagine N.B. l’HTML supporta i formati immagine gifgif e e jpgjpg

Page 10: ……………………………… ……………………………… …………………………… ……………….

COLLEGAMENTI (LINK) IPERTESTUALICOLLEGAMENTI (LINK) IPERTESTUALI

<a href=“pagina2.htm”>vai a pagina 2</a><a href=“pagina2.htm”>vai a pagina 2</a>(salta,col clic del mouse, al file pagina2.htm salvato nella stessa (salta,col clic del mouse, al file pagina2.htm salvato nella stessa cartella della pagina web.Se il file pagina2.htm trovasi in altra cartella della pagina web.Se il file pagina2.htm trovasi in altra

cartella, specificare il percorso esatto.cartella, specificare il percorso esatto.

N.B.N.B. Ci si può collegare anche al file Ci si può collegare anche al file gif , jpg , wav , midgif , jpg , wav , mid ecc… ecc…

Page 11: ……………………………… ……………………………… …………………………… ……………….

LISTE O ELENCHI PUNTATILISTE O ELENCHI PUNTATI

<ul><ul> <li>mele</li> <li>mele</li><li>pere</li><li>pere</li><li>noci</li><li>noci</li></ul></ul> …visualizza: …visualizza: . mele. mele . pere . pere . noci . noci

Page 12: ……………………………… ……………………………… …………………………… ……………….

LISTE O ELENCHI NUMERATILISTE O ELENCHI NUMERATI

<<ol>ol><li>mele</li><li>mele</li><li>pere</li><li>pere</li><li>noci</li><li>noci</li></ol></ol> …visualizza:…visualizza: 1. mele 1. mele

2. pere 2. pere 3. noci 3. nociricordati di salvare i files in formato “solo testo” .htmricordati di salvare i files in formato “solo testo” .htm . . . ed ora buon lavoro. . . ed ora buon lavoro