Immagini & Colori in HTML
|
|
|
- Alessia Santini
- 5 anni fa
- Visualizzazioni
Transcript
1 Immagini & Colori in HTML
2 Prima dell avvento del World Wide Web la parte multimediale di internet era quasi inesistente, predominava il grigio. Inserimento di un immagine
3 Il documento HTML anche se ben realizzato ha l indubbio pregio di presentare informazioni aggiornabili a basso costo in modo chiaro e accessibile. Uno dei suoi punti di forza è la possibilità di utilizzare la GRAFICA. Il TAG per inserire immagini è <IMG>; NON RICHIEDE NECESSARIAMENTE UN TAG DI CHIUSURA, NECESSITA DI ALMENO UN ATTRIBUTO CHE COMUNICHI AL BROWSER DOVE SI TROVA L IMMAGINE. <IMG SRC= PERCORSO/NOME_IMMAGINE.estensione del file > PERCORSO= si intende la cartella dove sono riposte le immagini che si intendono usare, si può omettere nel caso in cui il documento HTML e l immagine si trovano nella stessa directory.
4 IMMAGINE CON PERCORSO RELATIVO Fiera dell Est Cartella contenente l immagine e il file HTML
5 l immagine è rinominata duesoldi, è un JPG e si trova all interno della cartella Fiera dell Est insieme al file HTML rinominato fiera.html.jpg
6 Il file HTML è così composto
7 IMMAGINE CON PERCORSO ASSOLUTO In genere il Web Designer per lavorare al meglio dispone le immagini in più directory rinominandole a seconda di dove intenderà inserire le immagini all interno della pagina web. NON INSERIRE UNA CARTELLA IMMAGINI E COME NON RINOMINARE IL PRIMO FILE INDEX.HTML E UN ERRORE! 2 Esempi
8 La directory è all interno della stessa medesima del file html e in questo caso è chiamata images.
9 .png All interno della cartella troviamo un immagine che in questo caso è un png.
10 <html> <head> <title>fiera</title> </head> <body> <p>alla fiera dell'est</p><br> <p>per due soldi</p><br> <img src="duesoldi.jpg"> <p>un topolino mio padre comprò.</p> <img src="images/topolino.png"> Percorso Relativo in questa riga è presente un carattere speciale che vedremo più avanti </body> </html> Percorso Assoluto
11 WIDTH E HEIGHT Sono i due attributi fondamentali per definire la LARGHEZZA e l ALTEZZA di un immagine. Le immagini nei siti web moderni sono praticamente fondamentali e rendono il sito che stiamo visualizzando più accattivante e di design. Molti utenti però ancora oggi preferiscono navigare su internet in semplice modalità di sola lettura, per velocizzare il caricamento da parte del Browser Web del solo testo. Anche per questo scopo esiste un attributo da inserire all interno del TAG <IMG> che permette di etichettare la vostra immagine all interno della pagina HTML, ovvero aggiunge una descrizione; il TAG alt.
12 widht > larghezza img height > altezza img
13 <img src= images/topolino.png ; width= 50 ; height= 50 ; alt= testo alternativo all immagine altrimenti visibile come toolip > il testo alternativo all immagine altrimenti visibile come toolip è quel testo che compare quando non viene visualizzata l immagine dal browser, utile per far capire all utente che li voi avete posizionato un immagine e nel suo caso non si è ancora caricata. Toolip è inteso come etichetta. Questo simbolo compare nell url del browser quando in un sito web è disponibile la sola lettura.
14 Le immagini in genere di default possiedono un bordo blu che viene evidenziato quando l immagine è anche linkata. E comunque possibile aggiungere un bordo più spesso come una sorta di cornice aggiungendo l elemento border=numero <img src= images/topolino.png ; width= 50 ; height= 50 ; alt= testo alternativo all immagine altrimenti visibile come toolip border= 10 >
15 <html> <head> <title>fiera</title> </head> <body> <p>alla fiera dell'est</p><br> <p>per due soldi</p><br> <img src="duesoldi.jpg"> <p>un topolino mio padre comprò.</p> <img src="images/topolino.png" ; width="50" ; heght="50" ; alt="testo alternatio all'immagine altrimenti visibile come toolip" ; border="10"> </body> </html>
16 Il risultato è che l immagine topolino.png si è rimpicciolita di 50 x 50 pixel, con un bordo di 10 x 10 pixel e al passaggio del mouse in modalità sola lettura apparirà la descrizione testo alternativo all immagine altrimanti visibile come toolip.
17 POSIZIONAMENTO ASSOLUTO QUANDO SISTEMIAMO UN IMMAGINE ALL INTERNO DEL NOSTRO FILE HTML, OVUNQUE ALL INTERNO DEL NOSTRO IPERTESTO ESSE VENGA SISTEMATA, COMUNQUE IL BROWSER WEB DI DEFAULT LA POSIZIONERA A PARTIRE DALLA SUA SINISTRA. COME FARE DUNQUE A SISTEMARE PIU IMMAGINI ALL INTERNO DELLO STESSO FILE CON UN IPOTETICO TESTO DI ACCOMPAGNAMENTO? SI UTILIZZA IL TAG DI STILE DEL POSIZIONAMENTO ASSOLUTO DOVE GLI ELEMENTI: TOP = L IMMAGINE SI SPOSTA DALL ALTO VERSO IL BASSO LEFT = L IMMAGINE SI MUOVE DA SINISTRA VERSO DESTRA
18 Tag per il posizionamento assoluto dell immagine <div style="position:absolute; top:400px ; left:500px"> <img src="images/lambo.png" height="50" ; widht="50" ; border="0"> </div>
19 TOP E LEFT SONO CALCOLATI IN PIXEL (PX) UN MONITOR MODERNO MISURA: 1920 x 1080 pixel TOP= 400px L immagine di default viene sistemata all estrema sinistra della pagina html. LEFT= 500px
20 CON IL POSITION ABSOLUTE MOLTO SPESSO BISOGNA ANDARE PER TENTATIVI, ESISTONO ALTRI ELEMENTI TAG DA INSERIRE ALL INTERNO DI <IMG> QUESTO ATTRIBUTO SI CHIAMA ALING OVVERO ALLINEA L IMMAGINE IN AUTOMATICO SENZA DEFINIRE I PIXEL, COMPRESA IN UN PARAGRAFO DI TESTO. SONO 5 I VALORI POSSIBILI DA INSERIRE NELL ELEMENTO ALING= VALORE LEFT : L IMMAGINE SI TROVA A SINISTRA, IL TESTO SCORRE A DESTRA; RIGHT : L IMMAGINE SI TROVA A DESTRA, IL TESTO SCORRE A SINISTRA; TOP : IL BORDO SUPERIORE DELL IMMAGINE è ALLINEATO AL BORDO SUPERIORE DEL TESTO; MIDDLE : IL TESTO SI TROVA IN CORRISPONDENZA DELLA META DEL VALORE HEIGHT (PIù DIFFICILE A SPIEGARE CHE DA IMPLEMENTARE); BOTTOM : IL BORDO INFERIORE DELL IMMAGINE è ALLINEATO AL BORDO INFERIORE DEL TESTO.
21 ESEMPIO: <h4>immagine con allineamento automatico (align="top"):</h4> <p>testo<img src="img/bentley.jpg" alt="bentley" width="300" height="100 align="top" > Testo</p>
22 IMMAGINE CON LINK LINK DEL SITO PRIMA DELL IMMAGINE <a href=" <img src="img/bentley.jpg" alt="bentley" width="1366" height="477"></a>
23 IMMAGINE RESPONSIVE IL METODO RESPONSIVE è OGGI IL PIù COMUNE USATO DAI WEB DESIGNER, UTILE PER RENDERE LE IMMAGINI DISPONIBILI SU QUALSIASI DISPOSITIVO MODERNO COME: SMARTPHONE (in genere da 3.5 a 5.5 ) TABLET ( da 4 a 9 ) MONITOR PC CURVI 1920 x 1080 ( ) MONITOR PC 1920 x 1080 ( ) MONITOR PC quadrato 1280x1024 ( dipende) PER RENDERE L IMMAGINE RESPONSIVE SI INSERISCE UN IPERTESTO PREFABBRICATO JAVA ALL INTERNO DELL HEAD PERCHE è UN ELEMENTO CHE RIGUARDA LE IMMAGINI DELLA PAGINA HTML MA NON SI VEDE UNA VOLTA APERTE LE DAL BROWSER.
24 ESEMPIO: IMMAGINE SENZA IPERTESTO RESPONSIVE IMMAGINE SITO WEB VISIONE STANDARD QUANDO SI APPLICA L IPERTESTO PER IL RESPONSIVE DESIGN L IMMAGINE SI ADATTA AL DISPOSITIVO IN USO
25 <html> <head> <title>prova Link Immagine</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <script src=" <script src=" </head> <body> <h1>immagine RESPONSIVE</h1> <p>l'immagine si adatta al dispositivo</p> <br><br><br> script prefabbricato per responsive all interno dell head <img class="img-responsive" src="img/bentley.jpg" alt="bentley" width="1366" height="477"> </body> </html> html che identifica quale immagine deve diventare responsive
26 I COLORI
27 I siti web moderni utilizzano un aspetto minimal. Spesso si vedono siti web dove vengono utilizzati uno o due colori per il testo ed i link. I testi troppo colorati nel mondo del web moderno non sono più di moda, esclusione fatta per loghi e intestazioni. Esistono diversi modi per definire i colori all interno delle pagine web, testi, sfondi, link visitato e non visitato. Si possono usare anche i Fogli di Stile ovvero i CSS (Cascading Style Sheet) per stabilire i colori senza doverli riprogrammare per ogni pagina. (Anticipazione) Come visto in precedenza per il FONT si può programmare il colore del testo. E anche possibile programmare altri colori in un unico comando inserito nel <BODY>, senza doverlo più ripetere per tutti gli altri comandi.
28 Esempio colori testo-sfondo-link <html> <head> <title> Prova CSS </title> <head> <body; text= black ; bgcolor="white" link= blue ; vlink= red ; alink= purple > <h2>prova Testo</h2> <p>clicca</p> <a href="...inserire link (copia incolla dall url) " >qui</a> </body> </html>
29 <body; text= black ; bgcolor="white" link= blue ; vlink= red ; alink= purple > Tag di riferimento COLORE DEL LINK NON VISITATO COLORE DEL TESTO COLORE DELLO SFONDO COLORE DEL LINK VISITATO COLORE DEL LINK AL PASSAGGIO DEL MOUSE
30 <FONT FACE= ARIAL > <FONT COLOR= BLACK > <FONT SIZE= 7 > CARATTERE COLORE DEL TESTO DIMENSIONE CARATTERE
31 IMPOSTARE UN COLORE DI SFONDO CON IL TAG BGCOLOR <body bgcolor="gray"> I COLORI NEL WEB SONO DISPONIBILI IN TRE VERSIONI, IN INGLESE DOVE SE NE HANNO A DISPOSIZIONE SOLO 16, IN VERSIONE TRIPLETTA ESADECIMALE OPPURE DECIMALE.
32 I 16 COLORI ATTIVI SUL WEB (SI POSSONO SCRIVERE SOLO IN INGLESE PER CONVENZIONE), SONO: BLUE BLACK FUCHSIA GRAY GREEN LIME MAROON NAVY OLIVE PURPLE RED SILVER TEAL YELLOW IL 16 è OVVIAMENTE WHITE CHE ANCHE SE NON SPECIFICATO DI DEFAUTL UNA PAGINA WEB E SEMPRE BIANCA.
33 I COLORI DECIMALI CI PERMETTONO DI AVERE PIU POSSIBILITA CROMATICHE TUTTI I COLORI DECIMALI VANNO PRECEDUTI DAL SIMBOLO CANCELLETTO # QUI I PIù COMUNI: BLU: AZURE #F0FFFF LIGHTBLUE #ADD8E6 SKYBLUE #87CEEB AQUA #00FFFF DARKTURQUOISE #00CED1 BLUE #0000FF DARKBLUE #00008B NAVY #0000B0
34 VERDE: GREENYELLOW #ADFF2F LIGHTGREE #90EE90 DARKSEAGREEN #8FBC8F OLIVE # AQUAMARINE #7FFFD4 GREEN # DARKGREEN # ROSA E ROSSI: PINK #FFC0CB LIGHTPINK #FFB6C1
35 ORANGE #FFA500 DARKORANGE #FF8C00 CORAL #FF750 HOTPINK #FF69B4 TOMATO #FF6347 ORANGERED #FF4500 DEEPPINK #FF1493 FUCHSIA - MAGENTA #FF00FF RED #FF0000 SALMON #FA8072 LIGHTCORAL #F08080
36 GOLD #FFD700 VIOLET #EE82EE DARKSALMON #E9967A DARKMAGENTA #8B008B PURPLE # MAROON # GIALLI: IVORY #FFFFF0 LIGHTYELLOW #FFFFE0 YELLOW #FFFF00 FLORALWHITE #FFFAF0 LRMONCHIFFON #FFFACD
37 SIENNA #A0522D BEIGE E MARRONI: SNOW #FFFAFA SEASHELL #FFF5EE ANTIQUEWHITE #FAEBD7 BEIGE #F5F5DC WHEAT #F5DEB3 SANDYBROWN #F4A460 GOLDENROD #DAA520 CHOCOLATE #D2691E PERU #CD853F BROWN #A52A2A
38 BIANCHI E GRIGI: WHITE #FFFFFF GHOSTWHITE #F8F8FF WHITESMOKE #F8F8FF LIGHTGREY #D3D3D3 SILVER #C0C0C0 DARKGRAY #A9A9A9 GRAY # BLACK #000000
HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte
HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo
CSS 4. Tipi di dati in CSS. Numeri <number> Lunghezze <length> Tipi di dati, lunghezze ed unità di misura. Esistono i seguenti tipi di dati
CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati 2 Numeri Interi Cifre comprese
Metodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 6. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze
Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2
Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto
Cosa vuol dire HTML? Hyper Text Markup Language
IMPARIAMO Cosa vuol dire HTML? Hyper Text Markup Language PROGRAMMIAMO IN HTML? NO! L'HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica (layout)
CSS 4. Tipi di dati, lunghezze ed unità di misura
CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati Tecnologie di Sviluppo per il WEB 2 Numeri
non è linguaggio di markup formato testo .htm .html interpretando
HTML Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML). HTML non è un linguaggio di programmazione! HTML non ha meccanismi per prendere delle decisioni o compiere
CSS: HTML: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli. Le immagini mappate
CSS: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli HTML: Le immagini mappate 1 Le principali proprietà che permettono di manipolare le immagini agiscono sul box mode
CSS (Cascading Style Sheets)
Foglio di stile CSS (Cascading Style Sheets) Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Vedi http://www.w3schools.com/css/demo_default.htm
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
e il Giardino di Zen CSS ESTERNI CSS INTERNI
e il Giardino di Zen Per gli aggiornamenti consultare il sito del World Wide Web Consortium all'indirizzo. http://en.wikipedia.org/wiki/world_wide_web_consortium Inserimento CSS
I fogli di Stile. Il Problema dello Stile di Presentazione. I tag in HTML consentono di specificare
Programmazione Web 1 I fogli di Stile Il Problema dello Stile di Presentazione 2 I tag in HTML consentono di specificare la struttura logica del documento (paragrafi, titoli, ecc.) alcuni aspetti della
Primi elementi di... Cascading Style Sheet (o Fogli di Stile)
ISIS Giordano Bruno - BUDRIO Primi elementi di... Cascading Style Sheet (o Fogli di Stile) Lezioni del Prof. Gianluigi Roveda Caratteristiche dei Fogli di Stile Divide la descrizione del contenuto del
layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto
Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding
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.
HTML. Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file.
Con la sigla HTML si intende: HYPER TEXT MARKUP LANGUAGE HTML Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file. Iper testo Un documento o pagina puo essere collegato ad
Corso di HTML. Prerequisiti. Modulo L2 B3-Immagini. Creazione di pagine web Visualizzazione pagine web. M. Malatesta B3-Immagini-05 09/01/2014
Corso di HTML Modulo L2 B3-Immagini 1 Prerequisiti Creazione di pagine web Visualizzazione pagine web 2 1 Introduzione In questa Unità diamo un approfondimento dell utilizzo del tag del linguaggio HTML
Introduzione ai Fogli di stile. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
Introduzione ai Fogli di stile Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Fogli di Stile CSS Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio usato per definire
<!-- TESTO DEL COMMENTO
Il corpo della pagina: il tag Come abbiamo già avuto modo di osservare, il tag definisce ed identifica il corpo della pagina, cioè la "porzione visibile" di un qualsiasi documento HTML. Avendo
STILE E CSS. classi sezioni. tag
Perchè occorre lo stile? HTML con i suoi tag e relativi attributi possiede un suo stile standard che offre purtroppo poche personalizzazioni. Un sito web deve avere uniformità di colori, di font e dimensioni
Dare stile al testo significa impostare con i CSS:
1 Dare stile al testo significa impostare con i CSS: Il tipo di font Il colore del font La dimensione del font Grassetto e corsivo del font Allineamento Sottolineatura Ombre Spaziature, bordi, margini
I fogli di stile (CSS)
I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono
Introduzione al linguaggio HTML
Introduzione al linguaggio HTML 1 Richiami introduttivi (1) sito Internet (sito Web o sito WWW) insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate su un server
CSS / GESTIONE DEL COLORE E DEI BACKGROUND. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / GESTIONE DEL COLORE E DEI BACKGROUND INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 CSS / DEFINIRE IL COLORE SECONDO IL MDELLO RGB Modello Additivo del colore Le lunghezze
Corso di HTML. Prerequisiti. Modulo L3 2 Formattazione del testo. Formattazione di un testo Stile, dimensioni e font di caratteri
Corso di HTML Modulo L3 2 Formattazione del testo 1 Prerequisiti Formattazione di un testo Stile, dimensioni e font di caratteri 2 1 I colori in HTML I colori in HTML si possono esprimere in due modi:
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
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 Alpi Docenti: Viviana Patti e Claudia Picardi Appendice B Proprietà CSS B.1 Font me della famiglia serif
Formattazione di liste
Formattazione di liste Con HTML si possono costruire liste puntate o numerate: Occorre definire l inizio e la fine della lista e poi definire ogni singolo elemento della lista. Le liste numerate si costruiscono
Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura:
COMANDI BASE HTML Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura: Nome del documento All'interno
Il linguaggio HTML. <html> </html> I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura.
Il linguaggio HTML I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura. . I tag devono essere racchiusi dentro parentesi acute Il tag di chiusura
HTML. I tag HTML (parte 1)
HTML I tag HTML (parte 1) I tag HTML I comandi che il browser interpreta Etichette per marcare l inizio e la fine di un elemento HTML Formato e possono essere tag di apertura: tag di chiusura:
Tipi di testo. Esempio 4. Enfasi. Inserire immagini. Esempio 5 INFO WEB LEZIONE N.4
Tipi di testo INFO WEB LEZIONE N.4 RAVENNA, 13 MARZO 2008 All interno di un documento HTML è possibile inserire due tipi di testo Titoli Sei livelli di grandezza , ,, Paragrafi
Informatica di Base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05
Informatica di Base Multid@ms Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 1 Che cos è l HTML? Hyper Text Markup Language Definisce le caratteristiche stilistiche di un documento, non è programmazione!
INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2. Internet + HTML + HTTP = WWW
1 INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2 Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML
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
Linguaggio per ipertesti
Linguaggio per ipertesti Un linguaggio per descrivere gli ipertesti è l HyperText Markup Language (HTML) Non è il solo (VRML,XML,...) l HTML è un linguaggio di formattazione e permette di formattare del
Corso di HTML. Prerequisiti. Modulo L2 B4 - Le tabelle. Concetto di tabella Coordinate di cella in una tabella. M. Malatesta B4-Le tabelle-06
Corso di HTML Modulo L2 B4 - Le tabelle 1 Prerequisiti Concetto di tabella Coordinate di cella in una tabella 2 1 Introduzione In questa Unità illustriamo il concetto e l uso delle tabelle in HTML. Le
CSS: stili e layout BOX MODEL. Prof.ssa Cristina Gena
CSS: stili e layout BOX MODEL Prof.ssa Cristina Gena Box model In questa lezione vedremo la differenza tra gli elementi blocco e gli elementi in linea e scopriremo le caratteristiche del box model. In
Corso di HTML. Prerequisiti. Modulo L3 3 Blocchi di testo
Corso di HTML Modulo L3 3 Blocchi di testo 1 Prerequisiti Formattazione di un testo Struttura a titoli di un testo Giustificazione e allineamento del testo 2 1 Introduzione In questa Unità vediamo altri
MACROSTRUTTURA DEL DOCUMENTO HTML. Il documento HTML si divide in due parti: l INTESTAZIONE e il CORPO DEL DOCUMENTO
MACROSTRUTTURA DEL DOCUMENTO HTML Il documento HTML si divide in due parti: l INTESTAZIONE e il CORPO DEL DOCUMENTO Denominazione Nome del marcatore Descrizione Documento All'inizio e alla
HTML Lezione2 Le Immagini e i link. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML Lezione2 Le Immagini e i link Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Le immagini I formati supportati dal websono diversi e variano a seconda del browser adoperato.i
Linguaggi di programmazione PC server-client CSS
Linguaggi di programmazione PC server-client CSS HTML MySQL PHP HTML: Hyper Tex Markup Language PHP: Hypertext Preprocessor CSS: Cascading Style Sheet MySQL: Relational database HTML Hyper Tex Markup Language
Silvia Likavec. Lezione 6
Silvia Likavec Lezione 6 2 ! Le principali proprietà che permettono di manipolare le immagini agiscono sul box model: " Border (o border-style; border-width; bordercolor); " Padding; " Margin; " Width;
Le liste non ordinate
Le liste non ordinate Semplici elenchi preceduti da un pallino: segnala l inizio della lista precede ogni voce Attributi: disc(standard), square(quadrato pieno), circle(quadrato
Fogli di stile a cascata (CSS)
Fogli di stile a cascata (CSS) November 25, 2010 1 Definizione I fogli di stile a cascata (Cascading Style Sheets, CSS) sono una delle tecnologie introdotte dal W3C per la formattazione dei documenti HTML,
I fogli di stile (CSS)
I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono
Cascading Style Sheet CSS. Sintassi Css. Come inserire un foglio di stile. Fogli di stile esterni. Separazione contenuto/layout
Cascading Style Sheet CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. L'introduzione
CSS. Esercizi CC BY ALESSANDRO URSOMANDO DIAPOSITIVA 2 CSS PROPRIETÀ
CSS Esercizi CSS PROPRIETÀ DIAPOSITIVA 2 Corredare l esercizio precedentemente realizzato di un file.css che presenti delle dichiarazioni per impostare: l ampiezza del body a 800 pixel a giallo chiaro
LAYOUT e NAVIBAR. + frame e iframe
LAYOUT e NAVIBAR + frame e iframe Elementi del layout HTML Nei siti Web spesso vengono visualizzati i contenuti in più colonne (come una rivista o un giornale). l HTML5 offre nuovi elementi semantici che
Progettazione multimediale
Progettazione multimediale Le tabelle 1 Obiettivi Perché si usano le tabelle Le proprietà delle tabelle Inserimento e modifica delle proprietà 2 Perché si usano le tabelle Una pagina Web è formata da testo
Introduzione all HTML
prof. ing. Dino Molli SVILUPPO SOFTWARE - FORMAZIONE E CONSULENZA INFORMATICA MARIGLIANO (NA) http://www.dinomolli.it info@dinomolli.it Dispense a cura del prof. ing. Dino Molli Introduzione all HTML Introduzione
Laboratorio di Informatica (Chimica)
Laboratorio di Informatica (Chimica) HTML: Cascading Style Sheet (CSS). Walter Cazzola Dipartimento di Informatica e Comunicazione Università à degli Studi di Milano. e-mail: cazzola@dico.unimi.it Walter
VANTAGGI DI BOOTSTRAP
BOOTSTRAP COSA È BOOTSTRAP Bootstrap è un framework front-end gratuito per lo sviluppo web più semplice e veloce Bootstrap è composto da una seri di modelli HTML e CSS che definiscono: tipografia, forms,
CSS 6. Il modello contenitore (box model) Elementi flottanti
CSS 6 Il modello contenitore (box model) Elementi flottanti Il modello contenitore Tecnologie di Sviluppo per il WEB 2 BOX MODEL CSS assume che ogni elemento genera uno o più box rettangolari, chiamati
STRUTTURA BASE DELLA PAGINA HTML
INDICE INDICE... 1 Convenzioni e simboli usati... 1 STRUTTURA BASE DELLA PAGINA HTML... 1 Alcuni dei Principali TAG Html:... 2 Gli attributi dei TAG Html:... 2 ALIGN... 2 attributi del tag ... 2
Selettori. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
Selettori Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola CSS Sintassi valore valore h1 { color: blue;
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML Vediamo le seguenti istruzioni dell HTML link permette di dare un colore alla nostra "parola calda", se questo attributo non viene esplicitato
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
Scrivere in Html Tag e loro attributi
Scrivere in Html Tag e loro attributi + Esercizi Prof.ssa Daniela Zangirolami Tutti i diritti sono riservati. Qualsiasi riproduzione, anche parziale, senza autorizzazione scritta è vietata. Legge 633 del
HTML e CSS Qual è il tag che permette di inserire un immagine in una pagina HTML? A. <img> B. <jpg> C. <p> D. <table>
HTML e CSS Qual è il tag che permette di inserire un immagine in una pagina HTML? A. B. C. D. Qual è il tag che permette di inserire una lista ordinata in una pagina HTML? A.
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/ HTML e Cascading Style Sheets > L
Conoscere HTML. Elementi HTML particolari In un documento HTML si possono inserire elementi con funzionalità particolari. 1 Il linguaggio HTML
Conoscere HTML 1 Il linguaggio HTML Abbiamo visto come le informazioni che si trovano in Internet siano memorizzate in pagine web. Queste sono raggiungibili quando se ne conosce l indirizzo o tramite collegamenti
HTML Guida di riferimento
Dipartimento di Elettronica ed Informazione Politecnico di Milano Informatica A - GES Prof. Plebani A.A. 2006/2007 HTML Guida di riferimento La presente dispensa e da utilizzarsi ai soli fini didattici
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
HTML 3. Liste puntate ed ordinate Immagini
HTML 3 Liste puntate ed ordinate Immagini Creazione di elenchi Elenchi puntati (elenchi non ordinati) Elenchi numerati (elenchi ordinati) Elenchi annidati Elenchi menu Elenchi glossario Tecnologie di Sviluppo
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
Il tag MARQUEE. L opzione ALIGN
Il tag MARQUEE 1 Internet Explorrer offre ai creatori Web un modo facile per inserire una sezione di testo animato in una pagina. In particolare sarà possibile visualizzare una parola o una frase che si
Divisions e spans. Esercizio. <html> <head> <title>esempio uso del tag span</title> <style> <!--
Divisions e spans L applicazione degli stili può essere eseguita anche su sezioni di testo tramite i tag div e span. Div suddivide il testo analogamente a come si suddivide un articolo in titolo, sottotitolo,paragrafi,
Linguaggi ed Applicazioni mul1mediali
Linguaggi ed Applicazioni mul1mediali 06.07- CSS. Cascading Style Sheet Maurizio Maffi ISTI Informa1on Science and Technology Ins1tute A cosa servono I CSS vengono usati per definire la rappresentazione
body e i suoi tag HTML 2
body e i suoi tag HTML 2 Il tag BODY Indica il corpo del testo Attributi (uso deprecato) BGCOLOR = #rrggbb sfondo TEXT = #rrggbb testo LINK = #rrggbb link VLINK = #rrggbb link visitato ALINK
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:
HTML 2. Il tag BODY. Nota. Esempio. body e i suoi tag
body e i suoi tag HTML 2 Il tag BODY Indica il corpo del testo Attributi (uso deprecato) BGCOLOR = #rrggbb sfondo TEXT = #rrggbb testo LINK = #rrggbb link VLINK = #rrggbb link visitato ALINK = #rrggbb
CSS IN PASSATO ABBIAMO DETTO.. Introduzione. Con HTML non possiamo produrre siti come quelli che conosciamo, ma solo specificare dei contenuti
CSS Introduzione CSS3 INTRODUZIONE IN PASSATO ABBIAMO DETTO.. Con HTML non possiamo produrre siti come quelli che conosciamo, ma solo specificare dei contenuti Con CSS specificheremo lo stile con il quale
Alcune definizioni HTML CSS. Introduzione a HTML. November 13, HTML+CSS+Javascript
Introduzione a November 13, 2016 ++Javascript Outline 1 2 3 ++Javascript Internet vs Web Internet : rete fisica di dispositivi interconnessi. (ARPANET 1970) Web : applicativo di alto livello relativo a
Valori e unità di misura (1)
Valori e unità di misura (1) 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:
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
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2007 2008 Corso di Tecnologie Web CSS http://www lia.deis.unibo.it/courses/tecnologieweb0708/ HTML e Cascading Style Sheets > L
Principali proprietà dei CSS Box Model e proprietà di base del testo
Principali proprietà dei CSS Box Model e proprietà di base del testo Sviluppo di siti web UD10 Fablab Design Il BOX MODEL Il BOX MODEL Se si vuole usare i CSS per scopi che vadano oltre la semplice gestione
4 Estensioni proprietarie. 4 Conversione del testo in immagini. 4 Uso di immagini per il controllo degli spazi bianchi
Universita degli Studi di Bologna - Facolta di Ingegneria HTML e Cascading Style Sheets > L HTML è nato in ambienti scientifici Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/
Il linguaggio HTML. Marco Porta - CIM: Web Design & Technologies
Il linguaggio HTML 1 Il linguaggio HTML Origini e caratteristiche dell'html... HTML = Hyper Text Markup Language è un linguaggio di markup, e in quanto tale non richiede alcuna conoscenza della programmazione
Corso di CSS. Prerequisiti. Modulo L2. 2-Text, link e list. Conoscenza di base linguaggio HTML. M.Malatesta 2-CSS-Text-link-list-12 23/01/2014
Corso di CSS Modulo L2 2-Text, link e list 1 Prerequisiti Conoscenza di base linguaggio HTML 2 1 Introduzione In questa Unità descriviamo alcune delle proprietà CSS relative al testo presente in una pagina
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
Struttura di una pagina HTML Le parti fondamentali che compongono una pagina web
Struttura di una pagina HTML Le parti fondamentali che compongono una pagina web Sviluppo di siti web UD03 Fablab Design Macrostruttura della pagina Una pagina HTML è sostanzialmente composta di una riga
Introduzione allo sviluppo Web. Studium Generale, a.a , II semestre
Introduzione allo sviluppo Web Studium Generale, a.a. 2013-2014, II semestre 1 Contatto Daniel Graziotin graziotin@inf.unibz.it http://task3.cc/teaching/introduzion e-allo-sviluppo-web 2 Esame Giovedì
Elementi HTML di base Body, titoli, paragrafi blocchi di testo e contenitori
Elementi HTML di base Body, titoli, paragrafi blocchi di testo e contenitori UD04 Fablab Design Attributi deprecati Molti degli attributi che vedremo in questa unità didattica e nelle seguenti sono considerati
HTML 4.01 Prima lezione
HTML 4.01 Prima lezione A cura di Ivano Stranieri 1 Programma del corso Le basi dell HTML Paragrafi e formattazione del testo Link Tabelle: sintassi ed utilizzo Creazione di frame Form ed interazione con
CSS / PRIORITA E CASCADING. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / PRIORITA E CASCADING INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 CSS / PRIORITA E PRECEDENZA NELLE DEFINIZIONI CSS Gli stili CSS si dicono a cascata perché lo stile
Tabelle HTML. Tabelle Un po di notazione.
Tabelle HTML!! Le tabelle in HTML permettono di rappresentare tabelle di dati ", ma anche di formattare del testo, delle immagini, altre tabelle in righe e colonne, possono cioè essere usate per l impaginazione
INTRODUZIONE AI FOGLI DI STILE CASCADING STYLE SHEET
INTRODUZIONE AI FOGLI DI STILE CASCADING STYLE SHEET 1 Aspetto delle pagine Web miglioriamo la rappresentazione su browser - Definizione dello STILE- Colore, dimensione e stile del font, colore sfondo,
Pablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S
Breve introduzione all' HTML Pablo Genova gallini.genova@gmail.com I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S. 2017 2018 Un assaggio di HTML Come abbiamo visto nelle lezioni precedenti
Struttura Layout Monolitico Fisso con Menu Orizzontale
Struttura Layout Monolitico Fisso con Menu Orizzontale BODY Body { margin: 0px; padding:0; font-family: arial,sans-serif; font-size: 76%; text-align: center; background-color: #FC3; background-image: url();
BASI di HTML e CSS (primo incontro)
CoderDojo Firenze BASI di HTML e CSS (primo incontro) HTML Concetto di tag Il tag è una parola chiave che indica al browser come interpretare e rappresentare il testo a cui è riferito. È composto da una
Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row
TAG FONDAMENTALI Tag : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag , tag ,.tag : per definire le intestazioni (i titoli) e la loro
Riassunto CSS Tutorial
Colori e sfondi color background-color h1 { color: #ff0000; body { background-color: #FFCC66; Riassunto CSS Tutorial Per uno sfondo trasparente: body { background-color: transparent; background-image background-repeat
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in Turismo e ICT
CSS. Cascading Style Sheet
CSS Cascading Style Sheet CSS Il CSS è un linguaggio, di tipo dichiarativo, che serve per definire lo stile di presentazione degli elementi presenti in un documento HTML. Esso è inglobato all interno dell