IL LINGUAGGIO HTML (HyperText Markup Language) Le Liste puntate ? ? primo elemento secondo elemento ? primo elemento ? secondo elemento ? primo elemento ? secondo elemento lista puntata ? primo elemento ? secondo elemento ? secondo elemento <html> <head> <title>Pagina numero 1</title> </head> <body bgcolor="#008080" text="#FFFFFF" link="#FFFF00" vlink="#800080" alink="#FF0000"> <!-- sfondo verde; testo bianco; link gialli; link visitati viola; link attivi rossi --> <ul type="disk"> <li>primo elemento</li> <li>secondo elemento</li> </ul> <hr> <ul type="circle"> <li>primo elemento</li> <li>secondo elemento</li> </ul> <hr> <ul type="square"> <li>primo elemento</li> <li>secondo elemento</li> </ul> <hr> <ul> <lh> <p>lista puntata</lh> </p> <li type="disk">primo elemento</li> <li type="circle">secondo elemento</li> <li type="square">secondo elemento</li> </ul> <hr> </body> </html> Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 1/12 Le Liste numerate A. primo elemento B. secondo elemento -----------------------------------------------------------a. primo elemento b. secondo elemento -----------------------------------------------------------I. primo elemento II. secondo elemento -----------------------------------------------------------i. primo elemento ii. secondo elemento -----------------------------------------------------------1. primo elemento 2. secondo elemento -----------------------------------------------------------3. terzo elemento 4. quarto elemento <html> <head> <title>Pagina numero 2</title> </head> <body bgcolor="#008080" text="#FFFFFF" link="#FFFF00" vlink="#800080" alink="#FF0000"> <ol type="A"> <li>primo elemento</li> <li>secondo elemento</li> </ol> <ol type="a"> <li>primo elemento</li> <li>secondo elemento</li> </ol> <ol type="I"> <li>primo elemento</li> <li>secondo elemento</li> </ol> <ol type="i"> <li>primo elemento</li> <li>secondo elemento</li> </ol> <ol type="1"> <li>primo elemento</li> <li>secondo elemento</li> </ol> <hr> <ol type="1" start="3"> <li>terzo elemento</li> <li>quarto elemento</li> </ol> <hr> </body> </html> Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 2/12 Le Tabelle cella 1 cella 1 cella 1 cella 2 cella 3 cella 1 cella 2 cella 2 <html> <head> <title>Pagina numero 3</title> </head> <body bgcolor="#008080" text="#FFFFFF" link="#FFFF00" vlink="#800080" alink="#FF0000"> <table border="1" width="100%"> <tr> <td width="100%">cella 1</td> </tr> </table> <table border="5" width="30%"> <tr> <td width="30%">cella 1</td> </tr> </table> <div align="center"><center> <table border="5" width="300"> <tr> <td width="80" align="right">cella 1</td> <td width="80" align="center">cella 2</td> <td width="140" align="left">cella 3</td> </tr> </table> </center></div><div align="center"><center> <table border="5" width="200" align="center"> <tr> <td align="right" bordercolor="#FFFF00">cella 1</td> </tr> <tr> <td align="center" bgcolor="#FF0000">cella 2</td> </tr> <tr> <td align="left"><b>cella 2</b></td> </tr> </table> </center></div> </body> </html> Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 3/12 TABELLA A CELLE SEPARATE CELLA 1 CELLA 4 CELLA 7 CELLA 2 CELLA 5 CELLA 8 CELLA 3 CELLA 6 CELLA 9 TABELLA A CELLE UNITE CELLA 1 & 4 CELLA 7 CELLA 2 & 3 CELLA 5 CELLA 8 CELLA 6 & 9 <html> <head> <title>Pagina numero 4</title> </head> <body bgcolor="#FFFFFF" text="#400040" link="#FFFF00" vlink="#800080" alink="#FF0000"> <table border="1" width="100%"> <caption>TABELLA A CELLE SEPARATE</caption> <tr> <td width="33%" align="center"><strong><big><big>CELLA 1</big></big></strong></td> <td width="33%" align="center"><strong><big><big>CELLA 2</big></big></strong></td> <td width="34%" align="center"><strong><big><big>CELLA 3</big></big></strong></td> </tr> <tr> <td width="33%" align="center"><strong><big><big>CELLA 4</big></big></strong></td> <td width="33%" align="center"><strong><big><big>CELLA 5</big></big></strong></td> <td width="34%" align="center"><strong><big><big>CELLA 6</big></big></strong></td> </tr> <tr> <td width="33%" align="center"><strong><big><big>CELLA 7</big></big></strong></td> <td width="33%" align="center"><strong><big><big>CELLA 8</big></big></strong></td> <td width="34%" align="center"><strong><big><big>CELLA 9</big></big></strong></td> </tr> </table> <table border="1" width="100%"> <caption>TABELLA A CELLE UNITE</caption> <tr> <td width="33%" rowspan="2" align="center"><strong><big><big>CELLA 1 & 4</big></big></strong></td> <td width="67%" colspan="2" align="center"><strong><big><big>CELLA 2 & 3</big></big></strong></td> </tr> <tr> <td width="33%" align="center"><strong><big><big>CELLA 5</big></big></strong></td> <td width="34%" rowspan="2" align="center"><strong><big><big>CELLA 6 & 9</big></big></strong></td> </tr> <tr> <td width="33%" align="center"><strong><big><big>CELLA 7</big></big></strong></td> <td width="33%" align="center"><strong><big><big>CELLA 8</big></big></strong></td> </tr> </table> </body> </html> Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 4/12 I Link ( collegamenti) Indice delle pagine Link alla pagina n°1 Link alla pagina n°2 Link alla pagina n°3 Link alla pagina n°4 Link alla pagina n°5 <html> <head> <title>Indice delle pagine</title> </head> <body bgcolor="#FFFFFF" text="#400040" link="#FF0000" vlink="#800080" alink="#FF0000" background="sfondo.jpg"> <!-- sfondo bianco; testo nero; link gialli; link visitati viola; link attivi rossi --> <font COLOR="dark" SIZE="6" FACE="Arial"> <p align="left"><u><b>Indice delle pagine</b></u></p> <p>Link alla <a HREF="pagina1.htm">pagina n°1</a></p> <p>Link alla <a HREF="pagina2.htm">pagina n°2</a></p> <p>Link alla <a HREF="pagina3.htm">pagina n°3</a></p> <p>Link alla <a HREF="pagina4.htm">pagina n°4</a></p> <p>Link alla <a HREF="pagina5.htm">pagina n°5</a></p> </font> </body> </html> NB: le pagine [pagina1.htm …pagina5.htm] devono essere create ed inserite nella stessa directory del file che contiene i collegamenti. Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 5/12 Le immagini immagine allineata modalità TOP immagine allineata modalità MIDDLE immagine allineata modalità BOTTOM immagine con un collegamento attivo <html> <head> <title>Indice delle pagine</title> </head> <body bgcolor="#FFFFFF" text="#400040" link="#FF0000" vlink="#800080" alink="#FF0000" background="sfondo.jpg"> <!-- allineamento immagine top, middle, bottom --> <p>immagine allineata modalità TOP<img src="unitn.gif" width="92" height="95" alt="Logo uniTN" align="top"> </p> <p>immagine allineata modalità MIDDLE<img src="unitn.gif" width="200" height="95" alt="unitn.gif (6070 bytes)" align="middle"></p> <p>immagine allineata modalità BOTTOM<img src="unitn.gif" width="92" height="200" alt="unitn.gif (6070 bytes)" align="bottom"></p> <p><a href="Pagina5.htm"><img src="unitn.gif" width="92" height="95" alt="Logo uniTN" align="middle"></a> immagine con un collegamento attivo</p> </body> </html> Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 6/12 I form - moduli Nome: Maschio Femmina Anni: Residenza: ? Trento ? Rovereto ? Altro: Invia query Reset <HTML> <HEAD> <Title>Modulo di invio dati</Title> </HEAD> <BODY> <FORM method=post action="mailto:[email protected]"> <P>Nome: <input nome="nome" size="30"> <P><input name="sex" value="male" type=radio> Maschio <P><input name="sex" value="female" type=radio>Femmina <P>Anni: <input name="age" type=int> <P>Residenza: <UL PLAIN> <LI><input name="city" type=checkbox value="trento"> Trento <LI><input name="city" type=checkbox value="rovereto"> Rovereto <LI><input name="city" type=checkbox value="altro"> Altro: <textarea name="other" cols=12 rows=4> </textarea> </UL> <P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM> </BODY> </HTML> N.B. Funziona solo con Netscape Navigator Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 7/12 I Link ( collegamenti) tra frame diversi Suddivisione in FRAME della pagina HTML <html> <head> <title>Esempio Frame</title> </head> <frameset frameborder="0" cols="300,*"> <frame name="indice" src="indice.htm" border="0" noresize Scrolling="auto"> <frame name="principale" src="pag1.htm" border="0" norezise Scrolling="auto"> <noframes> <body> </body> </noframes> </frameset> </html> File che contiene i collegamenti: INDICE.HTM <html> <head> <title>Indice delle pagine</title> </head> <body bgcolor="#000080" text="#FFFFFF" link="#FF0000" vlink="#00FF00" alink="#FFFF00" background="sfondo.jpg"> <font COLOR="dark" SIZE="6" FACE="Arial"> <p align="left"></font><font COLOR="white" FACE="Arial" size="5"> <u><b>Indice delle pagine</b></u></p> <p>Link alla <a HREF="pag1.htm" Target="principale">pagina n°1</a></p> <p>Link alla <a HREF="pag2.htm" Target="principale">pagina n°2</a></p> <p>Link alla <a HREF="pag3.htm" Target="principale">pagina n°3</a></p> <p>Link alla <a HREF="pag4.htm" Target="principale">pagina n°4</a> </font> <font COLOR="dark" SIZE="6" FACE="Arial"></p> Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 8/12 </font> </body> </html> file PAG1.HTM <html> <head> <title>Pagina numero 1</title> </head> <body bgcolor="#C0C0C0" text="#FFFFFF" link="#FFFF00" vlink="#800080" alink="#FF0000"> <strong> <p><a name="inizio"></a></p> <h1 align="center">PAGINA N° 1</h1> </strong> <p><big><big>VAI ALLA FINE DELLA <a href="#fine">PAGINA</a></big></big></p> <br><br><br><br><br><br><br><br><br><br><br><br>br><br><br> <p><a name="fine"></a><big><big>VAI ALL'INIZIO DELLA <a href="#inizio">PAGINA</a></big></big></p> </body> </html> Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 9/12 Inserimento di codice VBScript - Esempio di navigazione tra pagine Suddivisione in FRAME della pagina HTML <html> <head> <title>Pulsanti di navigazione</title> </head> <frameset frameborder="0" rows="*,100"> <frame src="Pag1.htm" name="principale"> <frame src="navbar.htm" name="navigazione"> <noframes> <body> </body> </noframes> </frameset> </html> File: NAVBAR.HTM <html> <head> <title>Barra Navigazione Generale</title> </head> <body bgcolor="#FFFFFF" topmargin="0" leftmargin="0"> <script language="VBScript"> Sub avanti() if top.principale.prossima<>"nil" then top.principale.navigate top.principale.prossima end if end sub Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 10/12 Sub indietro() if top.principale.precedente<>"nil" then top.principale.navigate top.principale.precedente end if end sub </script> <p align="center"> <a target="principale" onmousedown=" top.navigazione.indietro()"> <img src="Btn_Indietro.jpg" alt="Indietro" width="60" height="60" align="middle"> </a> <big><strong>NAVIGAZIONE</strong></big> <a target="principale" onclick=" avanti()"> <img src="Btn_Avanti.jpg" alt="Avanti" width="60" height="60" align="middle"> </a> </p> </body> </html> Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 11/12 pagina PAG1.HTM <html> <head> <title>Pagina numero 1</title> </head> <body bgcolor="#C0C0C0" text="#FFFFFF" link="#FFFF00" vlink="#800080" alink="#FF0000"> <strong> <script language="VBScript"> dim precedente 'pagina precedente dim prossima 'pagina successiva Sub Window_onload() precedente="nil" prossima="pag2.htm" end sub </script> <h1 align="center">PAGINA N° 1</h1> </strong> </body> </html> lo script da inserire nelle altre pagine è il seguente File: PAG2.HTM File: PAG3.HTM File: PAG4.HTM <script language="VBScript"> dim precedente 'pagina precedente dim prossima 'pagina successiva <script language="VBScript"> dim precedente 'pagina precedente dim prossima 'pagina successiva <script language="VBScript"> dim precedente 'pagina precedente dim prossima 'pagina successiva Sub Window_onload() precedente="pag1.htm" prossima="pag3.htm" end sub Sub Window_onload() precedente="pag2.htm" prossima="pag4.htm" end sub Sub Window_onload() precedente="pag3.htm" prossima="nil" end sub </script> </script> </script> Corso di Fondamenti di Informatica I Dott. Roberti Pierluigi © 2001 3/10/2001 Anno Accademico 2001/2002 12/12
Scarica
