Gli stili. Lo stile si può applicare in quattro modi diversi ad un elemento HTML: I. Fuori tag La sintassi per lo stile fuori tag è la seguente:
|
|
|
- Benedetta Fiori
- 5 anni fa
- Visualizzazioni
Transcript
1 Gli stili Lo strumento degli stili sta piano piano soppiantando tutta una serie di attributi non solo per la formattazione del testo ma anche per l'aspetto estetico di tutti gli elementi di HTML, dalle immagini alle tabelle. HTML è stato pensato alle origini come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento. Per questo obiettivo, ovvero arricchire l'aspetto visuale ed estetico di una pagina, lo strumento designato sono appunto i CSS (Cascading Style Sheets - Fogli di stile a cascata). Lo scopo è separare il contenuto dalla presentazione: i CSS sono nati per modificare lo stile di elementi strutturali e non vanno intesi come un linguaggio grafico. Per queste cose esistono Flash o Photoshop. Lo stile si può applicare in quattro modi diversi ad un elemento HTML: I. fuori tag (tag-less style): un qualsiasi elemento di testo può assumere lo stile che vogliamo. Si usa il tag <span> ; II. stile in linea (inline style) si cambia lo stile di tutto un tag (ad esempio una tabella o un paragrafo); si usa specificare style come attributo del tag; III. a livello di documento (document level style): cambia tutti i tag o una parte di essi in tutto il documento; viene specificato all'interno dell'head e richiamato quando si usano i tag; IV. come foglio di stile (CSS: cascading Style Sheet): si raccolgono tutte le specifiche dello stile in un file esterno che viene collegato al documento HTML con un riferimento di tipo <link>. I. Fuori tag La sintassi per lo stile fuori tag è la seguente: <span style="font-family:garamond,serif; font-size:26pt; font-weight:800; color:green; "> sto cambiando font, colore </span> a qualche parola dello stesso paragrafo! Questo esempio mostra come sia possibile cambiare un font per una frase per poi tornare al font di prima. E' possibile anche cambiare il size oppure il solo colore della scritta oppure la grossezza. Le cose da osservare nel codice sono due. Come valore di style (attributo del tag span) si possono dichiarare più regole di stile. Esse vanno separate dal punto e virgola. I due punti si usano invece per introdurre il valore della proprietà da impostare. Maggiori dettagli sulla sintassi saranno visti in seguito. II. In linea Si dichiara lo stile come attributo di un tag: <p style= font-family:arial,helvetica; font-style:italic > Questo paragrafo intero è in Arial (o Helvetica) corsivo.</p>
2 III. A livello di documento I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l'elemento style. La dichiarazione va posta all'interno della sezione <head>. Ad es. per cambiare lo stile relativo ai paragrafi scriveremo: <head> <style type= text/css > p { font-family: Garamond; font-size: 26pt; } </style> <head> Se vogliamo cambiare lo stile solo ad alcuni paragrafi useremo il meccanismo delle classi (spiegato in seguito). Definiremo allora una classe eleganza : <head> <style type= text/css > p.eleganza { font-family: Garamond; font-size: 26pt; } </style> <head> Per applicare tale stile ad un paragrafo si dichiara la sua appartenenza alla classe "eleganza": <p class="eleganza"> paragrafo in Garamond a 26 punti! </p> Si possono definire nuovi stili per tutti i tag standard. IV. Foglio di stile Si riporta lo stile in un file esterno, ad es. nel file stile.css. Supponiamo di dichiarare lo stile dell'esempio precedente: p { } font-family:garamond; font-size:26pt; Come prima cosa dovremo scrivere la dichiarazione dello stile in un file stile.css. Poi, all'interno del documento HTML, nella intestazione (ossia nell head), dichiareremo la relazione con il foglio di stile: <head>... <link rel="stylesheet" type="text/css" href="stile.css">... </head> A questo punto tutti i paragrafi saranno formattati secondo lo stile da noi definito.
3 Analogamente a prima possiamo anche definire delle classi (che ci permettono di modificare solo alcuni elementi in un file html). Per cui i) in un file stile_2.css scriveremo la dichiarazione della classe p.eleganza { font-family: Garamond; font-size: 26pt; } ii) inseriremo il file stile_2.css nell head del file html; iii) dichiareremo il tag di classe allo stesso modo dello stile a livello di documento: <p class="eleganza"> </p> L'elemento <link> presenta una serie di attributi: 1. rel: descrive il tipo di relazione tra il documento e il file collegato. E' obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. 2. href: serve a definire l'url assoluto o relativo del foglio di stile. E' obbligatorio. 3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è obbligatorio. 4. media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale. Sintassi degli stili Un foglio di stile non è altro che un insieme di regole, accompagnate, volendo, da qualche nota di commento. Cos'è e com'è fatta una regola? L'illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da due blocchi principali: il selettore il blocco delle dichiarazioni Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <h1>: lo sfondo sarà rosso, il colore del testo bianco. Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia:
4 proprietà valore La proprietà definisce un aspetto dell'elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Se in un blocco si definiscono più dichiarazioni esse vanno separate dal punto e virgola. Abbiamo detto che una regola CSS si applica ad un selettore: parte del documento soggetto ad una specifica regola. Tutti gli elementi di HTML sono dei selettori. È possibile nei CSS raggruppare diversi elementi al fine di semplificare il codice. Gli elementi raggruppati vanno separati da una virgola. Ad es: h1, h2, h3 {background: red;} Id e classi: due selettori speciali In HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id. Tuttavia dichiarare questi attributi a prescindere dai CSS non ha alcun senso e non modifica in alcun modo la presentazione della pagina. Infatti se assegniamo ad un paragrafo un attributo class="testorosso": <p class="testorosso">...</p> non accadrà nulla: il problema è che il valore dell'attributo class deve trovare una corrispondenza in un foglio di stile. Dobbiamo quindi definire un CSS e creare un selettore di tipo classe al quale assegniamo il nome testorosso: <style type="text/css">.testorosso { </style> } font: 12px arial, Helvetica; color: #FF0000; Il testo del nostro paragrafo sarà formattato secondo i nostri desideri: testo rosso, carattere arial. dimensione di 12px. Come si vede dall esempio per definire una classe si usa far precedere il nome da un semplice punto:.nome_della_classe Questa è la sintassi di base. Un selettore classe così definito può essere applicato a tutti gli elementi di un documento HTML. Esiste un secondo tipo di sintassi: <elemento>.nome_della_classe
5 Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola: p.testorosso {color: red;} lo stile verrà applicato solo ai paragrafi che presentino l'attributo class="testorosso". Lo stesso meccanismo è valido per i selettori di tipo id, ma con una sola fondamentale differenza: l'attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l'id "testorosso", non potrò più usare questo valore nel resto della pagina. Di conseguenza, l'id #testorosso dichiarato nel CSS trasformerà solo quel paragrafo specifico. Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo. In un documento potrò avere senza problemi questa situazione: <p class="testorosso">...</p> <div class="testorosso">...</div> <table class="testorosso">...</table> <p class="testorosso">...</p> La classe.testorosso presente nel CSS formatterà allo stesso modo il testo del paragrafo, del div e della tabella. Non sarà invece possibile attribuire a più elementi l id #testorosso, per cui una situazione del genere non sarà possibile: <p id="testorosso">...</p> <div id="testorosso">...</div> La sintassi di un selettore ID è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #: Con questa regola: #nome_id #blu {color: blue;} assegniamo il colore blue all'elemento che presenta questa definizione: <h1 id="blu">...</h1> Le pseudo-classi Una pseudo-classe non definisce un elemento ma un particolare stato di quest'ultimo: imposta uno stile per un elemento al verificarsi di certe condizioni. Ad es. la regola a:link {color: blue;} vuol dire: i collegamenti ipertestuali (<a>) che non siano stati visitati (:link) avranno il colore blue. Da qui risulta più chiaro il concetto espresso all'inizio: la pseudo-classe :link definisce lo stile
6 (colore blue) solo in una determinata situazione, ovvero quando il link non è stato attivato. Appena ciò dovesse avvenire, il testo non sarà più blu, perchè la condizione originaria è venuta meno. Torniamo alla sintassi. La pseudo-classe (tutte iniziano con i due punti) segue senza spazi l'elemento. Subito dopo si crea nel modo consueto il blocco delle dichiarazioni: selettore:pseudo-classe {proprietà: valore;} Ereditarietà Secondo questo meccanismo le impostazioni stilistiche applicate ad un elemento ricadono anche sui suoi discendenti. Almeno fino a quando, per un elemento discendente, non si imposti esplicitamente un valore diverso per quella proprietà. Ad es. se impostiamo il colore rosso per il testo (color: red;) a livello dell'elemento body tutti gli altri elementi suoi discendenti erediteranno questa impostazione. Ma se ad un certo punto definiamo nel codice del CSS un selettore con la proprietà color: black; l'ereditarietà viene spezzata. Non tutte le proprietà sono ereditate. In genere non lo sono quelle attinenti la formattazione del box model: margini, bordi, padding, background le più importanti. Il motivo è semplice. Ereditare un bordo è semplicemente senza senso. Se ne imposto uno, diciamo, per un paragrafo sarebbe assurdo che un elemento <a> o un testo in grassetto vengano circondati dallo stesso bordo! Questa è la rappresentazione strutturale di un file HTML secondo il modello ad albero: Il box model Una pagina HTML non è altro che un insieme di box rettangolari, che si tratti di elementi blocco (<p>, <h1>, ) o di elementi inline non fa differenza. Tutto l'insieme di regole che gestisce l'aspetto visuale degli elementi blocco viene in genere riferito al cosiddetto box model. Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS. La figura qui sotto mostra visivamente tali componenti:
7 Partendo dall'interno abbiamo: l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width. Quelle verticali con height. il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding. il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto. il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti. Il box model è governato da una serie di regole di base concernenti la definizione di un box e il suo rapporto con gli altri elementi. 1. Larghezza del box Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box. La prima è data dal valore della proprietà width. La seconda è data da questa somma: margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro 2. Larghezza ed elemento contenitore Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. 3. Uso del valore auto Solo per tre proprietà è possibile impostare il valore auto: margini, altezza e larghezza (width). L'effetto è quello di lasciar calcolare al browser l'ammontare di ciascuna di esse in base alla risoluzione dello schermo e alle dimensioni della finestra.
8 Solo i margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza. Unità di misura I valori di una proprietà non vanno mai messi tra virgolette; uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola (esempio: "Times New Roman"). Quando si usano valori numerici con unità di misura, non bisogna lasciare spazio tra numero e sigla dell'unità. E' corretto quindi scrivere 15px oppure 5em. Le unità di misura usate per definire dimensioni, spazi o distanze sono: in (inches - pollici): classica misura del sistema metrico americano; cm (centimetri); pt (points - punti): unità di misura tipografica destinata essenzialmente a definire la dimensione dei font; em (em-height): unità di misura spesso usata nei CSS. 1 em equivale all'altezza media di un carattere per un dato font. E' un unità di misura relativa. px (pixels): unità di misura ideale su monitor. E' quella più usata e facile da comprendere. I valori possono essere espressi in percentuale: il valore percentuale è da considerare sempre relativo rispetto ad un altro valore. Si esprime con un valore numerico seguito (senza spazi) dal segno di percentuale: 60%. Gestione del colore Una delle proprietà più importanti è indubbiamente color. Quali sono i possibili valori per tale proprietà? Come si definiscono i vari colori? Ecco un elenco dei possibili modi per definire un colore. parole chiave: Si tratta di 16 parole che definiscono i colori della palette VGA standard di Windows: black navy blue maroon purple green red teal fuchsia olive gray lime aqua silver yellow white codici esadecimali: le prime due lettere (o numeri) corrispondono ai valori per il colore rosso (RED), la seconda coppia fa riferimento al verde (GREEN), l'ultima al blue (BLUE). Ad es. #CC0000. Un altro modo per rappresentare i colori è quello di usare per i tre elementi base del sistema RGB una lista di valori in percentuale separati da una virgola. Per indicare il nero useremo, ad esempio rgb(0%, 0%, 0%) mentre per il bianco rgb(100%, 100%, 100%).
9 Si definiscono i valori di rosso, verde e blue con tre valori compresi, rispettivamente, tra 0 e 255. Sistema ben noto a chi usa programmi di grafica. Il range è l'equivalente decimale di quello esadecimale 00-FF visto in precedenza. Anche qui, i tre valori vanno separati da una virgola. Per il nero: rgb(0, 0, 0,) La proprietà color si applica a tutti gli elementi ed è ereditata. Significa che se si imposta il colore per un elemento esso sarà ereditato da tutti gli elementi discendenti per cui non si definisca esplicitamente un altro colore. La sintassi è semplice: selettore { color: <valore> } Gestione dello sfondo Ecco la lista delle proprietà riguardanti lo sfondo, applicabili a tutti gli elementi (ciascuna di essa definisce un solo, particolare aspetto relativo allo sfondo di un elemento): 1. background-color: definisce il colore di sfondo di un elemento. Proprietà non ereditata. La sintassi è: selettore {background-color: <valore>;} o: p { background-color: #FFFFFF; } 2. background-image: definisce l'url di un'immagine da usare come sfondo di un elemento. Proprietà non ereditata. La sintassi è: selettore { background-image: url(<valore>); } o: body {background-image: url(sfondo.gif); } 3. background-repeat: definisce la direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata. La sintassi è: selettore {background-repeat: <valore>;} : repeat ( l'immagine viene ripetuta in orizzontale e verticale. E' il comportamento standard); repeat-x (l'immagine viene ripetuta solo in orizzontale); repeat-y (l'immagine viene ripetuta solo in verticale); norepeat (l'immagine non viene ripetuta). o: body { background-image: url(sfondo.gif); background-repeat: repeat; } 4. background-attachment si imposta il comportamento dell'immagine di sfondo rispetto all'elemento cui è applicata e all'intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa. Proprietà non ereditata. La sintassi è: selettore {background-attachment: <valore>;}
10 : scroll (l'immagine scorre con il resto del documento quando si fa lo scrolling della pagina); fixed (l'immagine rimane fissa mentre il documento scorre) o: body { background-image: url(back_400.gif); background-attachment: fixed } 5. background-position Definisce il punto in cui verrà piazzata un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Proprietà non ereditata. La sintassi è: selettore {background-position: <valore> o <valori>;} : i valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull'asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi: i) con valori in percentuale; ii) con valori espressi con unità di misura; iii) con le parole chiave top, left, bottom, right o: body { background-image: url(back_400.gif); background-repeat: no-repeat; background-position: 50px 50px; } 6. background: possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo. Sintassi selettore {background: color image repeat attachment position;} Gestione del testo: alcune proprietà Uno sguardo su alcune proprietà riguardanti il testo. 1. font-family: serve a impostare il tipo di carattere di una qualunque porzione di testo. Si applica a tutti gli elementi ed è ereditata. Sintassi: selettore {font-family: <font 1>, <font2>,...,<famiglia generica>;} E possibile definire dei font alternativi. o: div {font-family: Georgia, "Times New Roman", serif;} 2. font-size: definisce le dimensioni. Applicabile a tutti gli elementi ed ereditata. Sintassi: selettore { font-size: <valore>; }
11 I valori delle dimensioni del testo possono essere espressi in vari modi. I diversi sistemi si possono distinguere a seconda che definiscano le dimensioni in senso assoluto o relativo. Sono valori assoluti: le sette parole chiave xx-small, x-small, small, medium, large, x-large, xxlarge quelli espressi con le seguenti unità di misura: pixel (px), centimetri (cm), millimetri (mm), punti (pt). Sono valori relativi: le parole chiave smaller e larger quelli espressi in em (em-height) quelli espressi in percentuale o: p {font-size: 12px;} div.titolo {font-size: 50%;} 3. font-weight: Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata.. Sintassi: : selettore {font-weight: <valore>;} valori numerici ordinati in senso crescente (dal leggero al pesante) normal. Valore di default. E' l'aspetto normale del font ed equivale al valore 400 bold. Il carattere acquista l'aspetto che definiamo in genere grassetto. Equivale a 700 bolder. Misura relativa. Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell'elemento parente lighter. Misura relativa. Il testo sarà più leggero di quello dell'elemento parente o: p {font-weight: 900;} 4. font-style: imposta le caratteristiche del testo. Sintassi: : selettore {font-style: <valore>;} normal: il testo mantiene il suo aspetto normale italic: formatta il testo in corsivo oblique: praticamente simile a italic o: p {font-style: italic;} 5. text-align: imposta l'allineamento del testo. Sintassi: : selettore { text-align: <valore>; } left. Allinea il testo a sinistra right. Allinea il testo a destra
12 center. Centra il testo justify. Giustifica il testo o: p {font-style: italic;} Proprietà del box model Un primo concetto fondamentale: in genere l'altezza di un elemento è determinata dal suo contenuto. 1. height: definisce la distanza tra il bordo superiore e quello inferiore di un elemento. Non è ereditata. Sintassi: selettore {height: <valore>;} un valore numerico con unità di misura. un valore in percentuale. Il valore in percentuale si riferisce sempre all'altezza del blocco contenitore, purché esso abbia un'altezza esplicitamente dichiarata. Diversamente, la percentuale viene interpretata come auto. auto. L'altezza sarà quella determinata dal contenuto. div {height: 250px;} p.blocco {height: 50%;} 2. width: definisce la larghezza dell area del contenuto. Le dimensioni orizzontali di un elemento NON sono definite semplicemente dalla proprietà width. Si deve distinguere tra la larghezza effettiva di un elemento (i pixel di spazio che occupa sulla pagina) e la larghezza dell'area del contenuto. La prima è data dalla somma di questi valori: margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro mentre la seconda è impostata tramite la proprietà width. Sintassi: selettore {height: <valore>;} auto. Valore di default. Se non si impostano margini, bordi e padding la larghezza dell'elemento sarà uguale all'area del contenuto dell'elemento contenitore. un valore numerico con unità di misura. un valore in percentuale. La larghezza sarà calcolata rispetto a quella dell'elemento contenitore.
13 p {width: 90px;} div.box {width: 50%;} Possiamo infatti definire il margine come la distanza tra il bordo di un elemento e gli elementi adiacenti. Sono cinque le proprietà con cui è possibile definire un margine. Quattro di esse sono singole e impostano la distanza per ciascun lato del box. L'ultima, margin, definisce con una sola dichiarazione tutte le impostazioni per i quattro lati. 3. margin-bottom: definisce la distanza tra il lato inferiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata. Sintassi selettore {margin-bottom: <valore>;} un valore numerico con unità di misura. un valore in percentuale. Il valore è calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore. auto. E' quasi sempre corrispondente a 0. p {margin-bottom: 10px;} div.box {margin-bottom: 20%;} 4. margin-left: definisce la distanza lato sinistro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.. Sintassi selettore {margin-left: <valore>;} un valore numerico con unità di misura. un valore in percentuale. auto. h1 {margin-left: 10%;} img {margin-left: 20px;} 5. margin-top: definisce la distanza tra il lato superiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata. Sintassi selettore {margin-top: <valore>;}
14 un valore numerico con unità di misura. un valore in percentuale. auto. p.box {margin-top: 10%;} img {margin-top: 20px;} 6. margin-right: definisce la distanza tra il lato destro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata. Sintassi selettore {margin-rigth: <valore>;} un valore numerico con unità di misura. un valore in percentuale. auto. h1 {margin-right: 10%;} img {margin-right: 20px;} 7. margin: è possibile specificare i valori per tutti e quattro i lati di un elemento. Si applica a tutti gli elementi e non è ereditata. Sintassi selettore {margin: top right bottom left} un valore numerico con unità di misura. un valore in percentuale. auto: la distanza sarà automaticamente calcolata rispetto alla larghezza dell'elemento contenitore. Un uso interessante del valore auto per i lati sinistro e destro è quello che consente di centrare in tal modo un elemento rispetto alla pagina o al box contenitore. div {margin: 10px 15px 10px 20px;} Un altro modo per creare spazio intorno ad un elemento è quello di usare il padding. Quando si usa il padding, lo spazio di distanza viene inserito al di qua dei bordi dell'elemento e non all'esterno. La cosa risulta evidente se usate un colore di sfondo per l'elemento diverso da quello della pagina. Nel caso del padding, lo spazio inserito avrà proprio il colore di sfondo dell'elemento, a differenza dei margini. Un'analogia rispetto ai margini sta nella sintassi. Anche qui quattro proprietà singole per i lati e una a sintassi abbreviata (padding).
15 8. padding-bottom: imposta l'ampiezza del padding sul lato inferiore di un elemento. Si applica a tutti gli elementi e non è ereditata. Sintassi selettore {padding-bottom: <valore>;} un valore numerico con unità di misura. Il valore è espresso in termini assoluti. un valore in percentuale. Il valore è calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore. p.box {padding-bottom: 10px;} 9. padding-left: imposta l'ampiezza del padding sul lato sinistro di un elemento. Si applica a tutti gli elementi e non è ereditata Sintassi selettore {padding-left: <valore>;} un valore numerico con unità di misura. un valore in percentuale. p {padding-left: 10%;} 10. padding-top: imposta l'ampiezza del padding sul lato superiore di un elemento. Si applica a tutti gli elementi e non è ereditata Sintassi selettore {padding-top: <valore>;} un valore numerico con unità di misura. un valore in percentuale. h1 {padding-top: 10px;} 11. padding-right: imposta l'ampiezza del padding sul lato destro di un elemento. Si applica a tutti gli elementi e non è ereditata. Sintassi selettore {padding-rigth: <valore>;} un valore numerico con unità di misura.
16 un valore in percentuale. p.box {padding-right: 10px;} 12. padding: proprietà a sintassi abbreviata. Serve a impostare i valori del padding per tutti e quattro i lati di un elemento. Sintassi selettore {padding: top right bottom left} un elenco di valori numerici con unità di misura. un elenco di valori in percentuale. p {padding: 10px 20px;} Per definire le proprietà dei bordi si possono usare proprietà a sintassi singola o a sintassi abbreviata. Le prime definiscono singoli aspetti di ciascuno dei quattro bordi. Le seconde consentono di riunire in una sola regola le diverse impostazioni. Ad es. per definire lo stile di un singolo bordo Sintassi (con proprietà singole) selettore { border-<lato>-color: <valore>; border-<lato>-style: <valore>; border-<lato>-width: <valore>; } Sintassi (abbreviata) selettore { border-<lato>: <valore width> <valore style> <valore color>; } In entrambi gli esempi di sintassi sostituite a <lato> uno degli indicatori dei quattro lati: top, right, bottom o left. Si possono definire per il bordo tre aspetti: 1. il colore (color) 2. lo stile (style) 3. lo spessore (width) I valori possibili per il colore sono: un qualsiasi colore la parola chiave inherit
17 Il colore può essere espresso in uno qualunque dei modi visti precedentemente. Se non si imposta un valore specifico, il colore sarà quello di primo piano impostato con la proprietà color. Lo stile di un bordo può invece essere espresso con una delle seguenti parole chiave none (l'elemento non presenta alcun bordo e lo spessore equivale a 0 ); hidden (equivalente a none); dotted; dashed; solid; double;. groove; ridge; inset; outset Infine abbiamo lo spessore. Esso può essere modificato secondo i seguenti valori: un valore numerico con unità di misura thin. Bordo sottile. medium. Bordo di medio spessore. thick. Bordo di largo spessore. div { border-left-color: black; border-left-style: solid; border-left-width: 1px; } MA molto più comodo scrivere così: div {border-left: 1px solid black;} L'ultima proprietà a sintassi abbreviata è border. Con essa possiamo definire con una sola regola le impostazioni per i quattro bordi. Il suo uso è però limitato a un solo caso, peraltro molto comune: che i quattro bordi abbiano tutti lo stesso colore, lo stesso stile e lo stesso spessore. Sintassi selettore {border: <valore spessore> <valore stile> <valore colore>;} div {border: 2px solid black;} Posizionamento degli elementi position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata. Sintassi <selettore> {position: <valore>;} static: e il valore di default
18 absolute: il box dell'elemento viene rimosso dal flusso del documento ed è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom. Il posizionamento avviene sempre rispetto al box contenitore dell'elemento. fixed: usando questo valore il box dell'elemento viene, come per absolute, sottratto al normale flusso del documento. La differenza sta nel fatto che per fixed il box contenitore è la finestra principale del borwser. relative: l'elemento viene posizionato relativamente al suo box contenitore. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l'ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore. Passiamo ora all'analisi delle proprietà che concretamente definiscono dove un elemento posizionato va a collocarsi, dal momento che che con position stabiliamo solo il come. 1. Per gli elementi posizionati con absolute o fixed definisce la distanza verticale rispetto al bordo superiore dell'elemento contenitore. Per gli elementi posizionati con relative stabilisce invece l'ammontare dello spostamento rispetto al lato superiore della posizione originaria. In questo caso, usando valori positivi il box viene spostato sotto, mentre con valori negativi lo spostamento avviene verso l'alto. Sintassi <selettore> {top: <valore>;} un valore numerico con unità di misura un valore in percentuale La percentuale è relativa all'altezza dell'elemento contenitore. auto div {top: 10px;} p {top: 10%;} 2. left Per gli elementi con posizione assoluta o fissa definisce la distanza dal bordo sinistro del box contenitore. Per quelli con posizione relativa stabilisce lo spostamento rispetto al lato sinistro della posizione originaria. positivi spostano l'elemento verso destra, valori negativi verso sinistra. Sintassi <selettore> {left: <valore>;} un valore numerico con unità di misura un valore in percentuale La percentuale è relativa alla larghezza dell'elemento contenitore. auto
19 div {left: 30px;} 3. bottom: Per i box con posizione assoluta o fissa definisce la distanza dal bordo inferiore dell'elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato inferiore della posizione originaria. Sintassi <selettore> {bottom: valore>} un valore numerico con unità di misura un valore in percentuale auto div {bottom: 50px;} 4. Per i box con posizione assoluta o fissa definisce la distanza dal bordo destro dell'elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato destro della posizione originaria. Sintassi <selettore> {right: valore;} un valore numerico con unità di misura un valore in percentuale auto div {right: 50px;} Per quantpo riguarda la definizione della posizione, va detto che essa è in ogni caso definita da due coordinate. In genere si usano le proprietà top e left.
20
Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà
HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento
CSS. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green }
1 2 Foglio di stile Cascading Style Sheets CSS Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Regola: selezionatore
HTML. Hyper Text Markup Language
HTML Hyper Text Markup Language IL WEB Le componenti principali del web sono: HTML: definizione del contenuto delle pagine CSS: definizione dell aspetto delle pagine Javascript: definizione del comportamento
(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE
Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA
Primi passi con HTML. Il documento HTML
Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.
Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini
STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)
Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole
Fogli di stile CSS I fogli di stile permettono la separazione della forma dal contenuto. Il concetto di foglio di stile è quello di creare un documento separato che contenga tutte le informazioni necessarie
Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:
Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:
CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile
CSS Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html CSS: Cascading Style Sheet! Tecnologia W3C per la definizione dello stile di una pagina web! Contenuto e
1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.
Sommario CSS 1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.... 1 1.1 Fogli di stile "in linea"... 2 1.2 Fogli di stile "interni"... 2 1.3 Fogli di stile "esterni"... 2 1.4 Che tipo di
Corso di Web Programming
Corso di Web Programming 5. Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica
- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.
I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come
HTML per tu+ Chiara Pere+
HTML per tu+ Chiara Pere+ Cos é L HTML è il linguaggio con cui potete indicare come i vari elemen7 saranno dispos7 in una pagina Web. L estensione del file è.html e verrà visualizzato corre?amente trascinandolo
Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1
Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta
Introduzione. Guida ai fogli di stile (Standard CSS 2) Demis Ballis <demis@dimi.uniud.it>
Introduzione Guida ai fogli di stile (Standard CSS 2) Demis Ballis Questo documento è liberamente tratto dalla guida ai CSS di base di Cesare Lamanna, disponibile nella sua versione
Comandi principali del linguaggio HTML (Hyper Text Markup Language)
Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per
Basi di Dati. Programmazione e gestione di sistemi telematici
Basi di Dati. Programmazione e gestione di sistemi telematici Coordinatore: Prof. Paolo Nesi Docenti: Prof. Paolo Nesi Dr.sa Michela Paolucci Dr. Emanuele Bellini Introduzione CSS Cascading Style Sheets
Il linguaggio HTML - Nozioni di base (2)
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@dti.unimi.it TAG strutturali visti fino ad ora -
Applicazioni Web 2013/14
Applicazioni Web 2013/14 Lezione 5: Cascading Style Sheets Matteo Vaccari http://matteo.vaccari.name/ matteo.vaccari@uninsubria.it (cc) Matteo Vaccari. Published in Italy. Attribution Non commercial Share
Tutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Terza lezione) Unitre Pavia a.a.
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Terza lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 La struttura del testo in html L'HTML fornisce una serie
Introduzione ai fogli di stile CSS
CdL in Ingegneria Elettronica e Informatica Modulo di Fondamenti di Informatica D Introduzione ai fogli di stile CSS Ing. Maurizio Vincini a.a. 2000/2001 Programmazione CGI - 1 Fogli di stile CSS Il Web
UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.
UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui
APPUNTI DI HTML (QUINTA LEZIONE)
APPUNTI DI HTML (QUINTA LEZIONE) Cascade style sheets II Web, ai tempi della sua nascita, doveva preoccuparsi maggiormente dei contenuti che diffondeva, piuttosto che allo stile con il quale esso venivano
HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...
HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento
2.3 Cenni sui fogli di stile CSS per XML
Fondamenti di Informatica Sistemi di Elaborazione delle Informazioni Informatica Applicata 2.3 Cenni sui fogli di stile CSS per XML Antonella Poggi Anno Accademico 2012-2013 DIPARTIMENTO DI SCIENZE DOCUMENTARIE
HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento
HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare
Come creare un modulo
Come creare un modulo Aggiungi moduli al tuo sito per registrare le informazioni dei tuoi clienti su un database, o per riceverle via e- mail. Trascina un widget Modulo sulla tua pagina Nel pannello Widget
I PRINCIPALI TAG DEL LINGUAGGIO HTML
Struttura generica di una pagina Web: I PRINCIPALI TAG DEL LINGUAGGIO HTML Titolo
HTML HyperText Markup Language:
HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto
Cimini Simonelli - Testa
WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire
XSL: extensible Stylesheet Language
XSL: extensible Stylesheet Language XSL è un insieme di tre linguaggi che forniscono gli strumenti per l elaborazione e la presentazione di documenti XML in maniera molto flessibile. I tre linguaggi devono
Versione 1.1 20 marzo 2008 Riccardo Bresciani
The bookest class Versione 1.1 20 marzo 2008 La classe bookest è un estensione della classe standard book, classe alla quale si appoggia e che viene caricata con le opzioni di default. Le estensioni fornite
Coder Dojo Tutorial 3
Coder Dojo Tutorial 3 Complimenti ancora, son certo che hai già imparato molte più cose di quel che pensi! Tempo per fare qualcosa di un po più divertente, come mettere insieme un foglio dedicato a definire
Informatica di Base. Programma Lezioni
Informatica di Base Lezione III Il linguaggio HTML Hyper Text Markup Language 1 Informatica di Base Programma Lezioni 1 26 ottobre Introduzione Sistema binario e formato dei dati 2 2 novembre Numeri negativi
01. Conoscere l area di lavoro
01. Conoscere l area di lavoro Caratteristiche dell interfaccia Cambiare vista e dividere le viste Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze
I Tag dell html. Parte quarta
I Tag dell html Parte quarta Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag:
Macchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II
Macchine per l elaborazione dell informazion e Sistemi di Elaborazione delle Informazioni Informatica II Ing. Mauro Iacono Seconda Università degli Studi di Napoli Facoltà di Studi Politici e per l Alta
APPUNTI DI HTML (SECONDA LEZIONE)
APPUNTI DI HTML (SECONDA LEZIONE) 1. TITOLI, PARAGRAFI, BLOCCHI DI TESTO E CONTENITORI. E utile scrivere il testo che vogliamo inserire nella nostra pagina html all interno di appositi tag. La pagina sarà
APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE
ESEMPIO FILE.CSS PER REALIZZARE MODELLO SITO WEB: www.modellinirobotanno80.altervista.org /*questo codice va aggiunto al css principale per far si che tutti i browser possano riconoscere correttamente
CSS font-size: pt, px o em? Che unità di misura utilizzare?
CSS font-size: pt, px o em? Che unità di misura utilizzare? In linea di massima possiamo dire che ogni unità di misura ammessa nei CSS ha una destinazione d'uso precisa: pt I punti (pt) sono l'unità di
Utilizzo dei CSS: regole
Tutorial per siti scolastici accessibili con editor web open source Utilizzo dei CSS: regole Adotta un template CSS - Regole pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte
Grafica: creare pulsanti con i css.
Grafica: creare pulsanti con i css. L'articolo originale in lingua inglese Graphics: making buttons with css proviene dal sito eosdev.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.
Prof. Pagani Corrado HTML
Prof. Pagani Corrado HTML IPERTESTI E MULTIMEDIALITÀ Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave sensibili (link). Può essere visto come una rete; i documenti
HTML. http://www.w3schools.com/html/default.asp
HTML http://www.w3schools.com/html/default.asp HTML Cosa è l'html? HTML è un linguaggio per descrivere le pagine web. HTML è l'acronimo di H yper T ext M arkup L anguage HTML è un markup language Un linguaggio
Il linguaggio HTML - Parte 4
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 4 Dott. Chiara Braghin braghin@dti.unimi.it HTML - I Riferimenti Ipertestuali Il piatto forte di tutto
Indice generale. Prefazione alla prima edizione...xvii. Introduzione...xix. Capitolo 1 Gli standard e i CSS... 1
Indice generale Prefazione alla prima edizione...xvii Introduzione...xix Organizzazione dell opera...xx I capitoli...xx Le appendici...xxi Materiale online...xxi A chi si rivolge il libro...xxi Prerequisiti...xxii
Architettura a tre livelli. Lo scenario e l ambiente. HTML - Hyper Text Markup Language. Enrico Cavalli. Anno Accademico 2012-2013
HTML - Hyper Text Markup Language Enrico Cavalli Anno Accademico 2012-2013 Lo scenario e l ambiente Architettura a tre livelli 1 Server 6 Web 2 5 3 Php 4 Database Server DB 1. Il browser richiede una pagina
Introduzione al Linguaggio HTML
Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la
VBA è un linguaggio di scripting derivato da Visual Basic, da cui prende il nome. Come ogni linguaggio ha le sue regole.
Excel VBA VBA Visual Basic for Application VBA è un linguaggio di scripting derivato da Visual Basic, da cui prende il nome. Come ogni linguaggio ha le sue regole. 2 Prima di iniziare. Che cos è una variabile?
INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW
1 INTRODUZIONE AL LINGUAGGIO HTML Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML 3 Architettura
HTML, XHTML, CSS. cosa c è dietro al web. Informatica Applicata Prof.Emanuela Zilio
HTML, XHTML, CSS cosa c è dietro al web 1 HTML cos è NON è un linguaggio di programmazione ma un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno
Prof. Renato SICA (ITIS "A. Meucci" - Castelfidardo (AN))
HTML, HyperText Markup Language Prof. Renato SICA (ITIS "A. Meucci" - Castelfidardo (AN)) Scopo della lezione Mostrare, nella pratica, il concetto di ipertesto. Fornire, in pratica, il concetto di interprete.
Il linguaggio HTML - Parte 2
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza
Pagine HTML. Concetti chiave. G.1 Tag. Basi del linguaggio HTML Realizzare semplici pagine HTML
Pagine HTML G Concetti chiave Basi del linguaggio HTML Realizzare semplici pagine HTML G.1 Tag Accludiamo questa appendice al fine di dare al lettore non esperto della materia gli elementi di base necessari
La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.
Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,
Che cos'è la risoluzione video
Che cos'è la risoluzione video 1 Vediamo che cos'è e come funziona il monitor del pc, che cosa sono la risoluzione video, i pixel, il dot pitch e il tasso di refresh. 1. I monitor Come per le televisioni,
Marziana Monfardini 2004-2005 lezioni di word
1 2 3 4 5 TABUlAZIONI, RIENTRI, ELENCHI...IN BREVE PER IMPOSTARE UNA TABULAZIONE... Posizionarsi nella riga in cui si vuole inserire una tabulazione. Selezionare il tipo di tabulazione desiderato sul pulsante
Ipertesti. Informatica. Internet e WEB WEB. Come funziona il WWW. Come funziona il WWW. Lezione III. Il linguaggio HTML Hyper Text Murkup Language
Informatica Lezione III Il linguaggio HTML Hyper Text Murkup Language Ipertesti Sono testi che possono essere letti sia in modo sequenziale sia eseguendo salti da un paragrafo ad un altro Sono il soggetto
NOZIONI BASE DI HTML
NOZIONI BASE DI HTML Aggiornato al 06 marzo 2006 Ermes ZANNONI (ermes@zannoni.to.it) (http://www.zannoni.to.it) Indice : 1. Introduzione 2. Tag di default 3. Formattazione del testo 3.1 Dimensione del
Laboratorio di Programmazione Distribuita. Introduzione a HTML. Dott. Marco Bianchi Università degli Studi di L'Aquila
Laboratorio di Programmazione Distribuita Introduzione a HTML Dott. Marco Bianchi Università degli Studi di L'Aquila bianchi@di.univaq.it http://di.univaq.it/~bianchi Introduzione a HTML Introduzione a
Guida pratica alla creazione di pagine web
Guida pratica alla creazione di pagine web Dopo aver creato una pagina html, muoviamo i primi passi nell'uso del codice. Naturalmente non è necessario conoscere il codice a memoria per creare pagine internet,
La disposizione estetica della lettera commerciale
La disposizione estetica della lettera commerciale Gli elementi costitutivi della lettera commerciale vengono disposti sul foglio secondo stili diversi: ogni a- zienda, infatti, caratterizza la sua immagine
Esercitazioni di HTML
Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:
Importazione di files di domande in formato "Aiken"
Questo estratto, è stato attinto dalla documentazione di Moodle. Importazione di files di domande in formato "Aiken" Il formato Aiken costituisce un modo molto semplice per creare domande a scelta multipla
LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONI DI HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... FORMATTARE IL CARATTERE Per formattare titoli interni del documento web possiamo utilizzare i tag , ,...,
Guida Html. </P> L'annidamento ci permette quindi di attribuire formattazioni successive al testo che stiamo inserendo.
Struttura di un tag Guida Html Abbiamo detto che all'interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della
Realizzare il layout di un sito web senza utilizzare frame e tabelle
Realizzare il layout di un sito web senza utilizzare frame e tabelle Questa guida descrive in maniera semplice e essenziale i passi necessari alla realizzazione di una pagina web strutturata in maniera
3.5.1 PREPARAZ1ONE I documenti che si possono creare con la stampa unione sono: lettere, messaggi di posta elettronica, o etichette.
3.5 STAMPA UNIONE Le funzioni della stampa unione (o stampa in serie) permettono di collegare un documento principale con un elenco di nominativi e indirizzi, creando così tanti esemplari uguali nel contenuto,
APPUNTI DI HTML (TERZA LEZIONE)
Il web è costituito non da testi ma da ipertesti. APPUNTI DI HTML (TERZA LEZIONE) I link ci permettono di passare da un testo all altro. I link sono formati da due componenti: IL CONTENUTO "nasconde" il
Grafici e Pagina web
Grafici e Pagina web Grafici Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro. Quando si crea un grafico ogni riga
A cosa servono. Classificazione degli elementi
Dietro il semplice acronimo CSS (Cascading Style Sheets - Fogli di stile a cascata) si nasconde uno dei fondamentali linguaggi standard del W3C. La sua storia cammina su binari paralleli rispetto a quelli
CAPITOLO V. DATABASE: Il modello relazionale
CAPITOLO V DATABASE: Il modello relazionale Il modello relazionale offre una rappresentazione matematica dei dati basata sul concetto di relazione normalizzata. I principi del modello relazionale furono
Elementi di web design (parte I): introduzione all HTML
Elementi di web design (parte I): introduzione all HTML Luca Casotti E' necessario conoscere: Filesystem: cos'è un file e cos'è una cartella. Differenze fra tipi di file (sui sistemi windows: le estensioni
[Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina
[Dimensionare la pagina-creare le tabelle-formattare le tabelle-formattare la pagina Creare cartelle per salvare il lavoro] Per iniziare dobbiamo imparare a gestire quello spazio bianco che diverrà la
HTML Tutorial HTML By A.C. Neve 1
HTML Tutorial HTML By A.C. Neve 1 Il linguaggio HTML (Hyper Text Markup Language) è il più diffuso linguaggio per la creazione di pagine WEB. La creazione di un documento HTML si effettua con un qualsiasi
Guida html e css base
Sommario Guida html e css base...1 Introduzione...1 Formattare il testo...4 Organizzare il testo in paragrafi...5 Creare le sezioni come in un libro...6 Creare gli elenchi...8 Inserire immagini e collegamenti...11
caratteristiche del documento </head>
HTML: sintassi caratteristiche del documento documento 21 HTML: titolo del documento
Guida alla realizzazione di un layout fluido
Guida alla realizzazione di un layout fluido I siti Web possono essere realizzati secondo due diversi schemi di layout: layout fissi e fluidi. La differenza tra i due tipi di layout consiste in una diversa
, utilizzando il tasto destro
HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione (sono linguaggi di programmazione il C, il C++, il Pascal, il Java,
La codifica delle immagini
Analogamente possiamo codificare le immagini a colori. In questo caso si tratta di individuare un certo numero di sfumature, gradazioni di colore differenti e di codificare ognuna mediante un'opportuna
Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti
EUROPEAN COMPUTER DRIVING LICENCE WEBSTARTER - Versione 1.5 Copyright 2009 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta
Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1)
Cenni storici sul web (Internet) Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1) Web significa letteralmente ragnatela Avviato nel 1989 (Tim Berners-Lee) come
LEZIONE 1 HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONE 1 HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... La struttura di una pagina web intestazione Qui si dichiara il titolo del documento
HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto
HTML5 Nel seguito troverai una breve introduzione agli elementi essenziali di HTML 5, non si tratta di una guida completa. Se conosci una precedente versione di HTML forse noterai alcune differenze. La
Lezione 18 Esercitazione InDesign
Lezione 18 Esercitazione InDesign Pasquale Savino ISTI - CNR Creazione e impostazione di un nuovo documento 2 Sommario In questa esercitazione si vedrà come creare e organizzare un nuovo documento Cosa
HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi>
FRAME HTML 6 I frame Danno la possibilità di creare finestre multiple all'interno della finestra del browser Si riesce a suddividere la pagina in più sezioni indipendenti, ma che si possono influenzare
WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &#"#2
! "#$" %% $"$&&"'& $%%& $'&( ) *+&, ) && *+ ( -./ WWW (World Wide Web)!& ( # (&%#(!(&&( %% (*0 #,% )0#1( &#"#2 Siti Web pagine Web: documenti pronti per essere registrati su un server Internet residenza
jt - joetex - percorsi didattici
jt - joetex - percorsi didattici Corso dreamweaver lezione 1 Sommario 1. Creare un sito in locale 2. creare la prima pagina Creare un sito in locale Un sito va creato tutto all'interno di un'unica cartella.
Creare classi e ID per applicare gli stili, pagina 93. Applicare gli stili a collegamenti ipertestuali, pagina 96
Panoramica del capitolo Creare classi e ID per applicare gli stili, pagina 93 Applicare gli stili a collegamenti ipertestuali, pagina 96 Creare e collegare fogli stile esterni, pagina 98 6 Introduzione
CSS e fogli di stile. A cura del prof. Gennaro Cavazza
CSS e fogli di stile A cura del prof. Gennaro Cavazza 1 Introduzione Dietro il semplice acronimo CSS (Cascading Style Sheets - Fogli di stile a cascata) si nasconde uno dei fondamentali linguaggi standard
VADEMECUM SITO INTERNET POGGIO TORRIANA
VADEMECUM SITO INTERNET POGGIO TORRIANA INDICE: 1 HOMEPAGE 1.1 Struttura dell'homepage 1.2 Caricamento news/comunicati stampa in homepage 1.3 Caricare/pubblicare immagini 1.4 Caricare i banner 1.5 Banner
Maria Grazia Ottaviani. informatica, comunicazione e multimedialità
Maria Grazia Ottaviani informatica, comunicazione e multimedialità Unità digitale 1 Ambiente HTML Introduzione Oltre ai linguaggi di programmazione esistono anche linguaggi detti markup. Sono linguaggi
HTML (Hyper Text Markup Language) CSS (Cascading Style Sheets) HTML: problema sugli stili. HTML: stili. La soluzione: CSS.
CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale
Il linguaggio HTML - Nozioni di base
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghin braghin@dti.unimi.it What is HTML? HTML (HyperText Markup Language)
PROTOCOLLO ITACA PUGLIA 2011 - RESIDENZIALE Istruzioni d'uso del software Versione 1.0
PROTOCOLLO ITACA PUGLIA 2011 - RESIDENZIALE Istruzioni d'uso del software Versione 1.0 1/10 Indice 1 Premessa...3 2 Fogli di calcolo del framework...5 2.1 Foglio "Progetto"...5 2.2 Fogli "ATTESTATO" e
Introduzione al linguaggio HTML. A. Lorenzi - Università di Bergamo - Facoltà di Economia 1
Introduzione al linguaggio HTML A. Lorenzi - Università di Bergamo - Facoltà di Economia 1 Richiami introduttivi (1) sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno
2. CLASSIFICAZIONE DEGLI ELEMENTI...7
Materiale concesso da HTML.it: http://www.html.it Tutti i capitoli sono a cura di : Cesare Lamanna Rispetto al corso originale presente sul sito sono stati tolti alcuni paragrafi (sul sito denominati lezione)