a cura di Romina Biava HTML IMMAGINI ELENCHI TABELLE LINK FRAME FORM STRUTTURA DI UNA PAGINA HTML Le pagine web consistono in una "testa", in inglese head e un "corpo", detto anche body. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY>... </BODY> </HTML> Verrà visualizzato dal browser solo quanto contenuto tra <body> e </body> SINTASSI DEI TAG I tag sono istruzioni delimitate e rese riconoscibili dalle parentesi < >, tutti, tranne qualche eccezione, devono essere aperti <> e chiusi </>. Es: <b> </b> per testo in grassetto I tag possono contenere attributi, ossia caratterizzazioni aggiuntive <TAG attributi> contenuto</tag> Attributo= valore <TAG attributo1= valore1 attributo2= valore2.. attributon= valoren ></TAG> COLORI Due sono le tecniche usate per gestire i colori Scrivendo il nome del colore in lingua inglese, tra quelli predefiniti Con la tecnica RGB( Red, Green, Blue) è possibile gestire 16 milioni di colori, combinando tra loro i 3 colori base. Vengono assegnati 8 bit per ciascun colore con una scala di 256 gradazioni possibili. I valori vengono espressi in esadecimale (base 16) indicando due cifre per ciascun colore. Possono assumere valori compresi tra 00 e FF. Pagina 1
Codice RGB nero #000000 bianco #FFFFFF rosso #FF0000 verde #00FF00 blue#0000ff Colore del testo <body TEXT= red > testo di colore rosso Colore dei collegamenti ipertestuali <body LINK= red Vlink = yellow> (vlink è il colore del link già visitato <a href = >collegamento ipertestuale </a> Colore di sfondo <body BGCOLOR= bue > IMMAGINI Inserire immagini è molto importante, in quanto serve ad arricchire la pagina stessa oltre che a integrare il testo e ad attirare l attenzione del navigatore su un punto specifico della pagina. I formati grafici che si possono inserire in una pagina web sono di tre tipi: GIF supporta le animazioni e la trasparenza ma ha al massimo 256 colori JPG non supporta né le animazioni nè la trasparenza ma permette 16 milioni di colori PNG incorpora le caratteristiche dei due formati. Per inserire un immagine si utilizza il tag <IMG> che non prevede alcuna chiusura. <IMG SRC= IMMAGINE.JPG > Gli attributi del tag <IMG> BORDER indica lo spessore del bordo in pixel WIDTH indica la larghezza (in assoluto con nro pixel o in percentuale rispetto all'immagine originale) HEIGHT indica la lunghezza(come sopra) ALT commento che prende il posto dell immagine LOWSRC consente di impostare un immagine di anteprima a bassa risoluzione che precede la foto vera e propria L attributo ALIGN può assumere i seguenti valori: LEFT l immagine si dispone a sinistra rispetto al testo, che viene incorniciato attorno all immagine RIGHT l immagine si dispone a destra rispetto al testo, che viene incorniciato attorno all immagine ABSBOTTOM l immagine si dispone in modo che il testo stia alla sua base ABSMIDDLE il testo si dispone in modo che l immagine stia al centro, senza incorniciarlo TEXTOP il testo si dispone sopra l immagine, senza incorniciarlo BOTTOM l immagine si dispone in modo che il testo venga incorniciato partendo Pagina 2
dalla sua base MIDDLE l immagine si dispone in modo che il testo venga posto al centro TOP l immagine si dispone in modo che il testo venga disposto in alto DISTANZA DI UN'IMMAGINE DA OGGETTI VICINI HSPACe spazio ai lati in pixel VSPACE SPAZI in basso e in alto in pixel <img HSPACE="nro pixel" VSPACE ="nro pixel" IMMAGINI DI SFONDO Per assegnare un immagine come sfondo della pagina si usa l attributo <body BACKGROUND= immagine.jpg > È possibile fare in modo che, anche quando l utente sposta la barra di scorrimento, l immagine di sfondo rimanga fissa. <body BACKGROUND = immagine.jpg BGPROPERTIES= fixed > CARATTERI SPECIALI & E commerciale & < minore < (lower than) > maggiore > (greater than) Linea Virgolette Spazio Attenzione: il browser a fronte di un testo con più spazi adiacenti ne visualizza solo uno 1/2 Un mezzo ½ à A accentata à è E accentata è ì I accentata ì ò O accentata ò ù U accentata ù IL PARAGRAFO Il paragrafo è una parte di testo. Il tag che permette di crearlo è <P>, e produce una spaziatura di riga maggiore per separarlo in modo evidente dal testo che precede. Se non si usa questo tag l intera pagina viene considerata come unico paragarafo. Per allineare il testo del paragrafo si usa l attributo ALIGN <P ALIGN= allineamento >testo del paragrafo</p> <P ALIGN= left > allinea il paragrafo a sinistra <P ALIGN= right > allinea il paragrafo a destra <P ALIGN= center > allinea il paragrafo al centro Pagina 3
<P ALIGN= justify > giustifica il paragrafo TAG PER FORMATTARE IL TESTO <b> </b> attiva il carattere grassetto <i> </i> attiva il carattere corsivo <u> </u> attiva il carattere sottolineato <s> </s> attiva la cancellatura visibile <tt> </tt> attiva la monospaziatura <sup> </sup> attiva il carattere apice <sub> </sub> attiva il carattere pedice <marquee> </ marquee> per testo scorrevole IL TAG <FONT> </FONT> Permette di formattare il testo in base a quanto specificato negli attributi che ne definiscono il tipo di carattere, il colore e la dimensione (sono solo 7 le possibili misure di carattere). TIPO DI CARATTERE (FACE) <FONT FACE= ARIAL > testo </FONT> verdana, ecc Arial, times new roman, DIMENSIONE DEL CARATTERE (SIZE) il più piccolo è 1 <FONT FACE= ARIAL SIZE=3> testo </FONT> COLORE DEL CARATTERE (COLOR) <FONT FACE= ARIAL SIZE=3 COLOR= RED > testo </FONT> INTESTAZIONI Questo marcatore serve ad evidenziare i titoli all interno del documento. <Hn align= allineamento > </Hn> Il valore di n è compreso tra 1 e 6; H1 sarà la più grande. Attributi Align posizione (center, right, left) TAG <HR> Il tag <HR> non ha il tag di chiusura, e crea una linea orizzontale nella pagina. <HR ALIGN= posizione SIZE= altezza WIDTH = lunghezza COLOR = colore NOSHADE> Pagina 4
Attributi: ALIGN posizione (center, right, left) WIDTH lunghezza SIZE spessore COLOR colore NOSHADE elimina l effetto 3D ELENCHI Possono essere usati per organizzare le informazioni in modo chiaro. Si possono dividere in due categorie: NUMERATI O ORDINATI PUNTATI O NON ORDINATI ELENCHI NUMERATI È delimitato dal tag <OL> </OL>. Ogni elemento della lista deve inoltre essere preceduto dal tag <LI>. In questo caso avremo un elenco di tipo numerato. Per inserire sistemi di numerazione diversi si usa l attributo TYPE. Indicizzazione alfabetica maiuscola <OL TYPE = A > Indicizzazione alfabetica minuscola <OL TYPE = a > Indicizzazione con numeri romani maiuscoli <OL TYPE = I > Indicizzazione con numeri romani minuscoli <OL TYPE = i > Per indicare da quale numero far iniziare l elenco si usano gli attributi type e value: <OL TYPE= I > <LI VALUE= 5 >parte dal quinto elemento <LI>elemento </OL> ELENCHI NON ORDINATI Sono elenchi dove il simbolo scelto per puntare il singolo elemento della lista viene ripetuto all infinito. È delimitato dal tag <UL> </UL>. Ogni elemento della lista deve inoltre essere preceduto dal tag <LI>. In questo caso avremo un elenco composto da una serie di pallini neri. Per inserire dei simboli diversi si usa l attributo TYPE. PALLINI NERI <UL TYPE= disc > PALLINI VUOTI <UL TYPE= circle > QUADRATINI PIENI <UL TYPE= square > TABELLE Per disegnare una tabella è necessario usare tre marcatori: Pagina 5
<TABLE> elemento di inizio e fine tabella <TR>elemento di inizio e fine riga <TD> elemento di inizio e fine cella Per evidenziare l intestazione della tabella si usa il tag <TH></TH> al posto di <TD></TD> Per allineare la tabella: <TABLE ALIGN= CENTER > centrata <TABLE ALIGN= RIGHT > allineata a destra Per assegnare un titolo alla tabella si deve inserire dopo il tag <table> <CATION> titolo</ CAPTION > BORDURA per rendere visibile i bordi si usa l attributo BORDER= valore ; si può assegnare anche un colore con l attributo BORDERCOLOR= nome colore DIMENSIONE DI UNA TABELLA se non specificate, le dimensioni si adattano al contenuto presente nelle celle. Per definire la larghezza si usa l attributo WIDTH, per l altezza l attributo HEIGHT Con lo stesso attributo si può specificare l'altezza di ogni riga in TR e la larghezza di ogni colonna nel TD <TABLE WIDTH= larghezza HEIGHT= altezza > <tr height="altezza" > <td width=larghezza>. SPAZI TRA Le celle e tra contenuto e bordo della cella <table CELLSPACING="spazio" CELLPADDING =Spazio"> COLORI si può inserire il colore di sfondo dell intera tabella,e di una singola cella <TABLE BGCOLOR= colore sfondo tabella > <TD BGCOLOR= colore sfondo cella > IMMAGINE. Si può inserire un immagine come sfondo della tabella o come sfondo della cella <TABLE BACKGROUND= imm. sfondo tabella <TD BACKGROUND= immagine sfondo cella ALLINEAMENTI il contenuto di ogni singola cella può essere allineato in orizzontale o in verticale. - orizzontale con l attributo align <TD ALIGN= left,center, right, > - allineamento verticale con l attributo valign <TD VALIGN= top allineamento in alto <TD VALIGN= middle allineamento al centro <TD VALIGN= bottom allineamento in basso UNIONE DI CELLE permette di unire più celle sia in orizzontale che in verticale. Per unire più celle in orizzontale uso l attributo COLSPAN Pagina 6
<TD COLSPAN= numero di celle che vengono unite > Per unire più celle in verticale uso l attributo ROWSPAN <TD ROWSPAN= numero di celle che vengono unite > I LINK Sono dei collegamenti ipertestuali. Possono essere link a risorse interne al sito, o link a risorse esterne al sito. Link a risorse interne al sito: Si usa il tag <A></A> attributo HREF <A HREF= percorso >testo cliccabile </A> Link a risorse esterne al sito: <A HREF= http://www.google.it >testo cliccabile </A> <A HREF= http://www.google.it > <img src= foto.jpg > </A> per cliccare su un'immagine Link alla posta elettronica <A HREF= mail:ciao@yahoo.it >scrivetemi cliccabile </A> I FRAME I frame rappresentano uno strumento che permette di creare sezioni diverse della stessa pagina, in grado di interagire tra loro. Struttura dei frame. Per creare una pagina che utilizza i frame è necessario impostare il documento principale che prende il nome di FRAMESET. Tale documento contiene il numero e la tipologia di frame di cui sarà composta la pagina visualizzata nel browser e nessuna informazione. Se per esempio si vuole suddividere la pagina in tre parti, è necessario creare quattro file html differenti: il frameset che contiene la descrizione della struttura della pagina, gli altri 3 file contengono i dati da visualizzare nelle 3 sezoni. Per creare un frameset si sostituisce il tag <body> con il tag<frameset>. Il tag<frameset> possiede due importanti attributi: ROWS indica il numero e le dimensioni delle righe <FRAMESET ROWS= 30%,* (*=70%) COLS indica il numero e le dimensioni delle colonne Pagina 7
<FRAMESET COLS= *,*,*,*,* (*=20%) Si può specificare la dimensione con un numero in percentuale o con un asterisco. Una volta definito il FRAMESET si deve specificare il file html da nserire nei frame. Es.<FRAMESET COLS= *,* > <FRAME SRC= file1.html > due colonne uguali la pagina viene divisa in <FRAME SRC= file1.html > </FRAMESET> FRAMEBORDER serve per indicare se visualizzare i bordi esterni dei frame <FRAMESET FRAMEBORDER = no COLS= *,* > FRAMESPACING funziona solo con internet Explorer e permette di impostare lo spazio tra un frame e l altro. <FRAMESET FRAMESPACING= 20 COLS= *,* > BORDERCOLOR serve per specificare il colore dei bordi <FRAMESET BORDERCOLOR= blue COLS= *,* > ATTRIBUTI DEL TAG FRAME SCROLLING indica se verrà o meno visualizzata la barra di scorrimento, se vale no non viene impostata, se vale auto la barra compare solo se necessario. NORESIZE impedisce all utente di ridimensionare il singolo frame. Se usato insieme a scrolling=no blocca il contenuto del frame. FRAMEBORDER consente o meno di visualizzare i bordi del frame, può valere 1 (consente) o 0 MARGINHEIGHT e MARGINWIDTH determinano ladistanza verticale e orizzontale tra i bordi del frame e ilsuo contenuto. APRIRE UN COLLEGAMENTO IN UN FRAME SPECIFICATO Dopo aver specificato il frameset bisogna indicare al browser in che frame posizionarsi (ossia dove caricare la pagina) Per questo Si usa il tag TARGET che avrà come attributo il nome della sezione. ES. Filefrset.htm <FRAMESET COLS= 30%,* > <FRAME SRC= file1.htm NAME= destra > <FRAME SRC= file2.htm NAME= sinistra > </FRAMESET> FileDestra.htm <A HREF= tabella.htm TARGET= destra">tabella </A> Pagina 8
quando clicco su TABELLA, vado a caricare il file tabella.htlm sulla sezione "destra" <A HREF= lista.htm TARGET= sinistra">lista </A> I FORM Gli elementi basilari dei form di immissione sono suddivisi in 4 tag <INPUT> determina un input da parte dell utente <TEXTAREA> usato per inserire testi lunghi <SELECT> usato per creare menu di scelta <FIELDSET> si usa per aggruppare i campi per tipologia INPUT TEXT casella di testo a riga singola RADIO scelta esclusiva CHECKBOX scelta multipla SUBMIT pulsante di invio RESET pulsante di reset TEXT casella di testo a riga singola <INPUT TYPE= text NAME= nome campo MAXLENGTH= lunghezza SIZE= deimensione per lo scrolling VALUE= contenuto predefinito > </FORM> RADIO scelta esclusiva <INPUT TYPE= radio NAME= nome campo VALUE= contenuto > </FORM> CHECKBOX scelta multipla <INPUT TYPE= checkbox NAME= nome campo VALUE= contenuto > </FORM> BOTTONE PER INVIARE I DATI <INPUT TYPE= submit VALUE= invia NAME= invia ></FORM> TASTO PER RESET <INPUT TYPE= reset NAME= reset VALUE= cancella ></FORM> Pagina 9
TEXTAREA <TEXTAREA NAME= nome campo ROWS= righe di testo visibili COLS= larghezza in caratteri WRAP= virtual/off </TEXTAREA> </FORM> MENU A DISCESA <SELECT NAME= nome elenco <OPTION VALUE= 1 >valore1 </ OPTION> <OPTION VALUE= 2 >valore2 </OPTION> <OPTION VALUE= N >valore3 </ OPTION> </SELECT> </FORM> RAGGRUPPAMENTO DEI CAMPI Con l elemento <FIELDSET> si possono raggruppare incorniciandoli più campi modulo all interno del form. Con il tag <LEGEND> si può aggiungere un titolo posizionandolo con l attributo ALIGN esempio <form> <fieldset> <legend align="center">area riservata</legend> <table border="0"> <tr> <td>user name<td><input type="text" name="user"size="20"> <tr> <td>password<td><input type="text" name="password"size="20"> <tr> <td><input type=submit value="accedi"name="access"> </table> </fieldset> </form> Pagina 10