MODELLO

Transcript

1 1 MONNI MATHILDA HTML I tag sono annidati. Non leggere gli ACapo Il primo che si apre è l ultimo ad essere chiuso. Pagina principale o index.html Programmazione client - server o il computer richiede le pagine web al server Programmazione desktop o programma presente sul computer Spyder o cercano nuove pagine su internet (software) Attributi o nome = valore Ascii o 1 byte per ogni carattere (0 255 caratteri) Tabella unicode o 2 byte per ogni carattere (circa caratteri), i primi 127 corrispondono a quella ascii. Courier o Carattere mono spaziale -> stesso spazio occupato per ogni lettera. UTF 8 o via intermediara tra ascii e unicode. Salva su 1 byte tutti i caratteri normali (ascii base) mentre tutti i caratteri speciali vengono salvati su 2 byte. o Occupa meno spazio della tabella unicode. WEB SERVER = DISTRIBUISCE PAGINE WEB (SOFTWARE) o APACHE o IIS (INTERNET INFORMATION SERVER) -> MICROSOFT o NOD o TOMCAT (JAVA)

2 2 MODELLO <title>modello</title>  <h1>modello</h1>  PAGINA WEB

3 3 ESERCIZIO 01 <title>es 01</title>  <h1>questo è un tag h1</h1>  <h2>questo è un tag h2</h2> <h3>questo è un tag h3</h3> <h4>questo è un tag h4</h4>  <h5>questo è un tag h5</h5> <h6>questo è un tag h6</h6> Questo è un testo scritto senza tag  <p>questo è un testo scritto dentro un paragrafo</p>  <p align="center">questo è un testo scritto dentro un paragrafo</p>  <font size="7" color="red" face="courier"><p> Questo è un altro paragrafo</p></font>  <p>questo è un paragrafo in <font size="6"><b>grassetto</b></font></p>  <p>questo è un paragrafo in <font size="6"><i>italico</i></font></p>  <p>questo è un paragrafo <font size="6"><u>sottolineato</u></font></p>  <p>questo è un paragrafo in <font size="6"><strike>barrato</strike></font></p>  <p>questo è un testo <tt>teletype</tt></p> <p>questo è un <sup>apice</sup></p> <p>questo è un <sub>pedice</sub></p> <p>questo è un testo a <blockquote>margini rintrati</blockquote></p> <p>questo consente di andare <br>a capo<br/></p> <p>questo inserisce una riga <hr size="20"><hr/></p>

4 4 PAGINA WEB

5 5 ESERCIZIO 02 <title>es 02</title>  <h1>elenchi PUNTATI</h1>  <blockquote>  <ul type="square"> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> <li>quarta voce</li> </ul> </blockquote> <h1>elenchi NUMERATO</h1>  <blockquote>  <ol type="i"> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> <li>quarta voce</li> </ol> </blockquote> pagina--> <h1>elenco ANNIDATO (REGIONI/PROVINCE)</h1>  <ol> <li> Piemonte <ul type="square"> <li>cuneo</li> <li>torino</li> <li>alessandria</li> <li>biella</li> <li>vercelli</li> </ul> </li> <li> Lombardia </li> <ul type="square"> <li>milano</li> <li>como</li> <li>bergamo</li>

6 6 <li> Lazio </li> </ul> <li>mantova</li> <li>lecco</li> <ul type="square"> <li>roma</li> <li>viterbo</li> </ul> <li> Sardegna <ul type="square"> <li>cagliari</li> <li>nuoro</li> </ul> </li> </ol> </blockquote> <h1>definition List (AUTORE,TITOLO,PREZZO,CASA EDITRICE)</h1> <p>ogni voce è caratterizzata da un titolo e una descrizione</p> <blockquote> <dl> <dt>autore</dt> <dd>pirandello</dd> <dt>titolo</dt> <dd>il fu Mattia Pascal</dd> <dt>prezzo</dt> <dd>8,5 </dd> <dt>casa editrice</dt> <dd>mondadori</dd> </dl> </blockquote>

7 7 PAGINA WEB

8 8 ESERCIZIO 03 PAGINA INDEX <title>es 03</title>  <h1>collegamenti IPERTESTUALI</h1>  <a href="html e CSS.pdf" target="_blank" title="apri pdf">html e CSS</a> <br></br> <a href="pagina2.html" title="pagina 2">Vai a pagina 2</a> <br><br/> <a href="pagine/pagina3.html" title="pagina 3">Vai a pagina 3</a> <br></br> <a href=" target="_blank" title="vai a vallauri.edu">vai a Vallauri.edu</a> <h1>ancora</h1> <a href="#cap2" title="vai a Cap2">Vai a Cap2</a>  <h1>capitolo 1</h1>  <h1 id="cap2">capitolo 2</h1>  <br></br> <a href="#">torna su</a> PAGINA 2 <title>es 03</title>  <h1>questa E' LA SECONDA PAGINA</h1>  <a href="index.html" title="ritorno alla home page">home</a>

9 9 PAGINA 3 <title>es 03</title>  <h1>questa E' LA TERZA PAGINA</h1>  <a href="../index.html" title="ritorno alla home page">home</a> PAGINA WEB INDEX PAGINA WEB 2 PAGINA WEB 3

10 10 ESERCIZIO 04 <title>es 04</title>  <body align="center"> <h1>visualizzatore DI IMMAGINI</h1>  <a href="img/desert.jpg" target="_blank" title="deserto"><img src="img/_desert.jpg"/></a>  <a href="img/koala.jpg"" target="_blank" title="koala"><img src="img/_koala.jpg"/></a> <a href="img/tulips.jpg" target="_blank" title="tulipani"><img src="img/_tulips.jpg"/></a> <br></br> <a href="img/jellyfish.jpg" target="_blank" title="medusa"><img src="img/_jellyfish.jpg"/></a> <a href="img/hydrangeas.jpg" target="_blank" title="fiore"><img src="img/_hydrangeas.jpg"/></a> PAGINA WEB

11 11 ESERCIZIO 05 <title>es 05</title>  <h1>allineamento IMMAGINI</h1>  <p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula tellus eu ipsum varius, eu efficitur nisi fringilla. Morbi in turpis eu ligula elementum tempus non sed mauris. Sed sodales dui neque, in vehicula lectus fringilla id. Vestibulum cursus nibh eu elementum vulputate. Vestibulum condimentum, arcu vel lacinia sagittis, lorem arcu vestibulum nisl, in finibus elit erat sed odio. Pellentesque efficitur est et libero viverra, tristique interdum metus dignissim. Mauris id enim vel felis ultricies fermentum. Maecenas eu nulla vel ipsum ultricies consequat gravida eu quam. Integer commodo in erat id dapibus. <img src="img/_koala.jpg" title="questa è l'immagine di un koala" alt="non riesco a caricare l'immagine" hspace="10" vspace="10" align="left"> Duis sagittis lectus eu leo volutpat, in aliquet turpis fringilla. Etiam dapibus volutpat eros, in congue orci molestie quis. Vestibulum nisl mauris, accumsan vel volutpat sed, accumsan lobortis orci. Nulla non purus fringilla, eleifend lacus nec, commodo diam. Aenean congue tincidunt quam non facilisis. Nullam auctor nunc ipsum, sit amet blandit magna feugiat ut. Suspendisse viverra nunc eget mi cursus, sed finibus velit fringilla. Phasellus erat nisi, blandit eu porta quis, interdum faucibus purus. Curabitur ac nunc vulputate, posuere odio non, porta nisl. Sed non enim non erat tempor suscipit. </p> <br clear="left"><br/>  <p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula tellus eu ipsum varius, eu efficitur nisi fringilla. Morbi in turpis eu ligula elementum tempus non sed mauris. Sed sodales dui neque, in vehicula lectus fringilla id. Vestibulum cursus nibh eu elementum vulputate. Vestibulum condimentum, arcu vel lacinia sagittis, lorem arcu vestibulum nisl, in finibus elit erat sed odio. Pellentesque efficitur est et libero viverra, tristique interdum metus dignissim. Mauris id enim vel felis ultricies fermentum. Maecenas eu nulla vel ipsum ultricies consequat gravida eu quam. Integer commodo in erat id dapibus. Duis sagittis lectus eu leo volutpat, in aliquet turpis fringilla. Etiam dapibus volutpat eros, in congue orci molestie quis. Vestibulum nisl mauris, accumsan vel volutpat sed, accumsan lobortis orci. Nulla non purus fringilla, eleifend lacus nec, commodo diam. Aenean congue tincidunt quam non facilisis. Nullam auctor nunc ipsum, sit amet blandit magna feugiat ut. Suspendisse viverra nunc eget mi cursus, sed finibus velit fringilla. Phasellus erat nisi, blandit eu porta quis, interdum faucibus purus. Curabitur ac nunc vulputate, posuere odio non, porta nisl. Sed non enim non erat tempor suscipit. </p>

12 12 PAGINA WEB

13 13 ESERCIZIO 06 <title>es 06</title>  <h1>mappe IMMAGINE</h1>  <a target="_blank" href="p4.html"> <img src ="img/_penguins.jpg" alt="non riesco a caricare l'immagine" usemap="#map1"><img/> </a> <map name="map1"> <area shape="circle" coords="125,65,40" title="persona 1" target="_blank" href="p1.html"><area/> <area shape="circle" coords="254,75,40" title="persona 2" target="_blank" href="p2.html"><area/> <area shape="circle" coords="359,49,40" title="persona 3" target="_blank" href="p3.html"><area/> </map> PAGINA WEB

14 14 ESERCIZIO 07 <title>es 07</title>  <body align="center"> <h1>tabelle</h1>  <table align="center" width="80%" border="1"> <tr align="center">  <th></th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <tr align="center"> <th>lunedì</th> <td>informatica</td> <td>matematica</td> <td>italiano</td> <td>sistemi</td> <td>tpsi</td> <td>-</td> <tr align="center"> <th>martedì</th> <td>elettronica</td> <td>elettronica</td> <td>italiano</td> <td>matematica</td> <td>tpsi</td> <td>tpsi</td> <tr align="center"> <th>mercoledì</th> <td>matematica</td> <td>informatica</td> <td>ginnastica</td> <td>ginnastica</td> <td>inglese</td> <td>-</td> <tr align="center"> <th>giovedì</th> <td>matematica</td>

15 15 <td>informatica</td> <td>informatica</td> <td>sistemi</td> <td>sistemi</td> <td>storia</td> <tr align="center"> <th>venerdì</th> <td>italiano</td> <td>storia</td> <td>elettronica</td> <td>inglese</td> <td>religione</td> <td>-</td> <tr align="center"> <th>sabato</th> <td>sistemi</td> <td>tpsi</td> <td>inglese</td> <td>informatica</td> <td>italiano</td> <td>-</td> </table> PAGINA WEB

16 16 ESERCIZIO 08 <title>es 08</title>  <h1>colspan & ROWSPAN</h1>  <table border="4" width="80%" align="center" bgcolor="sky blue" cols="3"> <tr> <th width="25%" rowspan="3">promossi</th> <th colspan="2">voti</th> <tr> <td>rossi</td> <td>29</td> <tr> <td>verdi</td> <td>28</td> <tr bgcolor="yellow"> <th bgcolor="orange">rimandati</th> <td>azzurri</th> <td>-</td> <tr> <th rowspan="2">respinti</th> <td>bianchi</td> <td>25</td> <tr> <td>gialli</td> <td bgcolor="red">21</td> </table> PAGINA WEB

17 17 ESERCIZIO 09 <title>es 09</title>  <h1 align="center">colspan & ROWSPAN</h1>  <table cols="3" border="3" align="center"> <tr align="center"> <th colspan="3">tecnologie Multimediali</th> <tr align="center"> <td width="50%">html</td> <td colspan="2" rowspan="4"><img src="_penguins.jpg"></td> <tr align="center"> <td>css</td> <tr align="center"> <td>javascript</td> <tr align="center"> <td>wordpress</td> </table> PAGINA WEB

18 18 ESERCIZIO 09 BIS <title>es 09</title>  <h1 align="center">colspan & ROWSPAN bis</h1> <!--visualizzato nella pagina-- > <table cols="6" border="3" align="center" width="80%" bgcolor="yellow"> <tr align="center"> <th colspan="6">tecnologie Multimediali</th> <tr align="center"> <td colspan="3">html</td> <td colspan="3" rowspan="4"><img src="_penguins.jpg"></td> <tr align="center"> <td colspan="3">css</td> <tr align="center"> <td colspan="3">javascript</td> <tr align="center"> <td colspan="3">wordpress</td> <tr> <td colspan="2" width="33%" align="center"><a href="#">informatica</a></td> <td colspan="2" align="center"><a href="#">sistemi</a></td> <td colspan="2" align="center"><a href="#">elettronica</a></td> </table> PAGINA WEB

19 19 ESERCIZIO 10 <title>es 10</title>  <h1 id="su">blues BROTHERS</h1>  <ul> <li><a href="#tabella">tabella</a></li> <li><a href="#foto">immagine<a></li> <li><a href="#elenco">elenco</a></li> </ul> <p> <p> <table border="3" cols="5" width="80%" id="tabella"> <tr> <th rowspan="3" width="20%">1</th> <th colspan="4">2</th> <tr> <th><a href="#p1">3</a></th> <th colspan="3">4</th> <tr> <th><a href="#p2">5</a></th> <th><a href="#p3">6</a></th> <th>7</th> <th>8</th> </table> <br> <br> <h4 id="p1">paragrafo 1</h4> <p> <h4><a href="#tabella">torna a tabella</a></h4> <br> <h4 id="p2">paragrafo 2</h4> <p> <h4><a href="#tabella">torna a tabella</a></h4> <br> <h4 id="p3">paragrafo 3</h4> <p> <h4><a href="#tabella">torna a tabella</a></h4> <br> <img src="bluesbrothers.jpg" id="foto" usemap="elwood"> <map name="elwood"> <area shape="circle" coords="320,96,40" href="p1.html" title="elwood">

20 20 <area shape="circle" coords="497,124,40" href=" target="_blank" title="jack"> </map> <br> <ol id="elenco"> <li>titolo 1 <ul> <li>sottotitolo 1</li> <li>sottotitolo 2</li> </ul> </li> <li>titolo 2 <ul> <li>sottotitolo 3</li> <li>sottotitolo 4</li> </ul> </li> </ol> <h4><a href="#su">torna su</a></h4> PAGINA WEB

21 21

22 22 ESERCIZIO 11 <title>es 11</title>  <h1>pagina DI REGISTRAZIONE (MODULI)</h1>  <form>  <label>nome: <input type="text" name="txtnome" placeholder="inserisci qui il tuo nome" size="30" maxlength="10"/> <br/> <label>cognome: <input type="text" name="txtcognome" value="rossi" size="10" maxlength="15" readonly="readonly"/> <br/> <label>età: <input type="number" name="txteta" value="18" size="3" min="18" max="99"/> <br/> <label>password: <input type="password" name="txtpassword" placeholder="password"/> <br/> <label>immagine di profilo: <input type="file" name="txtimgprofilo"/> <br/> <label> <input type="text" name="txt " disabled="disabled" value="esempio@gmail.com"/> <p>hobbies: <br/> <label> <input type="checkbox" name="chkhobbies" value="lettura"/>  lettura <br/> <label> <input type="checkbox" name="chkhobbies" value="musica"/> musica <br/>

23 23 <label> <input type="checkbox" name="chkhobbies" value="sport"/> sport <br/> </p> <p>settore: <br/> <label> <input type="radio" name="optsettore" value="liceo"/> liceo <label> <input type="radio" name="optsettore" value="informatica"/> informatica <label> <input type="radio" name="optsettore" value="elettrotecnica"/> elettrotecnica <label> <input type="radio" name="optsettore" value="meccanica"/> meccanica </p> <label> Commenti: <br/> <textarea name ="txtcommenti" rows="5" placeholder="inserire un commento"></textarea> <br/> <p>residenza: <br/> <select name="lstresidenza" size="2"> <option selected="selected" value="-">-</option> <option value="marene">marene</option> <option value="fossano">fossano</option> <option disabled="disabled" value="cuneo">cuneo</option> </select> </p> <button type="submit">invia Dati</button>  <button type="clear">pulisci</button>

24 24 PAGINA WEB

25 25 ESERCIZIO 12 INDEX <title>es 12</title>  <h1 align="center"><font color="blue">la programmazione nelle pagine web</font></h1>  <blockquote> <p><font size="4"> All'interno di una pagina HTML possono essere utilizzati due diversi tipologie di script: <ul type="square"> <li><a href="p1.html" target="frame1">script lato server</a></li> <li><a href="p2.html" target="frame1">script lato client</a></li> </ul> </font></p> </blockquote> <div align="center"> <iframe name="frame1" width="80%" height="380" frameborder="1" ></iframe> </div> PAGINA 1 <title>es 12</title>  <h1 align="center"><font color="blue"><i>script Lato Server</i></font></h1>  <p align="center"> Gli script lato server possono essere realizzati mediante tre differenti tecnologie: </p> <table align="center" width="80%" border="3"> <tr>  <th width="25%">tecnologia</th> <th width="25%">acronimo</th>

26 26 <th width="50%">descrizione</th> <tr>  <td rowspan="2">asp</td> <td rowspan="2">active Server Pages</td> <td>asp Tradizionale:Tecnologia Microsoft basata su Visual Basic</td> <tr>  <td>aspx:tecnologia basata sulla piattaforma NET e programmabile con qualsiasi linguaggio NET (es C#)</td> <tr>  <td>jsp</td> <td>java Server Pages</td> <td>tecnologia server basata su Java</td> <tr>  <td>php</td> <td>hypertextpreprocessor</td> <td>tecnologia con un proprio linguaggio di programmazione ed un proprio ambiente di sviluppo completamente gratuito.</td> <table> PAGINA 2 <title>es 12</title>  <h1 align="center"><font color="blue"><i>script Lato Client</i></font></h1>  <p><font size=4>sono script che vengono completamente eseguiti sul browser. Di seguito è riportato un semplice esempio: </font></p> <p>in corrispondenza della scelta di un colore dal combo,lo sfondo della pagina deve automaticamente colorarsi del colore scelto. </p> <form> <select name="lstcolori" onchange="document.body.style.background= this.value;"> <option selected="selected" value="white">bianco</option> <option value="red">rosso</option> <option value="green">verde</option> <option value="yellow">giallo</option>

27 27 <option value="blue">blu</option> </select> </form> PAGINA WEB PAGINA 2 PAGINA 3

28 28 ESERCIZIO 13 <meta name="keywords" content="modellismo,automazione,didattica,treni"/>  <meta name="description" content="presentazione di un progetto didattico relativo all'automazione di un trenino"/> <meta name="author" content="milanesio,elansari" /> <meta http-equiv="content-type" content="text/html" /> <meta http-equiv="content-language" content="it-it" /> <meta http-equiv="content-expires" content="2016/10/9" /> <title>es 13</title>  <h1 align="center">caricamento FILMATI DA YOUTUBE</h1>  <div align="center"> <iframe width="560" height="315" src=" puifzv6was" frameborder="0" allowfullscreen></iframe> </div> PAGINA WEB

29 29 ESERCIZIO 14 INDEX <!doctype HTMl/> <meta charset="utf-8"/> <title>es 14</title> <body LeftMargin="40" link="red" vlink="green"> <h1 align="center"><font color="blue"><i>la vita è bella</i></font></h1> <hr size="2"></hr> <img align="right" src="poster.jpg" alt="poster film"></img> <p> Sito dedicato al film di Roberto Benigni vincitore nel 1997 di 3 premi oscar (una per il miglior film straniero, una per la migliore colonna sonora ed uno per il migliore attore protagonista). Un uomo rinchiuso in un campo di sterminio con la famiglia salva il figlio dall'orrore facendogli credere che è tutto un gioco. <ul> <li type="square"><a href="p2.html">trama</a></li> <li type="square"><a href="#lorem">critica</a></li> <li type="square"><a href="#">forum</a></li> <li type="square"><a href="p_commenti.html">invia Commenti</a></li> <li type="square"><a href="#">svago</a></li> </ul> </p> <br clear="right"> <br> <br> <br> <p id="lorem"> </p> PAGINA 2 <title>es 14</title>  <h1>trama - PAGINA 2</h1>

30 30 PAGINA 3 <title>es 14</title>  <table border="2" width="70%" align="center"> <tr align="center">  <th rowspan="2" width="10%">roberto Benigni</th> <th colspan="2">altri film</th> <tr align="center">  <th width="28%">titolo</th> <th>descrizione</th> <tr align="left">  <td>1988</td> <th><i>il piccolo diavolo</i></th> <td>padre Maurizio viene chiamato a compiere un esorcismo per liberare una donna dall'essere che la stava possedendo.</td> <tr align="left">  <td>1994</td> <th><i>il mostro</i></th> <td>loris è un giovane disoccupato che si guadagna da vivere con lavori saltuari. Una serie di equivoci porta la polizia a sospettare che Loris sia il maniaco sessuale e serial killer di donne che terrorizza il quartiere</td> <tr align="left">  <td>2005</td> <th><i>la tigre e la neve</i></th> <td>attilio de Giovanni, svagato ed estroso professore di poesia,divorziato e padre di due preadolescenti, è innamorato perdutamente di Vittoria, una scrittice che gli appare in sogno tutte le notti.</td> </table> <br> <form> <label> <p>quale fra i film predenti ti è piaciuto di più? <input type="text" name="txtfilmpiaciuto"></input>

31 31 </p> <label> <p>lo hai visto al cinema? <input type="radio" name="optcinema" value="si">si</input> <input type="radio" name="optcinema value="no">no</input> </p> <label> <p>lo hai visto più volte? <input type="checkbox" name="chkvisto" value="si">si</input> </p> <label> <p>assegna un voto da 1 a 10: <select name="lstvoto"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option selected="selected" value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </p> <a href="index.html"><img src="ritorna.jpg" alt="ritorna"></img></a> <button type="submit">invia Dati</button> </form>

32 32 PAGINA WEB PAGINA 2 PAGINA 3