alberatura cartelle sito. root mio_sito img images index.html style.css page1.html page2.html...
TRANSCRIPT
![Page 1: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/1.jpg)
Alberatura cartelle sito
![Page 2: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/2.jpg)
Root Mio_sito
Img
Images
Index.html
Style.css
page1.html
page2.html
Bkg.jpg
line.jpg
Immagine_casa.jpg
Immagine_post2.jpg
![Page 3: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/3.jpg)
Dreamweaver
![Page 4: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/4.jpg)
4
![Page 5: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/5.jpg)
5
Sintassi: <br>(a capo) oppure <hr> (a capo con una linea)
ESEMPIO
<br>
<hr>
![Page 6: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/6.jpg)
6
•Elenchi ordinati
•Elenchi non ordinati
Sintassi
<elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento ……….
……
</elenco>
![Page 7: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/7.jpg)
7
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
![Page 8: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/8.jpg)
8
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
![Page 9: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/9.jpg)
9
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
![Page 10: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/10.jpg)
Ordered list
Unordered list
![Page 11: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/11.jpg)
11
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.
![Page 12: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/12.jpg)
12
Nota beneE’ 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ù ramificate esistono due tecniche:indicare un percorso assolutoViene 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)
![Page 13: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/13.jpg)
13
Nota beneL’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.
Sintassi:<a title=“commento" href=URL" > testo</a>
L’attributo title è molto importante, e serve per descrivere l’elemento a cui fa riferimento il link.
![Page 14: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/14.jpg)
14
•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>
![Page 15: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/15.jpg)
15
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>
![Page 16: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/16.jpg)
Vediamo un esempioE poi costruiamo un esempio di due pagine collegate fra loro e che
sfruttino le ancore.
![Page 17: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/17.jpg)
Immagini di contenuto VS immagini di layout
Immagine di contenuto. Si pone logicamente allo stesso livello di un testo. Ovvero ha valore contenutistico
Immagine di background. Si pone logicamente a livello di layout strutturale
![Page 18: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/18.jpg)
Con il tag IMG inseriamo immagini direttamente in html, allo stesso livello del testo. Solitamente sono inserite in un tag <a> (linkate) oppure in un tag <p>
La immagini che strutturano il layout verranno trattate con attraverso i fogli di stile CSS
![Page 19: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/19.jpg)
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 standard).
i formati ammessi (sia per immagini di contenuto che per background) sono:
![Page 20: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/20.jpg)
<img src="logo.gif" alt=” logo” width="224" height="69" />
![Page 21: Alberatura cartelle sito. Root Mio_sito Img Images Index.html Style.css page1.html page2.html Bkg.jpg line.jpg Immagine_casa.jpg Immagine_post2.jpg](https://reader035.vdocuments.site/reader035/viewer/2022062404/5542eb72497959361e8d9a6b/html5/thumbnails/21.jpg)
Immagini con link
<a href="http://www.sito.it" target="_blank"> <img src="logo.gif”/>
</a>