Corso html Lezione 2 Corso html- lez. 2 Contenuto di una pagina html CONTENUTO DI UNA PAGINA HTML 3 I COLORI ATTRIBUTI DEL TAG BODY I MARGINI COLORE DEL TESTO COLORE DEI COLLEGAMENTI IPERTESTUALI COLORE DI SFONDO IMMAGINI DI SFONDO CARATTERI SPECIALI FORMATTAZIONE DEL TESTO TESTO PREFORMATTATO RITORNO A CAPO IL PARAGRAFO IL CARATTERE ATTRIBUTO FACE ATTRIBUTO SIZE COLORE DEL CARATTERE TESTO SCORREVOLE I TITOLI LE IMMAGINI LO STILE DELLE BARRE DI SCORRIMENTO 2 3 6 6 8 8 9 10 12 17 18 21 23 27 27 28 29 30 32 34 42 Corso html- lez. 2 Contenuto di una pagina html Contenuto di una pagina html I colori Una delle caratteristiche di una pagina web (ad esempio dello sfondo o del testo ) è il colore In una istruzione puoi scrivere, ad esempio <font color="silver"> </font> Nella tabella seguente vi sono I nomi di sedici colori standard utilizzabili in html black="#000000" green="#008000" silver="#C0C0C0" lime="#00FF00" gray="#808080" olive="#808000" white="#FFFFFF" yellow="#FFFF00" maroon="#800000" navy="#000080" red="#FF0000" blue="#0000FF" purple="#800080" teal="#008080" fuchsia="#FF00FF" aqua="#00FFFF" Per avere un numero di combinazioni maggiori si può utilizzare la tecnica rgb; con tale tecnica che prende il nome da Red, Green e Blue, si possono ottenere 16 milioni di colori componendo opportunamente il rosso, il verde e il giallo Ogni colore fondamentale sarà rappresentato da un numero ad 8 bit , che può variare dunque da 0 a 255, il quale indicherà la gradazione del colore. I numeri sono espressi con cifre esadecimali. Le prime due cifre del codice del colore che vogliamo comporre indicheranno la gradazione del rosso, le seconde due la gradazione del verde e le ultime due la gradazione del blu. Ad esempio il colore rosso puro avrà la massima intensità per il 3 Corso html- lez. 2 Contenuto di una pagina html rosso ed intensità nulle per verde e blu per cui il codice rgb per il rosso sarà FF0000. poiché il bianco è dato dalla somma dei colori fondamentali alla massima intensità si avrà che il suo codice è FFFFFF, e così via. Sono possibili dunque 256 * 256 * 256 combinazioni diverse per circa 16 milioni di colori possibili. Tavola internazionale dei colori: Nome del colore Codice colore RGB Codice colore RGB Esadecimale aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #BEBEBE #008000 #ADFF2F #F0FFF0 #FF69B4 240 248 255 250 235 215 0 255 255 127 255 212 240 255 255 245 245 220 255 228 196 000 255 255 205 0 0 255 138 43 226 165 42 42 222 184 135 95 158 160 127 255 0 210 105 30 255 127 80 100 149 237 255 248 220 220 20 60 0 255 255 0 0 139 0 139 139 184 134 11 169 169 169 0 100 0 189 183 107 139 0 139 85 107 47 255 140 0 153 50 204 139 0 0 233 150 122 143 188 143 72 61 139 47 79 79 0 206 209 148 0 211 255 20 147 0 191 255 105 105 105 30 144 255 178 34 34 255 250 240 34 139 34 255 0 255 220 220 220 248 248 255 255 215 0 218 165 32 128 128 128 0 128 0 173 255 47 240 255 240 255 105 180 4 Corso html- lez. 2 Contenuto di una pagina html indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray snow #CD5C5C #4B0082 #FFFFF0 #F0D58C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370DB #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #DB7093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA 5 205 92 92 75 0 130 255 240 240 240 230 140 230 230 250 255 240 245 124 252 0 255 250 205 173 216 230 240 128 128 224 255 255 250 250 210 144 238 144 211 211 211 255 182 193 255 160 122 32 178 170 135 206 250 119 136 153 176 196 222 255 255 224 0 255 0 50 205 50 250 240 230 255 0 255 128 0 0 102 205 170 0 0 205 186 85 211 147 112 219 60 179 113 123 104 238 0 250 154 72 209 204 199 21 133 25 25 112 245 255 250 255 228 225 255 228 181 255 222 173 0 0 128 253 245 230 128 128 0 107 142 35 255 165 0 255 69 0 218 112 214 238 232 170 152 251 152 175 238 238 219 112 147 255 239 213 255 218 185 205 133 63 255 192 203 221 160 221 176 224 230 128 0 128 255 0 0 188 143 143 65 105 225 139 69 19 250 128 114 244 164 96 46 139 87 255 245 238 160 82 45 192 192 192 135 206 235 106 90 205 112 128 144 255 250 250 Corso html- lez. 2 Contenuto di una pagina html springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32 0 255 127 70 130 180 210 180 140 0 128 128 216 191 216 253 99 71 64 224 208 238 130 238 245 222 179 255 255 255 245 245 245 255 255 0 154 205 50 Attributi del tag body Il corpo del documento html, come abbiamo visto nella prima lezione è racchiuso fra i tag <BODY> e </BODY>. Esso può avere degli attributi <BODY attributo1=valore Attributo2=valore …> I margini Un primo attributo consente di stabilire i margini del documento rispetto alla finestra del browser - leftmargin consente di determinare il margine sinistro - topmargin consente di determinare il margine destro Per esempio con <BODY TOPMARGIN=400> Otteniamo che il documento si trovi a 400 pixel dal bordo superiore della finestra del browser 6 Corso html- lez. 2 Contenuto di una pagina html http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi8.htm mentre con <BODY TOPMARGIN=400 LEFTMARGIN=100> otteniamo uno spostamento dal margine sinistro di 100 pixel /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi9.htm 7 Corso html- lez. 2 Contenuto di una pagina html Colore del testo Con l’attributo text possiamo determinare il colore del testo usando il nome di uno dei colori fondamentali o il codice rgb. Ad esempio <BODY text="green"> /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi10.htm oppure con rgb <BODY text="#FF0000"> /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi11.htm Notiamo come il codice del colore RGB debba essere preceduto dal simbolo #. Colore dei collegamenti ipertestuali Con l’attributo link possiamo dare un colore ai collegamenti ipertestuali. Ad esempio <BODY text="#FF0000" link="maroon"> 8 Corso html- lez. 2 Contenuto di una pagina html <A HREF="http://www.alessandromanzoni.com">www.alessandromanzoni.com</A> /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi12.htm Colore di sfondo Con l’attributo bgcolor (background color) si può impostare il colore di sfondo della pagina. La sintassi è bgcolor=”colore” ad esempio con <BODY text="#FF0000" link="maroon" bgcolor="green"> otteniamo 9 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi13.htm Immagini di sfondo Spesso lo sfondo di una pagina web si ottiene mediante l’utilizzo di immagini disponibili in formato elettronico. Ad esempio supponiamo di avere la seguente immagine E supponiamo che essa si trovi in una cartella denominata esempio1 presente nella stessa directory della nostra pagina web. Con il seguente codice <BODY text="#FF0000" link="maroon" background="esempio1/ritratto.jpg"> Otteniamo il seguente effetto Come si vede, l’immagine viene replicata più volte per riempire tutto lo schermo 10 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi14.htm Spesso si utilizza anche il cosiddetto effetto texture in cui si utilizza un’immagine di dimensioni molto piccole e la sua replica da luogo all’impressione di avere uno sfondo continuo. Ad esempio con la seguente immagine Otteniamo questo effetto /esempi\sfondo\Keeley Hazell Fan Club.htm oppure con la seguente immagine 11 Corso html- lez. 2 Contenuto di una pagina html Otteniamo /http://www.teresaventrone.it/didattica/corsohtml/esempi/sfondo/Reich & Schön Hunter Tylo.htm Con l'attributo background si può usare anche la proprietà BGPROPERTIES=fixed la quale fa in modo che quando facciamo scorrere la pagina web con la barra spaziatrice verticale lo sfondo rimanga fisso. Vedi esempio /esempi\Example%20of%20the%20BGPROPERTIES%20attribute%20for%20BODY.htm Caratteri speciali Una pagina html è in formato ascii, quindi si pone il problema di rappresentare i caratteri speciali non presenti nel codice ascii e i caratteri che sono utilizzati già da html per esprimere i tag come < e >. In questo caso vengono in aiuto le entità esse sono costrutti sintattici definiti nella tabella iso8859-1 che consentono di far visualizzare ad un browser i caratteri speciali. Come si può vedere dalla tabella seguente si può far riferimento ad un simbolo mediante il codice o il nome dell’entità. 12 Corso html- lez. 2 Contenuto di una pagina html iso8859-1 table Description =================================== quotation mark ampersand less-than sign greater-than sign Code ============ " --> " & --> & < --> < > --> > Description =================================== non-breaking space inverted exclamation cent sign pound sterling general currency sign yen sign broken vertical bar Char Code ==== ============   --> ¡ ¡ --> ¡ ¢ ¢ --> ¢ £ £ --> £ ¤ ¤ --> ¤ ¥ ¥ --> ¥ ¦ ¦ --> ¦ section sign umlaut (dieresis) § ¨ copyright feminine ordinal left angle quote, guillemotleft not sign soft hyphen registered trademark macron accent © ª « ¬ degree sign plus or minus superscript two superscript three acute accent micro sign paragraph sign middle dot cedilla superscript one masculine ordinal right angle quote, guillemotright fraction one-fourth fraction one-half fraction three-fourths inverted question mark capital A, grave accent capital A, acute accent capital A, circumflex accent capital A, tilde capital A, dieresis or umlaut mark capital A, ring capital AE diphthong (ligature) capital C, cedilla capital E, grave accent capital E, acute accent capital E, circumflex accent capital E, dieresis or umlaut mark capital I, grave accent capital I, acute accent capital I, circumflex accent capital I, dieresis or umlaut mark capital Eth, Icelandic ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð ® ¯ § --> § ¨ --> ¨ © --> ª --> « --> ¬ --> ­ --> ® --> ¯ --> ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð 13 --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Entity name ============== " --> " & --> & < --> < > --> > Entity name ============== --> ¡ --> ¡ ¢ --> ¢ £ --> £ ¤ --> ¤ ¥ --> ¥ ¦ --> ¦ &brkbar; --> &brkbar; § --> § ¨ --> ¨ ¨ --> ¨ © --> © ª --> ª « --> « ¬ --> ¬ ­ --> ® --> ® ¯ --> ¯ &hibar; --> &hibar; ° --> ° ± --> ± ² --> ² ³ --> ³ ´ --> ´ µ --> µ ¶ --> ¶ · --> · ¸ --> ¸ ¹ --> ¹ º --> º » --> » ¼ --> ¼ ½ --> ½ ¾ --> ¾ ¿ --> ¿ À --> À Á --> Á Â --> Â Ã --> Ã Ä --> Ä Å --> Å Æ --> Æ Ç --> Ç È --> È É --> É Ê --> Ê Ë --> Ë Ì --> Ì Í --> Í Î --> Î Ï --> Ï Ð --> Ð Corso html- lez. 2 Contenuto di una pagina html capital N, tilde capital O, grave accent capital O, acute accent capital O, circumflex accent capital O, tilde capital O, dieresis or umlaut mark multiply sign capital O, slash capital U, grave accent capital U, acute accent capital U, circumflex accent capital U, dieresis or umlaut mark capital Y, acute accent capital THORN, Icelandic small sharp s, German (sz ligature) small a, grave accent small a, acute accent small a, circumflex accent small a, tilde small a, dieresis or umlaut mark small a, ring small ae diphthong (ligature) small c, cedilla small e, grave accent small e, acute accent small e, circumflex accent small e, dieresis or umlaut mark small i, grave accent small i, acute accent small i, circumflex accent small i, dieresis or umlaut mark small eth, Icelandic small n, tilde small o, grave accent small o, acute accent small o, circumflex accent small o, tilde small o, dieresis or umlaut mark division sign small o, slash small u, grave accent small u, acute accent small u, circumflex accent small u, dieresis or umlaut mark small y, acute accent small thorn, Icelandic small y, dieresis or umlaut mark Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Đ Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> --> Đ Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Facciamo un esempio. Supponiamo che nella seguente pagina web vogliamo porre il nome dell’autore fra < e > 14 Corso html- lez. 2 Contenuto di una pagina html Prendiamo semplicemente il testo e apportiamo la modifica Il risultato che otteniamo è semplicemente la scomparsa del testo racchiuso fra tali simboli 15 Corso html- lez. 2 Contenuto di una pagina html Questo perché il browser ritiene di trovarsi di fronte ad un tag /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi15.htm se invece utilizziamo le entità ed esprimiamo il simbolo < con il codice nominale < e il simbolo > con il codice > <Alessandro Manzoni> Otteniamo il risultato voluto /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi16.htm lo stesso risultato si ottiene naturalmente usando il codice numerico per le entità 16 Corso html- lez. 2 Contenuto di una pagina html <Alessandro Manzoni> /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi17.htm Formattazione del testo Al testo si possono naturalmente applicare vari effetti di formattazione come corsivo, grassetto e così via, utilizzando dei tag. I tag di questo tipo si distinguono fra logici e fisici. Tali tag hanno lo stesso effetto ma quelli logici tendono a mettere in evidenza il senso logico dell’effetto che si vuole realizzare. Ad esempio, se voglio far apparire in grassetto un testo userò il tag <B> che sta per bold ma avrò lo stesso effetto usando il tag <STRONG> che mette in evidenza che voglio enfatizzare il testo nella pagina web. Esempi di tag logici sono <EM> Evidenziato </EM> <STRONG> Molto evidenziato </STRONG> <CITE> Citazione </CITE> <CODE> Codice </CODE> <SAMP> Esempio </SAMP> <KBD> Immissione da tastiera </KBD> <VAR> Variabile </VAR> <DFN> Definizione </DFN> <ADDRESS> Indirizzo </ADDRESS> /http://www.teresaventrone.it/didattica/corsohtml/esempi/stilelogico.htm 17 Corso html- lez. 2 Contenuto di una pagina html esempi di tag fisici sono <B> Grassetto </B> <I> Corsivo </I> <TT> Font monospazio </TT> <U> Sottolineato </U> <S> Barrato </S> <BIG> Più grande </BIG> <SMALL> Più piccolo </SMALL> <SUB> Pedice </SUB> <SUP> Apice </SUP> /http://www.teresaventrone.it/didattica/corsohtml/esempi/stilefisico.htm Testo preformattato Supponiamo di avere un testo ascii in cui vi siano effetti di formattazione relativi alla distribuzione del testo come rientri, spaziature, interlinee, ecc. 18 Corso html- lez. 2 Contenuto di una pagina html Come sappiamo il browser non comprenderà queste informazioni perché non espresse tramite tag L’unica soluzione sarebbe introdurre in ogni punto del testo i tag opportuni oppure far riferimento al tag di preformattazione <PRE>. Se racchiudiamo tutto il file ascii fra i tag <PRE> e </PRE> otteniamo l’effetto di far visualizzare il file secondo gli effetti di spaziatura presenti nel file di testo. 19 Corso html- lez. 2 Contenuto di una pagina html 20 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/adelchi18.htm Ritorno a capo Abbiamo il seguente testo Ah per te [1] Orazio prèdica al vento! Del patrio carcere non sei contento, La chiave abomini grata a i pudichi, Agogni a l'aere de' luoghi aprichi. E dove, o misero, dove n'andrai. Dove un ricovero trovar potrai, O de' miei giovini lustri diletto, O mio carissimo tenue libretto? Non sai fastidio ch'ha de le rime Questa de gli arcadi prole sublime? Né de' romantici ti vuol la fiera Che siede a i salici libera schiera. Tu, se tra' lirici pur tenti il volo, Poco, o mio tenero, t'ergi dal suolo; Ed oggi innalzasi per nova via Fin da' suoi numeri l'economia, Né omai piú reggono piedi né ale Dietro la lirica universale. Oggi ciclopica s'è fatta l'arte; E Bronte e Sterope su per le carte Con vene tumide, con occhi accesi E con gli erculei muscoli tesi 21 Corso html- lez. 2 Contenuto di una pagina html A prova picchiano: Venere guata, E gli rimescola la limonata: Mentre il monocolo pastore etnese, Succiando il femore d'un itacese, Con urli orribili divelle un pino E a le nereidi fa il mazzolino. e sappiamo che il browser non rispetterà la formattazione del testo Per andare a capo possiamo utilizzare il tag BR che sta per break 22 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/acapo.htm Il paragrafo Per individuare un paragrafo in un testo si usa il tag <P>. Il testo compreso fra i tag <P> e </P> viene considerato come un unico paragrafo e viene introdotta automaticamente una spaziatura maggiore rispetto al testo precedente. Il testo del paragrafo è automaticamente allineato a sinistra. Vediamo il seguente esempio <P>Levatevi dal fianco Di que' felici che spregiate, e dove Sta questo onor fate vedervi: allora Vi crederò. Certo, se a voi consiglio Chieder dovessi, dir m'udrei: rigetta L'offerte indegne; de' tuoi re dividi, Qual ch'ella sia, la sorte. - E perché tanto A cor questo vi sta? Perché, s'io cado, Io vi farò pietà; </P><P>ma se, tra mezzo Alle rovine altrui, ritto io rimango, Se cavalcar voi mi vedrete al fianco Del vincitor che mi sorrida, allora Forse invidia farovvi; e più v'aggrada Sentir pietà che invidia. Ah! non è puro Questo vostro consiglio. - Oh! Carlo anch'egli In cor ti spregerà. - Chi ve l'ha detto? Spregia egli Svarto, un uom di guerra oscuro, Che ai primi gradi alzò? </P><P>Quando sul volto Quel potente m'onori, il core a voi Chi 'l rivela? E che importa? Ah! voi volete Sparger di fiele il nappo, a cui non puote Giungere il vostro labbro. A voi diletta Veder grandi cadute, ombre d'estinta Fortuna, o favellarne, e nella vostra 23 Corso html- lez. 2 Contenuto di una pagina html Oscurità racconsolarvi: è questo Di vostre mire il segno: un più ridente Splende alla mia; né di toccarlo il vostro Vano clamor mi riterrà. Se basta I vostri plausi ad ottener, lo starsi Fermo alle prese col periglio, ebbene, Un tremendo io ne affronto: e un dì saprete Che a questo posto più mestier coraggio Mi fu, che un giorno di battaglia in campo.</P> <P>Perché, se il rege, come suol talvolta, Visitando le mura, or or qui meco Svarto trovasse a parlamento, Svarto, Un di color, ch'ei traditori, e Carlo Noma Fedeli... oh! di guardarsi indietro Non è più tempo: egli è destin, che pera Un di noi due; far deggio in modo, o Veglio, Ch'io quel non sia.</P> Otterremo il seguente risultato /http://www.teresaventrone.it/didattica/corsohtml/esempi/paragrafo.htm Il tag ha un attributo ALIGN che consentirà di decidere l’allineamento del paragrafo. Sono possibili i valori - ALIGN = “left” per allineare a sinistra - ALIGN = “center” per allineamento centrato 24 Corso html- lez. 2 Contenuto di una pagina html - ALIGN = “right” per allineare a destra - ALIGN = “justify” per allineamento giustificato /http://www.teresaventrone.it/didattica/corsohtml/esempi/allineamento.htm Per effettuare un’indentazione cioè un rientro del testo si può utilizzare il tag BLOCKQUOTE. Ogni volta che il browser trova il tag di apertura indenta il testo verso destra, mentre ogni volta che trova il tag di chiusura rientra a sinistra. Tali tag possono anche essere nidificati Vediamo il seguente esempio <P align=justify> <BLOCKQUOTE>Levatevi dal fianco Di que' felici che spregiate, e dove Sta questo onor fate vedervi: allora Vi crederò. Certo, se a voi consiglio Chieder dovessi, dir m'udrei: rigetta L'offerte indegne; de' tuoi re dividi, Qual ch'ella sia, la sorte. <BLOCKQUOTE> E perché tanto A cor questo vi sta? Perché, s'io cado, Io vi farò pietà; ma se, tra mezzo Alle rovine altrui, ritto io rimango, Se cavalcar voi mi vedrete al fianco 25 Corso html- lez. 2 Contenuto di una pagina html Del vincitor che mi sorrida, allora Forse invidia farovvi; <BLOCKQUOTE> e più v'aggrada Sentir pietà che invidia. Ah! non è puro Questo vostro consiglio. - Oh! Carlo anch'egli In cor ti spregerà. - Chi ve l'ha detto? Spregia egli Svarto, un uom di guerra oscuro, Che ai primi gradi alzò? Quando sul volto Quel potente m'onori, il core a voi Chi 'l rivela? E che importa? </BLOCKQUOTE> Ah! voi volete Sparger di fiele il nappo, a cui non puote Giungere il vostro labbro. A voi diletta Veder grandi cadute, ombre d'estinta Fortuna, o favellarne, e nella vostra Oscurità racconsolarvi: </BLOCKQUOTE>è questo Di vostre mire il segno: un più ridente Splende alla mia; né di toccarlo il vostro Vano clamor mi riterrà. Se basta I vostri plausi ad ottener, lo starsi Fermo alle prese col periglio, <BLOCKQUOTE>ebbene, Un tremendo io ne affronto: e un dì saprete Che a questo posto più mestier coraggio Mi fu, che un giorno di battaglia in campo. Perché, se il rege, come suol talvolta, Visitando le mura, or or qui meco Svarto trovasse a parlamento, Svarto, Un di color, ch'ei traditori, e Carlo Noma Fedeli... </BLOCKQUOTE> oh! di guardarsi indietro Non è più tempo: egli è destin, che pera Un di noi due; far deggio in modo, o Veglio, Ch'io quel non sia. </BLOCKQUOTE> </P> 26 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/indentazione.htm Per gestire l’allineamento del testo si può utilizzare anche il tag DIV che usa l’attributo align come il tag P L’unica differenza è che non vengono introdotte le spaziature fra paragrafi diversi. /http://www.teresaventrone.it/didattica/corsohtml/esempi/tagdiv.htm Per allineare il testo al centro vi è infine il tag CENTER. Il testo racchiuso fra <CENTER> e </CENTER> sarà allineato al centro con lo stesso effetto die tag <DIV ALIGN=”center”> e </DIV>. Il carattere Per modificare le caratteristiche del carattere si può utlizzare il tag FONT. Attributo FACE Con questo attributo si sceglie il tipo di font utilizzato per visualizzare il testo. Ad esempio <FONT FACE="arial"> questo è il font arial </FONT><BR> <FONT FACE="courier"> questo è il font courier </FONT><BR> <FONT FACE="times new roman"> questo è il font times new roman </FONT><BR> 27 Corso html- lez. 2 Contenuto di una pagina html <FONT FACE="verdana"> questo è il font verdana </FONT><BR> <FONT FACE="book antiqua"> questo è il book antiqua </FONT><BR> <FONT FACE="algerian"> questo è il font algerian </FONT><BR> <FONT FACE="eras bold itc"> questo è il font eras bold itc </FONT><BR> <FONT FACE="castellar"> questo è il font castellar </FONT><BR> /http://www.teresaventrone.it/didattica/corsohtml/esempi/tipofont.htm Attributo SIZE L’attributo SIZE consente di determinare la dimensione del carattere. A tale attributo si possono assegnare valori compresi fra 1 e 7. Esempio <FONT FACE="arial" SIZE=1> dimensione del font 1 </FONT><BR> <FONT FACE="arial" SIZE=2> dimensione del font 2 </FONT><BR> <FONT FACE="arial" SIZE=3> dimensione del font 3 </FONT><BR> <FONT FACE="arial" SIZE=4> dimensione del font 4 </FONT><BR> <FONT FACE="arial" SIZE=5> dimensione del font 5 </FONT><BR> <FONT FACE="arial" SIZE=6> dimensione del font 6 </FONT><BR> <FONT FACE="arial" SIZE=7> dimensione del font 7 </FONT><BR> /http://www.teresaventrone.it/didattica/corsohtml/esempi/dimensionefont.htm 28 Corso html- lez. 2 Contenuto di una pagina html Colore del carattere Con l’attributo color possiamo cambiare il colore del carattere con la stessa tecnica vista per l’attributo text del tag body. Naturalmente in questo caso possiamo fare in modo che il colore scelto non venga attribuito a tutta la pagina web ma soltanto ad una sua parte. Vediamo il seguente esempio <FONT FACE="arial" SIZE=7 color="yellow"> colore giallo <FONT FACE="arial" SIZE=7 color="green"> colore verde </FONT><BR> <FONT FACE="arial" SIZE=7 color="maroon"> colore marrone <FONT FACE="arial" SIZE=7 color="blue"> colore blu <FONT FACE="arial" SIZE=7 color="red"> colore rosso </FONT><BR> </FONT><BR> </FONT><BR> </FONT><BR> <FONT FACE="arial" SIZE=7 color="#24cc0a"> colore casuale con codice numerico </FONT><BR> <FONT FACE="arial" SIZE=7 color="#ffcc0a"> colore casuale con codice numerico </FONT><BR> <FONT FACE="arial" SIZE=7 color="#f4ccaa"> colore casuale con codice numerico </FONT><BR> /http://www.teresaventrone.it/didattica/corsohtml/esempi/colorefont.htm 29 Corso html- lez. 2 Contenuto di una pagina html Testo scorrevole Con il tag marquee possiamo creare un testo scorrevole. All'interno del tag <marquee> possono essere aggiunti i seguenti attributi: loop=n indica il numero di volte in cui avverrà dello scorrimento. Ponendo loop=-1 lo scorrimento avviene all’infinito behavior= indica il funzionamento del marquee: scroll (impostazione predefinita). Il testo scorre senza fermarsi per poi riapparire fino a quando non sono stati terminati i giri (loop) stabiliti. A questo punto scompare. slide Una volta terminati i giri (loop) stabiliti, il testo si ferma o a destra dello schermo, o a sinistra, a seconda della direzione di scorrimento. Alternate Il testo rimbalza da una parte all'altra dello schermo. direction= indica il verso di scorrimento: left (impostazione predefinita): verso sinistra right: verso destra up: dal basso verso l'alto down: dall'alto verso il basso scrolldelay=n indica il numero di millisecondi fra ciascuno dei successivi spostamenti del testo. scrollamount=n indica di quanti pixel si deve spostare ogni volta il testo. bgcolor=colore il marquee scorre su uno sfondo del colore prescelto title="messaggio" Viene visualizzato un breve messaggio di teso se si passa con il mouse sopra l'area occupata dal marquee,: funziona come l'attributo "alt" per le immagini" align= Il marquee si allinea rispetto al testo che lo circonda top in alto middle centrato bottom in basso height= indica l'altezza del marquee. Può essere espressa in pixel o in percentuale width= indica la larghezza del marquee. Può essere espressa in pixel o in percentuale hspace=n horizontal-space: distanza del marquee in orizzontale dal testo o dal margine verticale della pagina web (come per le immagini) vspace=n vertical-space: distanza del marquee in verticale dal testo o dal margine orizzontale della pagina web (come per le immagini) . 30 Corso html- lez. 2 Contenuto di una pagina html Nel seguente esempio <marquee loop=-1 bgcolor="red" height="100" hspace="150" scrollamount="30" behavior="alternate">PROVA</MARQUEE> Creiamo un testo scorrevole all’infinito, su un background rosso, alto 100 pixel, distante dai margini verticali 150 pixel, che avanza di 30 pixel alla volta, e scorre alternativamente da sinistra a destra e da destra a sinistra. /http://www.teresaventrone.it/didattica/corsohtml/esempi/marquee.htm In questo tutorial on-line potete provare interattivamente tutti gli attributi http://www.webfract.it/GUIDA/tuto4.htm Con il tag marquee si può far scorrere anche un’immagine. Ad esempio <marquee loop=-1 bgcolor="white" height="100" hspace="150" scrollamount="30" behavior="alternate"><img src="esempio1/Senza nome.bmp"></MARQUEE> fara’ oscillare l’immagine seguente fra i limiti imposti dall’attributo hspace 31 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/marquee2.htm I titoli Per evidenziare titoli nel testo si può usare il tag Hn (H sta per header). n è un numero che può assumere i valori da 1 a 6. più n è piccolo più grandi saranno le dimensioni del titolo. Esempio <H1>esempio con il tag h1</H1> <H2>esempio con il tag h2</H2> <H3>esempio con il tag h3</H3> <H4>esempio con il tag h4</H4> <H5>esempio con il tag h5</H5> <H6>esempio con il tag h6</H6> 32 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/titolo.htm Un ulteriore effetto per mettere in evidenza una parte di una pagina web si può ottenere mediante il tag HR il quale consente di inserire delle righe orizzontali nella pagina con diverse caratteristiche. Vi è anzitutto l’attributo ALIGN per allineare la riga a sinistra, al centro o a destra. Poi vi è l’attributo WIDTH che determina la larghezza orizzontale della barra e che può essere espresso in pixel o in percentuale rispetto alla dimensione orizzontale della pagina. L’attributo SIZE consente di determinare lo spessore della riga sempre in pixel o in percentuale. L’attributo COLOR determina il colore della barra e infine l’attributo NOSHADE elimina l’effetto tridimensionale che per default accompagna la barra. Ad esempio <H1 ALIGN="center">Titolo dell'esempio</H1> <HR ALIGN="center" WIDTH="50%" SIZE="10" COLOR="red"> <center> testo sotto la barra 33 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/barra.htm Le immagini Abbiamo già accennato alla possibilità di inserire immagini in una pagina web. I formati delle immagini utilizzabili in una pagina web sono - Gif - JPG - PNG Per inserire un’immagine in una pagina web si utilizza il tag IMG. Il codice è il seguente <IMG SRC=”percorso del file immagine/nome del file immagine”> Ad esempio <IMG SRC="esempio1/ritratto.jpg"> /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine1.htm 34 Corso html- lez. 2 Contenuto di una pagina html Si ha l’attributo BORDER che consente di dare un bordo all’immagine il cui spessore è espresso in pixel. Ad esempio <IMG SRC="esempio1/ritratto.jpg" BORDER=10> /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine2.htm L’attributo WIDTH e l’attributo HEIGHT consentono di determinare le dimensioni dell’immagine e possono essere espressi in percentuale rispetto alle dimensioni della pagina. Ad esempio <IMG SRC="esempio1/ritratto.jpg" BORDER=10 WIDTH=80% HEIGHT=70%> 35 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine3.htm L’attributo ALT consente di definire un commento che è utilizzabile in due casi. Nel primo caso sostituisce l’immagine quando questa non viene caricata. Consideriamo il seguente esempio <IMG SRC="esempio1/ritrato.jpg" BORDER=10 WIDTH=80% HEIGHT=70% ALT="Alessandro Manzoni"> in cui abbiamo scritto in maniera errata il nome dell’immagine per cui il browser non sarà in grado di caricare l’immagine. L’effetto che otterremo sarà 36 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine4.htm L’altro caso è quello in cui con il mouse si passa sull’immagine: in tal caso il commento apparirà in corrispondenza del passaggio del mouse sull’immagine. /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine5.htm 37 Corso html- lez. 2 Contenuto di una pagina html Vi è poi l’attributo ALIGN per gestire l’allineamento dell’immagine. Esso può assumere il valore left in modo che il testo si disponga a destra dell’immagine /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine6.htm Right in modo che il testo si disponga a sinistra dell’immagine /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine7.htm AbsBottom in cui il testo si dispone alla base dell’immagine /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine8.htm 38 Corso html- lez. 2 Contenuto di una pagina html Abbiamo poi AbsMiddle con cui il testo si dispone in modo che l’immagine sia al centro senza incorniciarla /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine9.htm Con TextTop il testo si dispone sopra l’immagine senza incorniciarla /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine10.htm Con Bottom o Baseline l’immagine si dispone in modo che il testo venga incorniciato partendo dalla base 39 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine11.htm /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine12.htm Con Middle l’immagine si dispone in modo che il testo venga disposto al cento 40 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine13.htm Infine con Top l’immagine si dispone in modo che il testo appaia in alto 41 Corso html- lez. 2 Contenuto di una pagina html /http://www.teresaventrone.it/didattica/corsohtml/esempi/immagine14.htm Lo stile delle barre di scorrimento Possiamo cambiare anche l’aspetto delle barre di scorrimento orizzontale e verticale o scrollbar utilizzando l’attributo STYLE del tag BODY Innanzitutto con la proprietà SCROLLBAR-FACE-COLOR possiamo cambiare il colore del blocco scorrevole o SCROLLBOX sulla barra di scorrimento. Ad esempio con <BODY STYLE="SCROLLBAR-FACE-COLOR=yellow"> Otteniamo /http://www.teresaventrone.it/didattica/corsohtml/esempi/facecolor.htm 42 Corso html- lez. 2 Contenuto di una pagina html Analogamente con SCROLLBAR-TRACK-COLOR possiamo cambiare il colore del binario in cui scorre la scrollbox. Ad esempio con <BODY STYLE="SCROLLBAR-FACE-COLOR=yellow; SCROLLBAR-TRACK-COLOR=red"> otteniamo /http://www.teresaventrone.it/didattica/corsohtml/esempi/trackcolor.htm Come si può notare dal precedente esempio, se utilizziamo solo il FACE-Color anche il track assume lo stesso colore della scrollbox. 43 Inoltre le varie proprietà dell’attributo Corso html- lez. 2 Contenuto di una pagina html STYLE vanno separate da un punto e virgola. In maniera analoga SCROLLBAR-ARROWCOLOR consente di modificare il colore delle frecce all’interno dei pulsanti della barra. SCROLLBAR-HIGHLIGHT-COLOR controlla il colore dell’effetto perimetrale dei blocchi delle barre di scorrimento e così via. 44
Scarica
