Upload
alberta-radaelli
View
215
Download
0
Embed Size (px)
Citation preview
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?