I fogli di stile CSS 2 Cristina Gena

Slides:



Advertisements
Presentazioni simili
Il linguaggio HTML I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura. ……………………………… …………………………… ……………….
Advertisements

A. FERRARI Alberto Ferrari. L'HyperText Markup Language (HTML) (traduzione letterale: linguaggio di marcatura per ipertesti) è un linguaggio usato per.
Maria Teresa Natale – Andrea Tempera Roma 27 ottobre 2004 MINERVA Knowledge Base Ministerial NEtwoRk for Valorising Activities.
G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Concetti Fondamentali versione.
La chiusura del dataset 2008: scadenze e procedure Gianluigi Ferrante - Valentina Minardi 6 Febbraio 2009 Istituto Superiore di Sanità
CSS: Cascading Style Sheets Specifiche del formato del documento tramite un linguaggio Come modelli.dot di Word o file di stile.sty per latex Separazione.
I.R.R.S.A.E.LIGURIA La rete telematica nella didattica.
Lorenza Libertino Mod.4 Ambienti di apprendimento Progettazione delle attività e strumenti.
Operazioni elementari
La mia città di Pamela Peretti.
Principi di grafica e layout
Esempi sui CSS.
Eventi Come rendere gli elementi HTML di una pagina web sensibili alle azioni del mouse.
Unintroduzione a HTML (II). 4-2 Includere figure con i tag immagine Le immagini possono essere usate come link utilizzando i tag àncora Formato del tag.
Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012.
Linguaggi per il Web Linguaggi di markup: CSS. Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme.
Codifica di Testi Il corso e lesame. Argomenti del corso La teoria della codifica XML: introduzione e livello avanzato (DTD, Schema W3C) La Text Encoding.
CSS : Cascading Style Sheet
Modulo 7 – reti informatiche u.d. 3 (syllabus – )
Andrea Spinelli Linguaggio HTML Lezioni 2-3: Elementi a blocchi Elementi in linea Ancore e link Elenchi Immagini.
FORMATTARE LE LISTE DI LINK  MENU
Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model.
Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli cambiando la loro posizione nel tempo.
Cascading Style Sheet (Fogli di Stile in Cascata)
HTML Lezione 5 Immagini. URL Un Uniform Resource Locator o URL (Localizzatore di risorsa uniforme) è una sequenza di caratteri che identifica univocamente.
I U --- A --- V D I D A T T I C A D E L L A R C H I T E T T U R A I N R E T E La tavola - costruzione.
HTML Lezione 3 Stili.
Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli.
HTML Lezione 7 Il modello dei contenitori. Gestire lo spazio tra gli elementi Lo spazio tra gli elementi della pagina o allinterno del contenuto di un.
Informatica Avanzata Trattamento di Foto e Immagini Digitali UNI3 - NICHELINO Lez. N Maggio 2009 di Pautasso Luciano Lez. N.
Lezione 14 Ottimizzazione grafica di Orfeo Magnanimo INFORMATICA GENERALE Prof. Luciano Costa.
Tecniche di accessibilità web Programma del corso 1.Introduzione all'accessibilità e allo sviluppo con gli standard web. 2.Tecniche.
HTML HyperText Markup Language Linguaggio per marcare un’Ipertesto
Informatica Umanistica A.A. 2008/2009 LEZIONE 3 HTML + CSS Il contenuto e la sua visualizzazione: separati finalmente!
Didattica on line.
I fogli di stile CSS 2 Cristina Gena
I fogli di stile CSS 1 Cristina Gena
Pagine Web statiche: HTML
Argomenti del corso Parte 1: Introduzione/ usabilita/user centered design Il funzionamento del web, gli ipertesti ed linguaggio del web Cenni di usabilità.
Alberatura cartelle sito
Progetto Recupero “ITCS E. da Rotterdam”.
Floating div. IL FLUSSO I diversi box sono inseriti nel così detto “flusso” I box a livello di blocco (compresi i box anonimi) si dispongono uno di seguito.
Corso Web CSV – Andiamo on-line 1 Andiamo on-line Corso di formazione Elementi base per la costruzione di un sito web.
TAG e CSS Ricalcare la grgilia di impaginazione. UNA STRUTTURA PER I CONTENUTI Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti),
Tabelle in HTML Le tabelle permettono di creare una struttura matriciale (un foglio con tanti quadretti) Vengono utilizzate non solo per presentare dei.
Creazione di pagine per Internet Brevi note a cura di Emanuele Lana
Laboratorio 1: HTML e CSS
Tag TABLE. Oltre ad avere la funzione di rappresentare dati di ogni genere allineati in righe e colonne, le tabelle in HTML si utilizzano per costruire.
Impostare i caratteri. Le prime versioni del linguaggio HTML così come le prime versioni dei browser consentivano unicamente la scelta tra due tipi di.
HTML 4.01 Apogeo. I tag di base Capitolo 1 I tag SintassiEsempi:
Analisi Statistica dei dati nella Fisica Nucl. e Subnucl. [Laboratorio] 26/03/2015Analisi Statistica dei Dati in Fis. Nucl. e Subnucl. - G.Sirri1 Gabriele.
7ª Lezione: Martedì 13 Marzo - Dreamweaver
Ambienti di apprendimento Progettazione delle attività e strumenti.
Lezione 10 Riccardo Sama' Copyright  Riccardo Sama' Word: strumenti di correzione.
HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS.
Tag IMG Per inserire un'immagine in una pagina HTML basta inserire il tag: ; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata.
PROGETTO… Internet Providers, registrazione del dominio Costruire una home page … e renderla visibile sul Web.
ELABORAZIONE TESTI MICROSOFT WORD EM 09.
Creazione di pagine per Internet Brevi note a cura di Emanuele Lana
Tutor Domenico Cocciaglia PARTE INTRODUTTIVA LEZIONE 1 CORSO BASE INFORMATICA /07/20151.
CSS Cristina Gena cristina gena - aim 07/08.
Alla scoperta di Introduzione Compito Procedimento Risorse Valutazione
Flipped classroom e nuove metodologie didattiche Modulo 2 – Quarta lezione Antonio Todaro “ Il Sito Web del docente ” seconda parte.
Introduzione ai fogli di stile Brevi note a cura di Emanuele Lana
Riprendendo Il tag il tag Div rappresenta un contenitore. Tutto quello che è incluso fra il tag iniziale e quello di chiusura reagisce secondo gli stili.
Float - ripresa. Float left: dispone a pila tutti i div sulla sinistra.
HTML HTML Sistema di contrassegno riconosciuto dai Browser come (Firefox, Chrome, Internet Explorer) Hyper Text Markup Language.
Antonio Todaro “ Il Sito Web del docente ” Seconda parte Insegnare digitale: la didattica flipped e gli strumenti digitali a supporto della didattica capovolta.
Presentazione SIWA Sito web realizzato con Prestashop Mario Farace - Dario Utzeri.
Linguaggi di markup: CSS
Transcript della presentazione:

I fogli di stile CSS 2 Cristina Gena cgena@di.unito.it http://www.di.unito.it/˜cgena/master.html

logo Testo float right Float right 4 Float right 3 Float right 2 immagine float left Testo float right

quindi, ridisegnare almeno una pagina del sito analizzato, Img Esercizio sull'usabilità Alla luce dei criteri di usabilità WEB commentati a lezione, o reperiti da altre fonti: analizzare un sito orientato alla formazione a distanza, evidenziando quali degli aspetti di usabilità siano evidentemente presenti e quali, invece, non lo siano. Possibili siti da analizzare sono uno tra quelli esaminati o cui si è fatto riferimento durante le lezioni, o altri siti di formazione on-line, o mista (inclusi quelli con materiale su corsi tenuti dal docente, oppure uno tra quelli offerti da W3Schools). per almeno uno degli aspetti di usabilità, suggerire le modifiche nell'impostazione dei criteri di progettazione del sito, col fine di correggere la carenza. quindi, ridisegnare almeno una pagina del sito analizzato, cv interessi foto fun

Div assoluto con distanza top e left di 10 con float=left, width= 800 Div relativo con float right Div relativo Esercizio sull'usabilità Alla luce dei criteri di usabilità WEB commentati a lezione, o reperiti da altre fonti: analizzare un sito orientato alla formazione a distanza, evidenziando quali degli aspetti di usabilità siano evidentemente presenti e quali, invece, non lo siano. Possibili siti da analizzare sono uno tra quelli esaminati o cui si è fatto riferimento durante le lezioni, o altri siti di formazione on-line, o mista (inclusi quelli con materiale su corsi tenuti dal docente, oppure uno tra quelli offerti da W3Schools). per almeno uno degli aspetti di usabilità, suggerire le modifiche nell'impostazione dei criteri di progettazione del sito, col fine di correggere la carenza. quindi, ridisegnare almeno una pagina del sito analizzato, Div relativo Div relativo Div relativo Div relativo Diamo ai div larghezza fissa. Es width= 150, e width= 500

L’img è dentro un div con float=left Il testo ora sta in un nuovo div con dimesioni più piccole e float=right img cv L’img è dentro un div con float=left interessi foto fun

Img img cv img interessi img foto fun Il testo ora sta in un nuovo div con dimesioni più piccole e float right cv img interessi img foto fun Se volete più img aggiungete un div contenitore con float=left e al suo interno le immagini

Img cv interessi foto fun Img in un div, con float=left Testo in un div con float= right cv interessi Img in un div, con float=left Testo in un div con float=right foto fun Il div arancione ha solo funzione di contenitore al quale potete assegnare una larghezza (e se volete un’altezza con scrolling)

Img cv interessi foto fun Img dentro un div con float=left Img dentro un div con float=right cv Img dentro un div con float=left Img dentro un div con float=right interessi foto Img dentro un div con float=left Img dentro un div con float=right fun