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 sopra-indicati).

È importante ricordare che il codice HTML fornisce delle indicazioni al browser su come visualizzare il testo e le immagini - ed eventualmente i video e i suoni - all'interno della pagina: il testo (come abbiamo visto) è scritto direttamente nel file HTML, le immagini invece sono caricate insieme alla pagina.

<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" border="0" width="224" height="69" /></a>

Per creare una tabella si usa il comando

<TABLE>

tabella

</TABLE>

<TABLE> ha vari attributi che servono per stabilire le caratteristiche della tabella

 

Table

<TABLE

border=numero {larghezza in pixel dei bordi}

align=left | right | center

{allineamento della tabella nella pagina}

cellspacing=numero {spazio in pixel tra le celle}

cellpadding=numero

{spazio tra bordo e contenuto delle celle}

width=numero | percentuale

{larghezza della tabella in pixel o in %} >

COMANDI PER LA FORMATTAZIONE:

<TR> (table row) per creare righe della tabella<TR> nuova riga </TR>

<TRalign=left | right | center

{allineamento nella tabella}

valign=top | middle | bottom |baseline{allineamento del testo rispetto alle celle}

bgcolor = “colore” bordercolor = “colore” bordercolordark = “colore” ( per le ombre dei bordi) >

ES:<table> <tr>Questa è la prima riga.</tr> <tr>Questa è la seconda riga.</tr></table>

Questa è la prima riga

Questa è la seconda riga

<TD> per inserire dati <TD> inserimento di una dato </TD>

<TH> per il titolo delle colonne <TH> titolo della colonna (bold e centrato) </TH>

<CAPTION> titolo tabella <CAPTION align=top | bottom>

titolo della tabella

</CAPTION>

 

prima seconda terza

1 2 3

a b c

i ii iii

una tabella

ESEMPIO

TD colspan

Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne). In questo caso si utilizza l’attributo colspan sul <td>, specificando come valore il numero di celle che devono essere occupate.

TD rowspan

Tramite l’attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga

14

Elemento di blocco

Sintassi: <div>testo</div

ESEMPIO

<div>Blocco di testo</div>

NOTA BENE

Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura.

Accenno ai CSS

Francesca Barresi Corso HTML

• I css sono un set di istruzioni che definiscono la presentazione di un docmento

• In altre parole definiscono come apparirà una pagina HTML

• CSS esterni possono essere applicati a molteplici pagine web che ne fanno riferimento

Cosa sono i CSS

• Permettono di cambiare l’aspetto e il layout di un intero sito , editando un solo file!

• Permettono di migliorare l’accessibilità• Possono definire come verrà processata la

pagina su differenti media (screen, print)Perché utilizzare i CSS?

La definizione più conosciuta dei css e diffusa dei fogli di stile è “sono la separazione tra contenuto e presentazione”.

Una buona conoscenza dell’ html e la comprensione approfondita dei selettori css e il loro uso proprio permettono di strutturare bene pagine web, sia dal punto di vista del contenuto che della presentazione.

Benefits in Using CSS for Layout

• Reduces file sizes, page load times & bandwidth• Easier to keep layout and look consistent across site• Easier & faster to redesign• Reduces code, increases prominence of content — good

for search engines• Aids in accessibility

CSS Zen Garden

• Page layout e object Positioning

• Font e proprietà di testo

• Color and background properties• Proprietà di blocchi logici : Margini,

borders, dimensioni

A cosa sono utili?