- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web."

Transcript

1 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 utilizzare alcune proprietà legate agli stili dichiarati utilizzando tag di codice HTML detti selettori. - La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web. Introduzione Il sistema di contrassegno dell'html, i tag, ha dei limiti che potrebbero apparire marginali agli occhi di chi si avvicina per la prima volta al metalinguaggio ma risultano fastidiosi e limitanti per chi mette al primo posto la parte grafica di un sito. Posizionare un immagine, una porzione di testo o quant'altro ha bisogno di una determinata formattazione risulta semplice se si utilizza una tabella (le tabelle vengono utilizzate per questo scopo nella quasi totalità dei casi), ma il problema si pone quando bisogna risolvere il problema della separazione tra stile, formattazione e struttura. La formattazione con foglio di stile interno Poniamoci il problema di dover scrivere del testo con formattazioni diverse in molte parti di una pagina di un sito, del tipo come in esempio: <font face="arial" size= 3 ><i>testo della pagina</i></font><p> <font face="times New Romans"><b>Testo della pagina</b></font><p> <font face="verdana"><s>testo della pagina</s></font> Dal codice sopra si deduce che la scritta Testo della pagina verrà scritto tre volte in tre formattazioni differenti: in Arial corsivo, in Times New Romans grassetto e in Verdana sottolineato. Per risolvere il problema con un foglio di stile riscriviamo il codice sopra come segue:

2 <style>.stile1 {font-family: Arial; font-size:12; color:black.stile2 {font-family: Times New Romans; font-size:12; color:black.stile3 {font-family: Verdana; font-size:12; color:black <p class=stile1>testo della pagina</p> <p class=stile2>testo della pagina</p> <p class=stile3>testo della pagina</p> Come si può notare dall'esempio il foglio di stile in una pagina web si dichiara attraverso il tag <STYLE>; per definire i singoli stili da utilizzare per la formattazione del testo scriviamo il nome da dare alla stessa, preceduta dal segno. (punto), seguito dai valori racchiusi tra parentesi graffe. Per utilizzare lo stile dichiarato basta inserire l'attributo CLASS all'interno di un tag <p> nel punto della pagina dove si vuole formattare il testo. Ereditarietà e selettori contestuali L'ereditarietà consiste del fatto che una proprietà di un foglio di stile viene ereditata da un tag, se racchiuso nel testo formattato con un determinato stile. Ad esempio: <html><head> <title>esempio di stile con tag interno</title> <style>.stile1 {font-family: Arial; color:green <p class=stile1>questo testo è in Arial verde. <br> <i>questo è in corsivo ma conserva lo stile1, Arial verde, dato che il tag è stato dichiarato all'interno di una formattazione di stile</i>. <br> Adesso è di nuovo in solo stile1</p> Un'altra buona caratteristica dei fogli di stile consiste nella contestualità: un tag se associato ad una dichiarazione di stile ne eredita le proprietà e ne modifica altre, se presenti in entrambe. Con un esempio pratico si può facilmente comprendere questa funzione.

3 <html><head> <title>esempio di stile con contestualità</title> <style>.stile1 {font-family: Arial; color:green.stile2 {font-family: Verdana; color:red.stile1 s {color:blue.stile2 i {color:green <p class=stile1>questo testo è in Arial verde. <s>invece questo è sempre in Arial, dato che eredita lo stile1, ma sottolinealo e di colore blue</s></p> <p class=stile2>analogamente questo testo è in Verdana rosso. <i>invece questo è sempre in Verdana, come visto prima, ma in corsivo e di colore verde.</i></p> Dall'esempio sopra si intuiscono facilmente le proprietà della funzione contestuale. Unico vincolo del foglio di stile dichiarato all'interno di una pagina web è che può essere utilizzato soltanto per quella pagina, vincolando di fatto la formattazione di un intero sito. Fogli di stile esterni I fogli di stile esterni presentano dei vantaggi difficilmente eguagliabili. Innanzitutto sono universalmente validi per qualsiasi pagina voglia essere associata ad essi, quindi vi è un facile controllo topografico: ciò che viene modificato nel foglio di stile si ripercuote a tutti i documenti a cui è associato, risparmiando tempo, fatica e sicuri errori dovuti ad un controllo manuale; inoltre come visto l'utilizzo di un foglio di stile consente un notevole risparmio di spazio dovuto alla separazione tra contenuto e stile. La creazione di un foglio di stile esterno richiede semplicemente un qualsiasi editor di testo per scrivere il codice per poi salvarlo nel formato.css. L'acronimo CSS sta per Cascading Style Sheet (Foglio di Stile a Cascata). body { font-family: Georgia; font-size: 13px; color: # p { font-size: 20px; a:link { color: #000000; a:active { color: #000000; a:visited { color: #000000; a:hover { text-decoration: none; color: #660000; #header { height: 50px; background: #660000; text-align: center; font-size: 20px; color: #FFFFFF;

4 #home { height: 400px; background: #990000; text-align: center; font-size: 20px; color: #FFFFFF; #link { height: 400px; #link a { height: 30px; text-decoration: none; font-size: 100%; color: #999999; #link a:hover { background: #660000; height: 30px; hr { border-bottom: 3px solid #FF0000; Analizzando il listato sopra citato possiamo distinguere Salveremo il seguente listato con il nome di miofoglio.css. Per utilizzare il foglio appena creato basta inserire nell'intestazione di ogni pagina web che andremo a creare la seguente dichiarazione: <link href="miofoglio.css" rel="stylesheet" type="text/css" /> In questo esempio un po' più complesso possiamo notare una diversa tipologia di dichiarazione di stile per i singoli elementi che comporranno la pagina. Per definire lo stile di una porzione di pagina, partendo da sinistra, si utilizza il tag <div seguito dall'attributo id, il cui valore è il nome dichiarato dello stile. Esempio di pagina con lo stile sopra dichiarato: <html><head> <title>pagina con foglio di stile esterna</title> <link href="miofoglio.css" rel="stylesheet" type="text/css" /> <body>

5 <table border="0" width="100%" height="50" bgcolor="#ff0000"> <tr> <td width="33%"> <center><a href="pagina1.htm"><font color="white"> Collegamento alla Homepage</font></a> <td width="33%"> <p align="center"><font color="white">benvenuti in miosito.com</font> <td width="34%"> <p align="center"><font color="white">informazioni del sito</font> </tr> </table> <div id=header> Sottotitolo del sito che verrà visualizzato in font Georgia, colore bianco, con grandezza 20 pixel.</div> <hr> <br> <table border="0" width="100%"> <tr> <td width="25%" valign="top"> <div id=link> Spazio dedicato ai collegamenti ipertestuali, con gli attributi dichiarati nel foglio di stile: <p> <a href="pagina1.htm">link1</a><br> <a href="pagina2.htm">link2</a><br> <a href="pagina3.htm">link3</a> </div> <td width="75%" valign="top"> <div id=home> Questo è una altra prova di inserimento di testo generico nello spazio principale della pagina, in base alla formattazione dichiarata. </div> </tr> </table> </body> </html> In Rete si trovano diversi esempi di fogli di stile esterni, molto intuitivi nell'utilizzo come l'esempio appena visto, anche se taluni casi hanno bisogno di una maggiore attenzione per essere applicati al meglio, data la grande creatività di alcuni programmatori. In ogni caso risultano essere ottime risorse per ispirare alla creazione di nuovi stili per il proprio sito.

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

(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

Dettagli

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

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:

Dettagli

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 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

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

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)

Dettagli

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas Fogli di stile CSS Il foglio CSS (Cascading Style Sheet, foglio di stile a cascata) è un documento in formato testuale che definisce il controllo sulla visualizzazione della pagina HTML e sul suo layout,

Dettagli

GUIDA PER LA REALIZZAZIONE DEI SITI WEB ASSOCIAZIONI LOCALI SCIENZA & VITA

GUIDA PER LA REALIZZAZIONE DEI SITI WEB ASSOCIAZIONI LOCALI SCIENZA & VITA GUIDA PER LA REALIZZAZIONE DEI SITI WEB ASSOCIAZIONI LOCALI SCIENZA & VITA Febbraio 2007 1. Premessa Questo breve manuale ha lo scopo di fornire le indicazioni tecniche per lo sviluppo dei siti web delle

Dettagli

jt - joetex - percorsi didattici

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.

Dettagli

Elementi di web design (parte I): introduzione all HTML

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

Dettagli

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 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

Dettagli

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

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

Dettagli

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 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

Dettagli

Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online.

Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online. www.icoarena.com Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online. Ico Arena 01. PREMESSA Sviluppare un sito web è costoso Per

Dettagli

Prof. Renato SICA (ITIS "A. Meucci" - Castelfidardo (AN))

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.

Dettagli

Esercitazioni di HTML

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:

Dettagli

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à... 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 , ,...,

Dettagli

I Tag dell html. Parte quarta

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:

Dettagli

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. 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

Dettagli

HTML HyperText Markup Language:

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

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

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

Dettagli

Creare classi e ID per applicare gli stili, pagina 93. Applicare gli stili a collegamenti ipertestuali, pagina 96

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

Dettagli

Primi passi con HTML. Il documento HTML

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.

Dettagli

CSS font-size: pt, px o em? Che unità di misura utilizzare?

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

Dettagli

Introduzione ai fogli di stile CSS

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

Dettagli

Università degli Studi di Milano

Università degli Studi di Milano Università degli Studi di Milano Corso di Laurea in Sicurezza dei Sistemi e delle Reti Informatiche Lezioni 17 e 18 Creazione di File HTML FABIO SCOTTI Laboratorio di programmazione per la sicurezza Indice

Dettagli

Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole

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

Dettagli

Coder Dojo Tutorial 3

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

Dettagli

XSL: extensible Stylesheet Language

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

Dettagli

Basi di Dati. Programmazione e gestione di sistemi telematici

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

Dettagli

I PRINCIPALI TAG DEL LINGUAGGIO HTML

I PRINCIPALI TAG DEL LINGUAGGIO HTML Struttura generica di una pagina Web: I PRINCIPALI TAG DEL LINGUAGGIO HTML Titolo

Dettagli

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW

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

Dettagli

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets il linguaggio per modificare lo stile delle pagine web 1 Fogli di stile (CSS) Servono per facilitare la creazione di pagine HTML con un aspetto uniforme Permettono di separare

Dettagli

Esercizi. Introduzione all HTML. Il WWW

Esercizi. Introduzione all HTML. Il WWW Politecnico di Milano Esercizi Introduzione all HTML Il WWW Il World Wide Web: una rete di pagine connesse tra loro e distribuite su diverse macchine Il server Web contiene le pagine Web da visualizzare

Dettagli

Sistemi Di Elaborazione Dell informazione

Sistemi Di Elaborazione Dell informazione Sistemi Di Elaborazione Dell informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010 Fogli di stile (CSS) Cascade Style Sheets

Dettagli

Consorzio Triveneto S.p.A. Payment Gateway

Consorzio Triveneto S.p.A. Payment Gateway Consorzio Triveneto S.p.A. Payment Gateway Specifiche di Personalizzazione della Hosted Payment Page Release 1.4.0 Data Versione Autore Descrizione 02/10/2003 1.2.0 PM Prima Release, associata al Manuale

Dettagli

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML Reti Linguaggio HTML 1 HTML = Hypertext Markup Language E il linguaggio usato per descrivere documenti ipertestuali Ipertesto = Testo + elementi di collegamento ad altri testi (link) Linguaggio di markup:

Dettagli

Utilizzo dei CSS: regole

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

Dettagli

Architettura a tre livelli. Lo scenario e l ambiente. HTML - Hyper Text Markup Language. Enrico Cavalli. Anno Accademico 2012-2013

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

Dettagli

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language HTML 05/04/2012 1 Introduzione Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language L'ipertesto è semplicemente un testo che funziona

Dettagli

Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca)

Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare

Dettagli

Applicazioni Web 2013/14

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

Dettagli

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup)

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup) HTML Olga Scotti Cos è HTML Hypertext Markup Language non è un linguaggio di programmazione non ha meccanismi che consentono di prendere delle decisioni non è in grado di compiere delle iterazioni linguaggio

Dettagli

GUIDA ALL HTML. Creato da SUPREMO KING

GUIDA ALL HTML. Creato da SUPREMO KING GUIDA ALL HTML Creato da SUPREMO_KING 1 PREMESSE L html è il linguaggio fondamentale attraverso il quale è possibile creare delle semplici pagine web. L html non è un linguaggio di programmazione ma un

Dettagli

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 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

Dettagli

01. Conoscere l area di lavoro

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

Dettagli

Cimini Simonelli - Testa

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

Dettagli

Linguaggi per il Web Linguaggi di markup: CSS

Linguaggi per il Web Linguaggi di markup: CSS Linguaggi per il Web Linguaggi di markup: CSS Fogli di stile (CSS) Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme permettono di separare il contenuto

Dettagli

ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag.

ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. 1

Dettagli

caratteristiche del documento

caratteristiche del documento </head> HTML: sintassi caratteristiche del documento documento 21 HTML: titolo del documento

Dettagli

Le sezioni logiche di una pagina web

Le sezioni logiche di una pagina web Le sezioni logiche di una pagina web Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti. Strutturare logicamente i contenuti di una pagina, creare un template (modello)

Dettagli

Scrivere una applicazione html, css e javascript per Android

Scrivere una applicazione html, css e javascript per Android Scrivere una applicazione html, css e javascript per Android Prima di tuffarsi dentro, vorrei stabilire rapidamente il campo di gioco. In questo capitolo, definisco termini chiave, confrontare i pro e

Dettagli

HTML. http://www.w3schools.com/html/default.asp

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

Dettagli

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali?

Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Corso html 5. Di Roberto Abutzu. *********** Quarta parte: Body ed elementi strutturali. ********** Cos'è il Body e gli elementi strutturali? Riprendiamo il discorso, introducendo la tag Body e iniziando

Dettagli

Come creare pagine WEB

Come creare pagine WEB Come creare pagine WEB E' possibile creare pagine WEB secondo diverse modalità: in modo classico, per cui sara' necessario agire su ogni singola marcatura di ognuna delle x pagine; questa soluzione poco

Dettagli

Collegamenti ipertestuali.

Collegamenti ipertestuali. Collegamenti ipertestuali. Argomenti trattati: - Premessa: Cosa sono e perchè sono l'essenza del Web. - : Come realizzare e personalizzare i vari tipi di link a pagine o risorse. - Il collegamento ipertestuale

Dettagli

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità

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

Dettagli

Grafica: creare pulsanti con i css.

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.

Dettagli

Il linguaggio HTML - Nozioni di base (2)

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 -

Dettagli

CSS. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione

CSS. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione CSS Politecnico di Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola I cascading style sheet I CSS permettono

Dettagli

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. 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

Dettagli

APPUNTI DI HTML (QUINTA LEZIONE)

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

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

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

Dettagli

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla! HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!) CENNI SULL'HTML L'html è il linguaggio di base per lo sviluppo di pagine

Dettagli

Disegnare il Layout. www.vincenzocalabro.it 1

Disegnare il Layout. www.vincenzocalabro.it 1 Disegnare il Layout www.vincenzocalabro.it 1 Il problema dell interfaccia Una buona interfaccia deve assolvere a diverse funzioni: far percepire i contenuti permettere di individuare le principali aree

Dettagli

CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09

CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09 CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09 Selettori class e id! Sono due attributi fondamentali applicabili a tutti gli elementi! Consentono di superare le limitazioni intrinseche

Dettagli

Informatica. Parte 1: HTML. Sommario WWW. WWW e HTML. HTML e browser

Informatica. Parte 1: HTML. Sommario WWW. WWW e HTML. HTML e browser Informatica Parte 1: HTML Un introduzione a HTML e CSS Laurea magistrale in Scienze della mente Laurea magistrale in Psicologia dello sviluppo e dell'educazione Anno accademico: 2012-2013 (Slide scritte

Dettagli

Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà

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

Dettagli

Realizzare il layout di un sito web senza utilizzare frame e tabelle

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

Dettagli

HTML, XHTML, CSS. cosa c è dietro al web. Informatica Applicata Prof.Emanuela Zilio

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

Dettagli

Prof. Rocco Ciurleo 1

Prof. Rocco Ciurleo 1 Istituto Tecnico Industriale Statale Conte Michele Maria Milano Polistena Classi: 2 E 2 G - a. s. 2012/2013 H T M L Guida base al linguaggio Prof. Rocco Ciurleo 1 Cos è l HTML HTML è l'acronimo di Hypertext

Dettagli

I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)

I FOGLI DI STILE CSS (CASCADING STYLE SHEETS) I FOGLI DI STILE CSS (CASCADING STYLE SHEETS) Gli stili rappresentano un metodo per definire come il browser debba visualizzare i tag HTML. Il loro vantaggio è che possono essere utilizzati a differenti

Dettagli

HTML INFORMATICA PER LE APPLICAZIONI ECONOMICHE PROF.SSA BICE CAVALLO

HTML INFORMATICA PER LE APPLICAZIONI ECONOMICHE PROF.SSA BICE CAVALLO HTML INFORMATICA PER LE APPLICAZIONI ECONOMICHE PROF.SSA BICE CAVALLO Introduzione 2 HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio

Dettagli

INTRODUZIONE ALL HTML

INTRODUZIONE ALL HTML INTRODUZIONE ALL HTML LE REGOLE GENERALI Di seguito, sono raccolti i tag html (comandi) di uso più frequente per la formattazione dei testi e la gestione di una pagina web all interno del nostro sistema

Dettagli

Corso di Informatica Generale 1 IN1. Linguaggio HTML

Corso di Informatica Generale 1 IN1. Linguaggio HTML Università Roma Tre Facoltà di Scienze M.F.N. Corso di Laurea in Matematica Corso di Informatica Generale 1 IN1 Linguaggio HTML Marco Liverani (liverani@mat.uniroma3.it) Sommario Breve cronologia del World

Dettagli

HTML per tu+ Chiara Pere+

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

Dettagli

Hyper Text Markup Language HTML

Hyper Text Markup Language HTML Operatore informatico giuridico A.A 2003/2004 I Semestre Hyper Text Markup Language HTML Dr. Raffaella Brighi HTML HTML è un linguaggio di marcatura (markup) per la creazione di ipertesti Le sezioni di

Dettagli

Contenuto vs Stile: un esempio

Contenuto vs Stile: un esempio I limiti dell HTML Il principale problema di HTML è la mancanza di separazione tra contenuto e stile all interno delle pagine. Molto spesso, invece degli appositi tag, si utilizzano le tabelle per posizionare

Dettagli

2.3 Cenni sui fogli di stile CSS per XML

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

Dettagli

Progettare pagine html. Studium Generale, a.a. 2013-2014, II semestre

Progettare pagine html. Studium Generale, a.a. 2013-2014, II semestre Progettare pagine html Studium Generale, a.a. 2013-2014, II semestre Quanto deve essere grande la nostra pagina? http://www.newfangled.com/optimal_site_width DIMENSIONE PAGINA Secondo le statistiche

Dettagli

APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE

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

Dettagli

CSS. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green }

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

Dettagli

Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language

Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML Elisa Quintarelli-Laura Mandelli 1 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized

Dettagli

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER Il percorso Web Graphic Designer con Certificazione internazionale Adobe Dreamweaver prepara lo studente ad acquisire solide conoscenze per la figura professionale

Dettagli

WEB I FOGLI DI STILE. Gabriele Murara

WEB I FOGLI DI STILE. Gabriele Murara WEB I FOGLI DI STILE Gabriele Murara 1 Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento

Dettagli

UTILIZZO DEL TEMPLATE Parte 1 - struttura

UTILIZZO DEL TEMPLATE Parte 1 - struttura UTILIZZO DEL TEMPLATE Parte 1 - struttura PROGRAMMI UTILIZZATI: gestione del codice HTML - HTML-Kit è un Editor Web non di tipo visuale, che consente la costruzione ex-novo di pagine web o la loro modifica,

Dettagli

CORSO BASE DI HTML. html è un sistema di contrassegno indipendente dalla piattaforma.

CORSO BASE DI HTML. <font color=red>html è un sistema di contrassegno indipendente dalla piattaforma.</font> CORSO BASE DI HTML Introduzione L HTML (Hypertext Markup Language) non è un linguaggio di programmazione ma un semplice sistema di contrassegno, i cui tag vengono riconosciuti ed interpretati dai browser

Dettagli

Esercitazione n. 10: HTML e primo sito web

Esercitazione n. 10: HTML e primo sito web + Strumenti digitali per la comunicazione A.A 0/4 Esercitazione n. 0: HTML e primo sito web Scopo: Creare un semplice sito web con Kompozer. Il sito web è composto da una home page, e da altre due pagine

Dettagli

Il linguaggio HTML - Parte 4

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

Dettagli

Guida html e css base

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

Dettagli

Guida alla modifica di un layout

Guida alla modifica di un layout Guida alla modifica di un layout Abbiamo realizzato il sito web di Hexagon Tours utilizzando HTML e CSS, impostando una struttura formata da header, barra di navigazione, contenuti principali e laterali,

Dettagli

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere compilato

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere compilato CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style

Dettagli

Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455)

Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455) Il linguaggio HTML Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455) Oggi la tecnologia del World Wide Web consente il trasferimento di documenti qualsiasi

Dettagli

Questo é il link all altra pagina

<a href= page2.html > Questo é il link all altra pagina </a> <a href= page2.html > <img src= lamiaimmagine.jpg/> </a> Tutorial 4 Links, Span e Div È ora di fare sul serio! Che ci crediate o no, se sei arrivato fino a questo punto, ora hai solo bisogno di una cosa in più per fare un sito reale! Al momento hai una pagina

Dettagli

Le mie immagini su WEB: l ABC per iniziare. 6 maggio 2008

Le mie immagini su WEB: l ABC per iniziare. 6 maggio 2008 Le mie immagini su WEB: l ABC per iniziare 6 maggio 2008 1 1) Le nostre immagini su internet; perchè? 2) il WEB...il pc di chi accede (il client)...il sito (server); 3) costruzione del sito (design, strumenti

Dettagli

LEZIONE NO. 2: E TAG DI FORMATTAZIONE DEL TESTO DI ATTILIO ABBIEZZI

LEZIONE NO. 2: <BODY> E TAG DI FORMATTAZIONE DEL TESTO DI ATTILIO ABBIEZZI HTML BASE LEZIONE NO. 2: E TAG DI FORMATTAZIONE DEL TESTO DI ATTILIO ABBIEZZI FONTI: HTML.IT 1 Impostare lo sfondo L'operazione successiva all'impostazione del documento è la definizione

Dettagli

, utilizzando il tasto destro

, 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,

Dettagli

Introduzione al Linguaggio HTML

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

Dettagli

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.

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,

Dettagli

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. 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

Dettagli

MANUALE IMMEDIATO DI HTML

MANUALE IMMEDIATO DI HTML MANUALE IMMEDIATO DI HTML Realizzato da NiktorTheNat Iniziato il giorno 9 aprile 2010 - terminato il giorno 22 aprile 2010 email autore: niktorthenat@tiscali.it canale youtube: http://www.youtube.com/user/niktorthenat

Dettagli