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

Dreamweaver

4

5

Sintassi: <br>(a capo) oppure <hr> (a capo con una linea)

ESEMPIO

<br>

<hr>

6

•Elenchi ordinati

•Elenchi non ordinati

Sintassi

<elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento ……….

……

</elenco>

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

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

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

Ordered list

Unordered list

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.

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)

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.

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>

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>

Vediamo un esempioE poi costruiamo un esempio di due pagine collegate fra loro e che

sfruttino le ancore.

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

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

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:

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

Immagini con link

<a href="http://www.sito.it" target="_blank"> <img src="logo.gif”/>

</a>