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> Table Per creare una tabella si usa il comando <TABLE> tabella </TABLE> <TABLE> ha vari attributi che servono per stabilire le caratteristiche della tabella <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> <TR align=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> ESEMPIO prima seconda terza 1 2 3 a b c i una tabella ii iii 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 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. 14 Accenno ai CSS Francesca Barresi Corso HTML Cosa sono i CSS • 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 Perché utilizzare 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) 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 A cosa sono utili? • Color and background properties • Proprietà di blocchi logici : Margini, borders, dimensioni