<html>
<head>
<title>Il mio primoo sito web</title>
</head>
<body>
<p>Is used for paragraphs.</p>
<b>This text must be bold.</b>
<h1>CARMINE</h1>
<h2>CARMINE</h2>
<h3>CARMINE</h3>
<h4>CARMINE</h4>
<h5>CARMINE</h5>
<h6>CARMINE</h6>
<br/>
<h1>Un titolo</h1>
<p>testo, testo, testo, testo</p>
<h2>Un sottotitolo</h2>
<p>testo, testo, testo, teso</p>
<br/>
<ul>
<li>Carmine</li>
<li>Carmine</li>
</ul>
<br/>
<a href="http://www.istcompazzanox.it/">Vai al sito della scuola</a>
<br/>
<br/>
<br/>
<h1>PROSSIMO ARGOMENTO</h1>
<p>Gli Attributi di un Elemento</p>
<br/>
<ul>
<li>Colore</li>
<li>Immagini</li>
</ul>
<br/>
<br/>
<p>Colore Rosso</p>
<h2 style="background-color:#ff0000;">Mettiamo un po di rosso</h2>
<br/>
<br/>
<p>Il Logo della Nostra Scuola</p>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" />
<br/>
<br/>
<h2 style="background-color:Green;">Mettiamo un po di verde</h2>
<br/>
<br/>
<br/>
<p>Il Logo della Nostra Scuola con LINK</p>
<a href="http://www.istcompazzanox.it/"> <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" /></a>
<br/>
<br/>
<br/>
<p>Come usare l'attributo "alt"</p>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" alt="Logo Scuola IC Azzano X" />
<br/>
<br/>
<br/>
<p>Come usare l'attributo "title"</p>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" title="Logo Scuola IC Azzano X" />
<br/>
<br/>
<br/>
<p>Come usare l'attributo "width e height"</p>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="50" />
<br/>
<br/>
<br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="50" height="200" />
<br/>
<br/>
<br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="100" />
<br/>
<br/>
<br/><br/>
<br/>
<br/>
</body>
</html>
martedì 29 novembre 2016
OPS - Inizio progetto per IC Azzano X
L'Istituto Comprensivo "Novella Cantarutti" di Azzano Decimo aderisce al progetto "Olimpiadi di Problem Solving" promosso dal Ministero dell’Istruzione, dell’Università e della Ricerca 2016/2017.
La Competizione di Informatica, rivolta agli alunni della scuola dell’obbligo,
La Competizione di Informatica, rivolta agli alunni della scuola dell’obbligo,
- favorire lo sviluppo delle competenze di problem solving e valorizzare le eccellenze presenti nelle scuole;
- sollecitare la diffusione dei contenuti scientifici culturali dell’informatica come strumento di formazione (metacompetenze) nei processi educativi;
- sottolineare l’importanza del pensiero algoritmico come strategia generale per affrontare i problemi, metodo per ottenere la soluzione e linguaggio universale per comunicare con gli altri.
- Il problem solving rimanda a processi cognitivi in cui prevale il pensare, il ragionare, il fare ipotesi, attività che richiedono l’impiego di abilità relative alla gestione di informazioni strutturate più che l’applicazione di procedimenti meccanici volti all’esecuzione esclusiva di calcoli. Tali attività favoriscono l’acquisizione di competenze trasversali ai diversi contesti disciplinari riconosciute ormai essenziali per un inserimento attivo e consapevole dei giovani nella società.
- Il problem solving, quindi, non è concepito come una disciplina, ma come applicazione di conoscenze e abilità cui si ricorre nell’affrontare situazioni problematiche in contesti reali. In particolare, riguarda la comprensione della natura del problema, l’identificazione degli elementi che lo compongono e le loro interrelazioni, la scelta di rappresentazioni adeguate nella risoluzione di situazioni problematiche, la riflessione sulla soluzione individuata e la sua efficace comunicazione.
- Le olimpiadi di problem solving intendono, inoltre, stimolare l’interesse a sviluppare le capacità richieste in tutte le iniziative attivate per la valorizzazione delle eccellenze.
Modalità di partecipazione
Le competizioni si articolano in tre fasi (istituto, regionale e nazionale) precedute da un periodo di allenamento e si svolgono:
- a squadre costituite da quattro allievi, fra cui si raccomanda che vengano rappresentati entrambi i sessi;
- Le prove hanno la durata di 90 minuti e consistono nella risoluzione di un insieme di problemi scelti dal Comitato organizzatore.
- La competizione è gestita da un sistema automatico sia per la distribuzione dei testi delle prove sia per la raccolta dei risultati e la loro correzione. L’adozione di questo sistema impone vincoli alla formulazione dei quesiti e delle relative risposte.
Seguiranno indicazioni sui tempi e metodi per esercitarsi con gli allenamenti online prima di effettuare la prova interna (uguale per tutti gli Istituti Partecipanti) prevista per il giorno 12 dicembre 2016.
Le competizioni del progetto sono divise in tre fasi:
1) Istituto;
2) Regionale;
3) Nazionale.
La Squadra che vince la selezione interna accede alla fase regionale (mese di aprile).
Accede invece, alla finalissima nazionale a squadre per ciascun livello scolastico la migliore squadra classificata nella selezione regionale, purché con punteggio superiore alla media nazionale.
Accede alla finalissima individuale, per i due livelli previsti, il primo classificato di ogni regione, purché con punteggio superiore alla media nazionale.
La finalissima a Cesena è prevista per il mese di maggio.
Le competizioni del progetto sono divise in tre fasi:
1) Istituto;
2) Regionale;
3) Nazionale.
La Squadra che vince la selezione interna accede alla fase regionale (mese di aprile).
Accede invece, alla finalissima nazionale a squadre per ciascun livello scolastico la migliore squadra classificata nella selezione regionale, purché con punteggio superiore alla media nazionale.
Accede alla finalissima individuale, per i due livelli previsti, il primo classificato di ogni regione, purché con punteggio superiore alla media nazionale.
La finalissima a Cesena è prevista per il mese di maggio.
Le informazioni sullo svolgimento delle diverse fasi delle competizioni vengono comunicate tempestivamente sul sito http://www.olimpiadiproblemsolving.it.
HTML - Inserire Imagini
Immagini
Tutto quello che ti serve è un elemento:Esempio 1:
<img src="nome-file.jpg" alt="nome-file" />
Quello che devi fare, per prima cosa, è dire al tuo browser che vuoi inserire un'immagine (
img) e
dove trovarla (src, sta per "source",
cioè sorgente).Nota come l'elemento
img venga aperto
e chiuso nello stesso tag. Come il tag <br
/>, non è legato a nessun pezzo di testo."nome-file.jpg" è il nome del file immagine che vuoi inserire nella tua pagina. ".jpg" è il tipo di file dell'immagine. Proprio come l'estensione ".htm" mostra che quel file è un documento HTML,".jpg" dice al browser che quel file è un'immagine.
________________________________________________________________________
Approfondimento
Cose importanti da sapere quando si usano le immagini.
Ci sono tre tipi diversi di file immagine che possono essere inseriti nelle tue pagine:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Le immagini GIF generalmente sono migliori per i grafici e
i disegni, mentre le immaginni JPEG sono migliori
per le fotografie. Questo per due ragioni principali: primo,
le immagini GIF possono avere solo 256 colori, mentre le immagini
JPEG sono formate da milioni di colori e secondo, il formato GIF è
migliore per comprimere immagini semplici, mentre il formato JPEG è
stato ottimizzato per immagini più complesse. Migliore è la
compressione, più piccola sarà la dimensione del file immagine,e
più veloce il caricamento sulla tua pagina. Come probabilmente sai
già dall'esperienza, le pagine "pesanti" senza motivazione
possono annoiare pesantemente un visitatore.
In passato i formati GIF e JPEG sono stati i due formati immagine dominanti. Negli ultimi anni il formato PNG è diventato sempre più popolare (soprattutto a spese del formato GIF). Il formato PNG è fatto in modo da avere il meglio da entrambi i formati JPEG e GIF: milioni di colori e una compressione efficace.
_________________________________________________________________________
COSA devi fare
Primo, puoi inserire facilmente le immagini posizionate su un'altra cartella, o anche immagini posizionate su un altro sito web:
Esempio 2:
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" />
Esempio 4:
In passato i formati GIF e JPEG sono stati i due formati immagine dominanti. Negli ultimi anni il formato PNG è diventato sempre più popolare (soprattutto a spese del formato GIF). Il formato PNG è fatto in modo da avere il meglio da entrambi i formati JPEG e GIF: milioni di colori e una compressione efficace.
_________________________________________________________________________
COSA devi fare
Primo, puoi inserire facilmente le immagini posizionate su un'altra cartella, o anche immagini posizionate su un altro sito web:
Esempio 2:
Esempio 3:<img src="images/nome-file.gif" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" />
Le immagini inoltre, posso avere collegamenti ipertestuali (link):Esempio 4:
<a href="http://www.istcompazzanox.it/">
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" /></a>
------------------------------------------------------------------------------Altri Attributi per le immagini
L'attributo alt viene usato per fornire una descrizione alternativa di una immagine nel caso in cui,
per qualche ragione, l'immagine non viene visualizzata all'utente.
Questo attributo è particolarmente utile per utenti con disabilità visive, o se la pagina si carica molto lentamente.
Esempio 5:
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" alt="Logo Scuola IC Azzano X" />
Alcuni browser mostrano il testo dell'attributo alt in una piccola box di pop-up quando si posiziona il cursore del mouse sopra
l'immagine. Per favore nota che l'uso dell'attributo alt ha lo scopo odi fornire una descrizione alternativa dell'immagine.
Non dovrebbe quindi essere usato per creare messaggi speciali di pop-up dato che i non-vedenti sentiranno il messaggio senza sapere
niente dell'immagine.
L'attributo title invece, può essere usato per aggiungere informazioni all'immagine:
Esempio 6:
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" title="Logo Scuola IC Azzano X" />
Senza cliccare, prova a posizionare il cursore sopra l'immagine, vedrai il testo "Impara l'HTML su HTML.net" apparire in una
box di pop-up.
Altri due attributi importanti sono width e height:
Gli attributi width e height possono essere usati per impostare l'altezza e la larghezza di una
immagine. Per impostare l'altezza e la larghezza viene usato un valore in pixel.
Se non vengono impostate l'altezza e la larghezza, l'immagine verrà inserita con le sue dimensioni originali. Modificando altezza
e larghezza, invece, è possibile manipolare la dimensione della stessa immagine:
Esempio 8:
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="50" />
___________________________________________________________________________________
Approfondimento
I pixel sono l'unità di misura utilizzata per misurare la risoluzione degli schermi. (Gli schermi più comuni hanno una risoluzione di 1024x768 pixel). A differenza dei centimetri, i
pixel sono unità di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25
pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo
schermo a 1.5 centimetri.
Comunque vale la pena ricordare che la dimensione originale dell'immagine, in kilobyte, rimarrà la stessa. Quindi ci vorrà lo
stesso tempo di prima per caricare l'immagine, anche se questa volta sullo schermo appare più piccola. Quindi, non dovresti mai
diminuire la dimensione dell'immagine usando gli attributi width e height. Dovresti invece sempre ridimensionare l'immagine
direttamente da un programma per l'editing di immagini, in modo da rendere le tue pagine più leggere e veloci.
HTML - Gli Attributi - Il Link
Gli Attributi - Il Link
Collegamenti (link) tra le pagine.
- Un elemento semplice, con un solo attributo che ti permetterà di fare un link a qualsiasi cosa.
Qui c'è un esempio di come appare un link ad una pagina esterna al nostro sito:
Esempio 1:
<a href="http://www.istcompazzanox.it/">Questo è il link alla nostra scuola</a>
NOTA: La frase "Questo è il link a HTML.net" è il testo che viene mostrato sul browser come link.
Cosa significa "a href"?
L'elemento a è l'abbreviazione della parola inglese "anchor" (ancora), mentre l'attributo href sta per "hypertext reference" (cioè, riferimento ipertestuale), che specifica dove deve portare il link - tipicamente un indirizzo su Internet o un nome di un file.
L'indirizzo completo di un sito viene chiamato URL (Uniform Resource Locator).
Nota che "http://" deve essere sempre inclusa in una URL.
La frase "Questo è il link a HTML.net" è il testo che viene mostrato sul browser come link.
Ricordati di chiudere l'elemento con il tag di chiusura </a>.
--------------------------------------------------------------------------------------------
Link alle pagine interne di un sito
- Bisogno di specificare in dettagli l'intero indirizzo (URL) del documento.
Per esempio, se hai fatto due pagine (chiamiamole pagina1.htm e pagina2.htm) e le hai salvate nella stessa cartella.
Esempio 2:
<a href="pagina2.htm">Fai click qui per andare alla pagina 2</a>
Invece, se la pagina 2 è posizionata in una sottocartella (chiamata "sottocartella"), allora il link dovrebbe apparire come questo:
Esempio 3:
<a href="sottocartella/pagina2.htm">Fai click qui per andare alla pagina 2</a>
Al contrario, se il link è diretto dalla pagina 2 (nella sottocartella) alla pagina 1, si vedrà come segue:
Esempio 4:
<a href="../pagina1.htm">Un link alla pagina 1</a>
-----------------------------------------------------------------------------------------------
Link interni alla pagina
Puoi creare anche dei link interni alla stessa pagina - per esempio un sommario in cima alla pagina che punta a ciascuno capitolo sotto. Tutto quello che ti serve è utilizzare un utilissimo attributo chiamato id (identification, identificativo) e il simbolo "#".
Usa l'attributo id per marcare l'elemento che vuoi linkare. Per esempio:
<h1 id="heading1">Titolo 1</h1>
Adesso puoi creare un collegamento a quell'elemento usando "#" nell'attributo del link. La gratella "#" deve essere seguita dall' id del tag che vuoi linkare. Per esempio:
<a href="#heading1">Link a titolo 1</a>
Tutto sarà più chiaro con una pagina HTML di esempio:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link a titolo 1</a></p>
<p><a href="#heading2">Link a titolo 2</a></p>
<h1 id="heading1">titolo 1</h1>
<p>Testo testo testo testo</p>
<h1 id="heading2">titolo 2</h1>
<p>Testo testo testo testo</p>
</body>
</html>
------------------------------------------------------------------------------------------------
Link ad indirizzo mail
Esempio 6:
<a href="mailto:nobody@html.net">Manda una e-mail a nobody a HTML.net</a>
sul browser apparirà così:Manda una e-mail a nobody a HTML.net
L'unica differenza tra un link ad una e-mail e un link ad un file è che invece di digitare l'indirizzo di un documento, scriverai mailto: seguito dall'indirizzo di e-mail.
Quando viene fatto click sul link si aprirà il programma di posta elettronica con un nuovo messaggio vuoto e l'indirizzo di e-mail specificato.
Nota che questo funziona solo se sul tuo computer è stato istallato un programma di posta. Fai una prova!
-----------------------------------------------------------------------------------------------
Altri Attributi dei Link
Puoi anche mettere un title al tuo link:
Esempio 7:
<a href="http://www.html.net/" title="Visita HTML.net e impara l'HTML">HTML.net</a>
L'attributo title viene usato per inserire una breve descrizione al link. Se posizioni il cursore del mouse sopra il link - senza cliccare - vedrai apparire il testo "Visita HTML.net e impara l'HTML".
Collegamenti (link) tra le pagine.
- Un elemento semplice, con un solo attributo che ti permetterà di fare un link a qualsiasi cosa.
Qui c'è un esempio di come appare un link ad una pagina esterna al nostro sito:
Esempio 1:
<a href="http://www.istcompazzanox.it/">Questo è il link alla nostra scuola</a>
NOTA: La frase "Questo è il link a HTML.net" è il testo che viene mostrato sul browser come link.
Cosa significa "a href"?
L'elemento a è l'abbreviazione della parola inglese "anchor" (ancora), mentre l'attributo href sta per "hypertext reference" (cioè, riferimento ipertestuale), che specifica dove deve portare il link - tipicamente un indirizzo su Internet o un nome di un file.
L'indirizzo completo di un sito viene chiamato URL (Uniform Resource Locator).
Nota che "http://" deve essere sempre inclusa in una URL.
La frase "Questo è il link a HTML.net" è il testo che viene mostrato sul browser come link.
Ricordati di chiudere l'elemento con il tag di chiusura </a>.
Link alle pagine interne di un sito
- Bisogno di specificare in dettagli l'intero indirizzo (URL) del documento.
Per esempio, se hai fatto due pagine (chiamiamole pagina1.htm e pagina2.htm) e le hai salvate nella stessa cartella.
Esempio 2:
<a href="pagina2.htm">Fai click qui per andare alla pagina 2</a>
Invece, se la pagina 2 è posizionata in una sottocartella (chiamata "sottocartella"), allora il link dovrebbe apparire come questo:
Esempio 3:
<a href="sottocartella/pagina2.htm">Fai click qui per andare alla pagina 2</a>
Al contrario, se il link è diretto dalla pagina 2 (nella sottocartella) alla pagina 1, si vedrà come segue:
Esempio 4:
<a href="../pagina1.htm">Un link alla pagina 1</a>
-----------------------------------------------------------------------------------------------
Link interni alla pagina
Puoi creare anche dei link interni alla stessa pagina - per esempio un sommario in cima alla pagina che punta a ciascuno capitolo sotto. Tutto quello che ti serve è utilizzare un utilissimo attributo chiamato id (identification, identificativo) e il simbolo "#".
Usa l'attributo id per marcare l'elemento che vuoi linkare. Per esempio:
<h1 id="heading1">Titolo 1</h1>
Adesso puoi creare un collegamento a quell'elemento usando "#" nell'attributo del link. La gratella "#" deve essere seguita dall' id del tag che vuoi linkare. Per esempio:
<a href="#heading1">Link a titolo 1</a>
Tutto sarà più chiaro con una pagina HTML di esempio:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link a titolo 1</a></p>
<p><a href="#heading2">Link a titolo 2</a></p>
<h1 id="heading1">titolo 1</h1>
<p>Testo testo testo testo</p>
<h1 id="heading2">titolo 2</h1>
<p>Testo testo testo testo</p>
</body>
</html>
------------------------------------------------------------------------------------------------
Link ad indirizzo mail
Esempio 6:
<a href="mailto:nobody@html.net">Manda una e-mail a nobody a HTML.net</a>
sul browser apparirà così:Manda una e-mail a nobody a HTML.net
L'unica differenza tra un link ad una e-mail e un link ad un file è che invece di digitare l'indirizzo di un documento, scriverai mailto: seguito dall'indirizzo di e-mail.
Quando viene fatto click sul link si aprirà il programma di posta elettronica con un nuovo messaggio vuoto e l'indirizzo di e-mail specificato.
Nota che questo funziona solo se sul tuo computer è stato istallato un programma di posta. Fai una prova!
-----------------------------------------------------------------------------------------------
Altri Attributi dei Link
Puoi anche mettere un title al tuo link:
Esempio 7:
<a href="http://www.html.net/" title="Visita HTML.net e impara l'HTML">HTML.net</a>
L'attributo title viene usato per inserire una breve descrizione al link. Se posizioni il cursore del mouse sopra il link - senza cliccare - vedrai apparire il testo "Visita HTML.net e impara l'HTML".
HTML - Gli Attributi: Il Colore
Ricordo che i contenuti di questa lezione sono estratti da: http://it.html.net/tutorials/html/;
Gli Attributi: Il Colore
Il colore è considerato un Attributo nel linguaggio HTML, ovvero informazioni aggiuntive in un elemento.
Come abbiamo già verificato, gli elementi danno struttura ad un documento HTML e dicono al browser come vuoi che venga visualizzato il tuo sito web (per esempio, <br /> informa il browser che deve lasciare una linea vuota). In alcuni elementi si possono inserire informazioni aggiuntive. Queste informazioni aggiuntive quindi, vengono chiamate attributi.
Generalmente un elemento è formato da un tag iniziale con o senza uno o più attributi, del contenuto e un tag finale. Semplice no? Guarda la figura sotto.
L'attributo è contenuto nel tag iniziale, come esempio successivo.
Esempio 1:
<h2 style="background-color:#ff0000;">Mettiamo un po di rosso</h2>
Gli attributi vengono scritti sempre all'interno del tag di apertura e sono seguito da un segno di uguaglianza e dal dettaglio degli attributi tra apici. Il punto e virgola dopo gli attributi serve a separare i diversi comandi di stile. Torneremo su questo argomento più tardi.
---------------------------------------------------------------------------------------------------------
L'attributo usato nel precedente esempio si chiama style. Con l'attributo di stile puoi aggiungere un layout al tuo sito web. Per esempio un colore di sfondo rosso:
Esempio 2:
<html>
<head> </head>
<body style="background-color:#ff0000;"> </body>
</html>
Nota che alcuni tag e attributi usano l'ortografia degli USA, come per esempio color invece di colour. E' importante che usi la stessa ortografia che stiamo usando negli esempi di questo tutorial, altrimenti il browser non riuscirà ad interpretare il codice.
----------------------------------------------------------------------------------------------------------
Ogni colore è individuato dal suo proprio numero esadecimale. Vediamo un esempio:
White: #ffffff
Black: #000000 (zero)
Red: #ff0000
Blue: #0000ff
Green: #00ff00
Yellow: #ffff00
Un codice esadecimale per un colore è formato da una gratella (#) e da sei cifre o lettere.
-----------------------------------------------------------------------------------------------------------
Ci sono più di 1000 codici esadecimali e non è semplice capire la corrispondenza tra questi codici e uno specifico colore.
Per semplificare abbiamo una tabella dei 216 colori più utilizzati:
216 Tabella dei colori per il web.
Per la maggior parte dei colori puoi usare anche il nome inglese (white, black, red, blue, green e yellow).
Esempio 3:
<body style="background-color: red;">
NOTA: circa i colori supportati all'interno delle pagine web si faccia riferimento a questa tabella dei colori HTML
--------------------------------------------------------------------------------------------------------------
Ecco invece una tabella riassuntiva delle color keyword principali con relativi valori esadecimali (Hex) e RGB.
Oppure, VAI alla tabella interattiva:
http://fabrizio.zellini.org/tabella-interattiva-codici-e-nomi-dei-colori;
Gli Attributi: Il Colore
Il colore è considerato un Attributo nel linguaggio HTML, ovvero informazioni aggiuntive in un elemento.
Come abbiamo già verificato, gli elementi danno struttura ad un documento HTML e dicono al browser come vuoi che venga visualizzato il tuo sito web (per esempio, <br /> informa il browser che deve lasciare una linea vuota). In alcuni elementi si possono inserire informazioni aggiuntive. Queste informazioni aggiuntive quindi, vengono chiamate attributi.
Generalmente un elemento è formato da un tag iniziale con o senza uno o più attributi, del contenuto e un tag finale. Semplice no? Guarda la figura sotto.
L'attributo è contenuto nel tag iniziale, come esempio successivo.
Esempio 1:
<h2 style="background-color:#ff0000;">Mettiamo un po di rosso</h2>
Gli attributi vengono scritti sempre all'interno del tag di apertura e sono seguito da un segno di uguaglianza e dal dettaglio degli attributi tra apici. Il punto e virgola dopo gli attributi serve a separare i diversi comandi di stile. Torneremo su questo argomento più tardi.
---------------------------------------------------------------------------------------------------------
L'attributo usato nel precedente esempio si chiama style. Con l'attributo di stile puoi aggiungere un layout al tuo sito web. Per esempio un colore di sfondo rosso:
Esempio 2:
<html>
<head> </head>
<body style="background-color:#ff0000;"> </body>
</html>
Nota che alcuni tag e attributi usano l'ortografia degli USA, come per esempio color invece di colour. E' importante che usi la stessa ortografia che stiamo usando negli esempi di questo tutorial, altrimenti il browser non riuscirà ad interpretare il codice.
----------------------------------------------------------------------------------------------------------
Ogni colore è individuato dal suo proprio numero esadecimale. Vediamo un esempio:
White: #ffffff
Black: #000000 (zero)
Red: #ff0000
Blue: #0000ff
Green: #00ff00
Yellow: #ffff00
Un codice esadecimale per un colore è formato da una gratella (#) e da sei cifre o lettere.
-----------------------------------------------------------------------------------------------------------
Ci sono più di 1000 codici esadecimali e non è semplice capire la corrispondenza tra questi codici e uno specifico colore.
Per semplificare abbiamo una tabella dei 216 colori più utilizzati:
216 Tabella dei colori per il web.
Per la maggior parte dei colori puoi usare anche il nome inglese (white, black, red, blue, green e yellow).
Esempio 3:
<body style="background-color: red;">
NOTA: circa i colori supportati all'interno delle pagine web si faccia riferimento a questa tabella dei colori HTML
--------------------------------------------------------------------------------------------------------------
Ecco invece una tabella riassuntiva delle color keyword principali con relativi valori esadecimali (Hex) e RGB.
Oppure, VAI alla tabella interattiva:
http://fabrizio.zellini.org/tabella-interattiva-codici-e-nomi-dei-colori;
mercoledì 23 novembre 2016
HTML - Lez. 23/11/16
Qui il link utile per l'approfondimento alla lezione svolta in aula.
Fonte Tutorial: http://it.html.net/tutorials/html/;
Inserisco inoltre, l'esempio di elementi e tag che abbiamo imparato.
<html>
<head>
<title>Il mio primoo sito web</title>
</head>
<body>
<p>Is used for paragraphs.</p>
<b>This text must be bold.</b>
<h1>CARMINE</h1>
<h2>CARMINE</h2>
<h3>CARMINE</h3>
<h4>CARMINE</h4>
<h5>CARMINE</h5>
<h6>CARMINE</h6>
<br />
<br />
<h1>Un titolo</h1>
<p>testo, testo, testo, testo</p>
<h2>Un sottotitolo</h2>
<p>testo, testo, testo, teso</p>
<br />
<br />
<ul>
<li>Carmine</li>
<li>Carmine</li>
</ul>
<br />
<br />
<a href="http://www.istcompazzanox.it/">Vai al sito della scuola</a>
<br />
<br />
</body>
</html>
Ricordo la prassi da seguire:
- Copiare il codice e incollarlo in un semplice editor (software) di testo. Puoi utilizzare Notepad di Windows, oppure Pico (Linux) o TextEdit (Mac).
- "Salva con nome" con estensione .html (esempio "index.html") in una cartella a tua scelta.
- Il file salvato dovrebbe essere ora associato all'icona del browser predefinito, altrimenti clicca con tasto destro sul file e cambia le impostazioni di apertura nella finestra delle proprietà, scegliendo un browser a tua scelta (Internet Explorer, Opera, Mozilla, Safari, Firefox, Crome, ecc.).
Fonte Tutorial: http://it.html.net/tutorials/html/;
Inserisco inoltre, l'esempio di elementi e tag che abbiamo imparato.
<html>
<head>
<title>Il mio primoo sito web</title>
</head>
<body>
<p>Is used for paragraphs.</p>
<b>This text must be bold.</b>
<h1>CARMINE</h1>
<h2>CARMINE</h2>
<h3>CARMINE</h3>
<h4>CARMINE</h4>
<h5>CARMINE</h5>
<h6>CARMINE</h6>
<br />
<br />
<h1>Un titolo</h1>
<p>testo, testo, testo, testo</p>
<h2>Un sottotitolo</h2>
<p>testo, testo, testo, teso</p>
<br />
<br />
<ul>
<li>Carmine</li>
<li>Carmine</li>
</ul>
<br />
<br />
<a href="http://www.istcompazzanox.it/">Vai al sito della scuola</a>
<br />
<br />
</body>
</html>
Ricordo la prassi da seguire:
- Copiare il codice e incollarlo in un semplice editor (software) di testo. Puoi utilizzare Notepad di Windows, oppure Pico (Linux) o TextEdit (Mac).
- "Salva con nome" con estensione .html (esempio "index.html") in una cartella a tua scelta.
- Il file salvato dovrebbe essere ora associato all'icona del browser predefinito, altrimenti clicca con tasto destro sul file e cambia le impostazioni di apertura nella finestra delle proprietà, scegliendo un browser a tua scelta (Internet Explorer, Opera, Mozilla, Safari, Firefox, Crome, ecc.).
Iscriviti a:
Post (Atom)