docI FOGTI DI STITE IN TINTA Creare una pagina HTML
download 
Reclamo Transcript
I FOGTI DI STITE IN TINTA Creare una pagina HTML
I CSS (CascadingStyle Sheets o fogli di stile) sono un insieme di comandi per definire la formattazione di documenti HTML. I CSS fintroduzione del CSS si è resa necessarìa per separare i contenuti dalla ne e per permellere una programmazione più chiara e fucile da utilizzare, sia ps aurori delle pagine HTML sia per gli utenti. Dovendo realizzare un sito che richiede svariate pagìne, puo essere utile caratteristiche estetiche comuni a tutte le pagine: per esempio stabiliamo a quale miglia deve apparcenere il font, se il testo deve essere nero su sfondo bianco altre tinte, di quali colori devono essere i link ecc. Se, dopo avere sviluppato il s accorgiamo che un'impostazìone dovrebbe essere modificata dovremmo alla modifrca di tume le pagine: infa.ti se abbiamo stabilito lo sfondo ricorrendo tributo bgcolor del tag <body> dovremo modificare la tripletta esadecimale di singolo documenro del sito. [uso dei CSS evirerà rutto questo lavoro in quanro mene di separare icontenuti daìla presentazione. Un foglio di stile conciene una di regole che stabiliscono come le informazioni fornite attraverso il linguaggio devono 1. 3. I re modi differenri di ìmplementare ifogli di stile: defrnire regole di stile a livello del singolo tag (fogli di stile in linea); inserire le regole dirertamente nell'intesrazìone del documento HTML co§ applicarle direrramente solo a esso (fogli di stile incorporati); racchiudere tutte le regole relative allo stiìe dì un documento in un file da collegare al frle HTML al quale si riferiscono (fogli di stile esterni). Ci sono 2. essere visualizzate. FOGTI DI STITE IN TINTA quando si ha la necessità che lo stile sia relativo al blocco che stiamo trattandq senza che questo vada a influire su altre parti stesso documento o pagina Web. Un modo per applicare i CSS all'HTML è l'attributo style dell'HTML. Per definire che una pagina dovrà avere lo sfondo rosso possiamo scrivere così: Si usano i fogli di stile in linea Creare una pagina HTML (CSS1.html) contenete il codice riportato a lato (aggiungere anche il blocco <span>...</span> riportato nella pagina seguente) <html> <head> <title>Esempio</tìtìe> <,/head> <body style="background-color: #FFOOOO;"> <p>Ouesta &egnave; una pagina rossa</p> </body> <,/html> tulto il documento. <div> </span> </div>, <span> farlo si utilizzano itag che hanno la funzione È possibile impostare lo stile solo per un blocco e non per conrenitore. Il primo rag è consigliato per lunghi blocchi di tesrq mentre il sec per brevi frasi. è consigliato SEZIONE D. INFORMAZION] IN RETÈ -412- . ed amo un esempio: <span style="font-size:'1 Bpx; font-family: arial ; color : ned"> ; Ouesto testo ha colore rosso <,/span> background: white"> - q uesto modo è staro impostato lo stile del solo testo com preso rra i rag < span > e <lspan> e non per tutto il documento. ìn partico are è stata indicara corne gran:ezza del carattere (t'ont-size) 18 pixel, come tipo di cararrere (t'ontjomjly) il classico -.r'ial e come colore (color) tl rosso. ll risultato ortenuto è il seguenre: Questo testo ha colore rosso ]uesto sisrema di stile è certamenre funzionante ma non rispondente alle pecuarità tipiche dei CSS. Assegnare stili alle singole marcarure, infatti, non risponde ai :- teri di separazione rra stile e conrenuri tipici dei CSS. È consigliabi e servirsi deì ':gidi stile in linea esclusivamenre per piccoli e circoscrirti ritocchi e non per la ;:ruttura generale di un website. IL PROBLEMA Cteare una pagina HTML contenente 1a prima terzina dell'lnÌerno. La pdma rlga è scdtta con caratteri grandi 16 punti, con lont Verdana, colore rosso e sfondo azzurro, 1a seconda riga è scdtta con caratteri grandi l4 punti, con font Atial, colore blu e sfondo verde, 1a terza è scritta con caratted grandi 12 punti, con font Times New Roman e colore giallo e sfondo violetto. Creare una pagina HTML (CSS2.html) contenete il codice riportato nell'esempio LA CODIFICA <html> <head> <title> divina commedia - lnfenno Canto 1</title> </dead> <body> <div style="color:ned; background:#A1E2FF:fontjamily:verdana;font-size:,1 6pt,,> Nel mezzo del cammin di nostna uiLa</div> <div style="colon:blue; backgr-ound:#OOAOOO;font-family:arial;font-size:14pL"> mi nitnovai pen una selva oscuna</div> <div style="color: yellow; background:#8O8OFF; font-family: Times New Floman; font-size: 1 2pt">ché la diritta via era smarrita. </div> </hody> </hhml> UESECUZIONE Nel mezzo del ca min di nostra vit P ROG ETTAR E -413 - UN SITO WEB
