Alberatura cartelle sito
Root Mio_sito
Img
Bkg.jpg
line.jpg
Images
Immagine_casa.jpg
Immagine_post2.jpg
Index.html
Style.css
page1.html
page2.html
Dreamweaver
4
Sintassi: <br>(a capo) oppure
<hr> (a capo con una linea)
ESEMPIO
<br>
<hr>
5
•Elenchi ordinati
•Elenchi non ordinati
Sintassi
<elenco>
<elemento>nome del primo elemento
<elemento>nome del secondo elemento
……….
……
</elenco>
6
Elenchi ordinati
Sintassi
Esempio
<ol>
<li>nome del primo elemento
<li>nome del secondo
elemento
……….
<ol>
<li> primo elemento
<li>secondo elemento
<li>terzo elemento
……
</ol>
</ol>
Testo fuori lista
ol= order list
li=list item
7
Elenchi ordinati
Sintassi
Esempio
<ol type=“attributo”>
<li>nome del primo elemento
<li>nome del secondo
</ol>
<ol type=“a”>
<li> primo elemento
<li>secondo elemento
<li>terzo elemento
ol= order list
</ol>
li=list item
Testo fuori lista
Attributo:1=numeri arabi;
a=alfabeto minuscolo;
A=alfabeto maiuscolo;
i=romani minuscoli;
I=romani maiuscoli
8
Elenchi non ordinati
Sintassi
Esempio
<ul>type=“attributo”>
<li>nome del primo elemento
<li>nome del secondo
</ul>
<ul type=“circle”>
<li> primo elemento
<li>secondo elemento
<li>terzo elemento
ul= unorder list
</ul>
li=list item
Testo fuori lista
Attributo:disc=pallino pieno;
circle=pallino vuoto;
square=quadrato pieno;
9
Ordered list
Unordered list
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.
11
Nota bene
E’ 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 assoluto
Viene 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)
12
L’attributo title è molto importante, e serve per descrivere l’elemento a cui
fa riferimento il link.
Sintassi:
<a title=“commento" href=URL" > testo</a>
Nota bene
L’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.
13
•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>
14
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>
•
15
Vediamo un esempio
E poi costruiamo un esempio di due pagine collegate fra loro e che
sfruttino le ancore.
Immagini di contenuto VS immagini di layout
Immagine di background. Si pone
logicamente a livello di layout
strutturale
Immagine di contenuto. Si pone
logicamente allo stesso livello di un
testo. Ovvero ha valore
contenutistico
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>