Che materia stai cercando?

Appunti HTML/CSS base - Gena Appunti scolastici Premium

Appunti di fondamenti di informatica basati su appunti personali del publisher presi alle lezioni della prof.ssa Geni dell’università degli Studi di Torino - Unito, Facoltà di Lettere e filosofia, Corso di laurea in Discipline delle arti, della musica e dello spettacolo (DAMS). Scarica il file in formato PDF!

Esame di Fondamenti di informatica e programmazione docente Prof. C. Gena

Anteprima

ESTRATTO DOCUMENTO

• Background color:

- la proprietà è background-color e se si associa al body si modifica lo sfondo di tutta la pagina.

Il colore è espresso nella codifica esadecimale (si usano 16 caratteri che sono i numeri da 0

a 9 e le lettere dalla A alla E). Preceduti dal cancelletto #: “#000000”;

- La codifica RGB (Red - Green - Blue) per esprimere questi canali di colori si usano i numeri

dallo 0 al 255; “rgb:255,0,0”;

- Si può usare anche il nome in inglese dei colori ma si usa poco perché permette di utilizzare

un limitato set di colori; “red”.

Normalmente le pagine di lettura hanno sfondi chiari con scritte scure perché facilitano la lettura

della pagina. Se si progetta un sito più visivo allora si possono anche utilizzare sfondi scuri di

modo che l’attenzione ricada sulle immagini.

• Background image:

Se si inserisce un’immagine di sfondo bisogna far attenzione a non disturbare la lettura. Bisogna

fare attenzione anche alla regola del contrasto (contrasto tra sfondo e testo), esistono anche dei

tool che ti dicono quanto contrasto c’è. Per specificare il percorso delle immagini vale la stessa

regola che abbiamo usato er inserire immagini o link. L’immagine è meglio salvarla nella stessa

cartella del documento, altrimenti bisogna specificare il percorso.

(body {background-image: url("paper.gif");}) Altre caratteristiche per l’immagine di BG sono:

background-repeat: reapeat-x;/no-repeat; o background-position: right top;, background-

attachment: fixed; è per lasciar ferma l’immagine quando si scorre il sito (il testo che si muove

e immagine ferma) mentre per far muovere il background insieme al testo si usa background-

attachment: scroll;.

Si possono unire tutte queste proprietà in un’unica volta e si chiama shorthand property.

Esempio: background: #ffffff url(“img_lala”) no-repeat, fixed;

Il testo CSS a sua volta ha diverse proprietà:

• Text color:

- definisce il colore del testo con le stesse regole del colore del background (esadecimale,

RGB, nome colore);

- Se inserito nel body vale per tutta la pagina.

• Text alignment:

- usata per l’allineamento orizzontale del testo;

- il testo può essere allineato in centro, a sinistra, a destra o giustificato [justified].

justifiy: ogni riga si allunga in modo tale che ciascuna abbia la stessa larghezza e i bordi di

destra e sinistra siano dritti.

Bisogna tener conto dell’allineamento che facilita la lettura all’utente. Quello a sinistra è il più

utilizzato ed è preferibile a quello giustificato perché allineando tutto il testo non facilita lo

scorrimento del testo. Quello a destra è da evitare. Quello centrato viene utilizzato per titoli o

elenchi.

• Text decoration:

- usata per imporre o rimuovere decorazioni dal testo;

- usata soprattutto per togliere la sottolineatura dai link: a { text-decoration: none; }

I link possono non essere sottolineati quando si collocano in una posizione che noi sappiamo

permettono la navigazione verso altre pagine. Se si toglie la sottolineatura in un testo possiamo

accorgercene tramite il colore della parola ma è un errore per coloro che hanno disabilità°°.

text-decoration: overline fa una sottolineatura sopra la parola e line-trought la “cancella”.

• Text transformation:

- usata per maiuscolo e minuscolo;

- usata per rendere uno specifico elemento tutto minuscolo o maiuscolo o per capitalize la

prima lettera di ciascuna parola.

Si associa solo all’elemento p scrivendo prima p.uppercase { … }

Tre tipi: uppercase, lowercase, capitalize.

• Text indentation:

- usata per specificare le intestazioni della prima riga del testo con p { text indent:#px;}

6

• CSS Fonts:

La distinzione più grande è quella del font con le grazie (serif) e quelli senza (sans-serif).

I font senza le grazie rendono la lettura su schermo più scorrevole. Quella con le grazie si usa

maggiormente per le pagine stampate. La proprietà che consente di inserire il font è font-

family:”..”. La proprietà dovrebbe contenere diversi nomi di font come un sistema di fallback in

modo tale che se il sistema non supporta il primo, può provare il successivo. Si parte dal font

specifico (es. Times New Roman - scritto con le virgolette perchè ha più di una parola), dopo di

che si specificano i font generici separati da ; (in questo caso Times, serif).

p { font-family:”Times New Roman”, Times, serif; }

• Font style (formattazione dei font):

Si può ottenere specificando normal, italic o oblique. Ex: p.normal {font-style: normal;}. Per

avere il grassetto bisogna scrivere font-weight, scrivendo anche il valore (si può usare questa

proprietà anche per alleggerire il font).

• Font size:

E’ sconsigliato usare i pixel perché sono una misura assoluta, ossia non cambiano quando

cambia la risoluzione della pagina. E’ meglio utilizzare delle misure relative (cambiano a

seconda del tipo di schermo che visualizza la pagina). Per questa misura si usano gli em.

1em=16px // pixels/16=em. La virgola si esprime con la sintassi anglosassone quindi con il punto

“.”. La soluzione che funziona in tutti i browser è di usare un default font size in percentuale per

l’elemento body. La font-size di default è 100% (es. body { font-size: 100%; } 2.5 em è più

grosso, 1.875 è il font medio, 0.875 è piccolo.

• CSS links:

Ci sono anche degli stati per i link, per esempio far aprire un quadrato quando ci si passa sopra

o per far cambiare colore. I link possono essere styled diversamente a seconda di quale stato si

trovano; i 4 tipi di classe sono: a:link, a:visited, a:hover, a:active e a ognuno si può associare

un colore diverso. E’ consigliabile cambiare colore quando si propone all’utente una serie di link.

Si può aggiungere a hover la decorazione underlined per far apparire la sottolineatura quando si

passa sopra al link.

• CSS lists

ul sono le liste; ul.a e ul.b (classe a e classe b); si può decidere se ordinare le liste con punti,

quadrati o numeri romani. es. circe, square, upper-roman, etc. Alle liste non ordinate si possono

associare delle immagini. Si specifica nel tag ul l’immagine che si vuole associare alla lista (ul

{list-style-image:url(“img.gif”);}). —

Il tag div è importante perché è un elemento blocco (crea un blocco nella pagina). Anche il tag

table è un tag blocco. Tutto ciò che non è un elemento blocco si chiama in HTML elementi

inline perché non occupano uno spazio orizzontale nella pagina ma si mettono in linea. Gli

elementi blocco (block level elements) normalmente iniziano e finiscono con una nuova linea,

quando sono mostrati nel browser (h1, p, ul, table). Gli elementi inline invece sono mostrati

senza rotture nella pagina. (b, td, a, img).

Un tag div crea uno spazio orizzontale (a fianco non si può mettere nulla), e può essere usato

come contenitore per altri elementi HTML. Si può intervenire su questo tag cambiando il suo

stile. [Importante per esame] Il tag span di per sé non fa nulla, è un tag inline ma serve per

aggiungere dello stile al testo, è un tag di appoggio. A differenza di div, che è formattato con

rotture di linea, lo span non ha nessuna formattazione automatica. Quando viene usato con

CSS, l’elemento span può essere usato per style parti del testo. Si può incorniciare una parola

importante dentro il tag span a cui si associa lo stile per un certo elemento. Esempio: My

Important Tag <h1>My <span style="color:red">Important</span>Heading</h1>

CSS box model serve per fare dei layout/design. Tutti gli elementi HTML possono essere

• considerati come dei box. Il box CSS è essenzialmente un box che racchiude gli elementi

HTML. Quando si inserisce il tag div si può agire su diverse proprietà. Bisogna dare una

dimensione in altezza e in larghezza al blocco (width e height), se non si impostano, il blocco

sarà largo e alto quanto il contenuto in realtà sulla dimensione del blocco intervengono anche

altre proprietà:

7

- margin: sta tra l’elemento blocco e quello che gli sta intorno;

- border: spessore del bordo interviene sulla dimensione

dell’elemento blocco;

- padding: la distanza tra il blocco dell’elemento blocco e il

contenuto;

- content: il contenuto del box, con testo e immagini.

Quindi per avere la dimensione totale si sommando tutti questi

elementi sia in orizzontale che in verticale.

Altre dimensioni importanti sono la max-width/height e la min-width/height, ossia l’altezza e la

larghezza massima e minima. Per quanto riguarda i bordi, sono molte le proprietà che possiamo

dare a uno o a tutti i lati dell’elemento blocco e si possono scrivere in modi diversi. Si possono

anche specificare con border-width, border-style (required) e il border-colour. Border style

può essere: solid se è una linea unica o dotted se è con puntini, e così via. È importante

associare sempre la dimensione del bordo. il bordo si può specificare a seconda dei lati (border-

right-width, etc.). I margini funzionano allo stesso modo ma sull’area attorni all’elemento e fuori

dal bordo, si possono anche stabilire margini diversi a seconda dei lati. Anche per margin si può

usare la shorthand margin property. esempio: margin:0px auto;. Auto si riferisce al margine

automatico dato a sx e dx e permette di centrarlo nella pagina. 24 Novembre 2015

Lezione 5: CSS/HTML Form

Elemento div a cui dare una dimensione in altezza e larghezza, e anche le max/min dimensioni.

Proprietà border per colorare e definire lo spessore: border-width, border-style, border-color.

[lista CSS borders] Esempio bordi.html.

border-color: black red black red;

^ letto in senso orario.

Il margin è la distanza tra l’elemento blocco e quello che gli sta intorno. Può essere specificato

in vari modi: destra/sinistra/alto/basso o generale (tutti i contorni). Anche in questo caso si va in

senso orario. Margin auto centra automaticamente il box. Esempio margini.html.

Il padding è la distanza che c’è tra il contenuto di un elemento box e il border. Si possono

specificare i singoli lati oppure solo alcuni.

L’outline è una linea che è disegnata attorno a tutti gli elementi (fuori dai bordi) per far si che

l’elemento risalti; ≠ border, perchè non fa parte delle dimensioni di un elemento. Le proprietà

possono essere color, style e width.

Tre proprietà speciali CSS:

- display: definisce il trattamento e la presentazione di un elemento in moda tale che anche un

elemento di blocco possa apparire come un elemento inline e viceversa. Ci sono 3 tipi di display:

display-inline ;

• display-block ; invece che rimanere in linea con gli altri elementi diventa un blocco quindi non

• c’è niente affianco ma il resto va nella linea successiva.

display-none ; per i telefonini e simili, per non far visualizzare le immagini per non

• sovraccaricare la banda e perchè non verrebbero visualizzate bene.

- float: può spostare un elemento tutto a destra o a sinistra; viene utilizzata per collocare

elementi come i box a destra/sinistra; il problema è che si spostano ed escono dal flusso della

pagina, quindi se c’è un div viene visto come vuoto (quindi lo devi mettere in float anche lui).

Un box flottante se non ha una width specifica assume la dimensione necessaria a contenere

gli elementi al suo interno. Quando più box flottanti sono disposti uno di seguito all’altro si

dispongono sulla stessa linea. Se non c’è spazio, vanno a capo.

- clear: serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si

applica solo agli elementi blocco.

8

La proprietà (CSS) visibility ammette i valori: visible, hidden (non si vede ed è presente nel

flusso della pagina) e collapse (rimuove intere righe e colonne di una tabella ma non è

supportato da tutti i browser)

HTML-FORM

Usare il tag form, vuoto ma si apre e chiude, e dentro si mettono gli elementi del form. Ha delle

proprietà importanti, come l’action per specificare a quale pagina web si vogliono mandare i dati

del nostro form. Si può mettere la mail come indirizzo action.

Il parametro method serve a specificare in quale modalità vengono inviati i dati. Per esempio la

ricerca Google, usa il metodo get.

google.com/search?q=html[…]

Per costruire un form si usano i comandi di invio (submit), testo libero per scrivere nelle caselle

di testo, check box (caselle di selezione multipla), radio box (selezione rapida), menu.

Il tag principale per i campi form è input, tag vuoto che ha un attributo type per inserire campi

differenti. L’attributo può avere altri attributi, il più importante è il name, poi c’è size (larghezza in

numero di caratteri), value (testo i default, di solito è vuoto), maxlenght (numero massimo di

caratteri inseribili), checkbox, radio, password, hidden, file, submit, reset (sconsigliato

perchè può essere cliccato per sbaglio). Quando si usano i radio button gli si da lo stesso name

per accomunarli in HTML. Il tag fieldset crea una cornice per la domanda, il tag legend da un

titolo al fieldset e il tag label che etichetta la domanda fatta all’utente (utili per i non-vedenti/

disabili)°°. Attributo checked per far partire un radio button già selezionato.

Il tag textarea crea un capo di testo di più righe, con attributi come name, rows e cols.

Per fare i menu a tendina si usa il tag select con tag option all’interno che sono selezioni

all’interno del menù. Attributi del select sono name, size (quante righe del menu devono essere

visualizzate, multiple (per selezionare più elementi). Il tag option può avere l’attributo value e

selected (riga selezionata di default).

HTML4 Buttons: <button type=“button/reset/submit”>

Un’immagine può essere un button:

<button name=“vai” type=“subit” <img…

I nuovi input degli HTML5 (non funzionano su tutti i browser.

search utile perchè di default compare la X che cancella l’inserimento;

• email, ha due funzionalità specifiche: una pensata per gli smartphone (ti aggiunge l’@ e il . ,

• utili per le mail) e una perchè (su alcuni browser) fa inserire la mail correttamente, per esempio

se la mail è inserita non per intero. e blocca l’invio della mail;

url, soprattutto per smartphone, cambia la tastiera per l’inserimento dell’url

• (inserisce /, ., .com);

tel, fa usare la tastiera numerica;

• number, fa inserire il numero (bisogna inserire un min e max e step (quante unità si avanza);

• range, con uno slider;

• date, per il calendario, con attributi min, max e step;

• month,

• time, per l’ora, con attributi value.

• 25 Novembre 2015

Lezione 6: CSS - Layout

La proprietà clear annulla gli effetti del float precedente.

I tipi di posizionamento è una proprietà (position) che va usata con cautela e consente di

posizionare velocemente degli elementi ma spagina i layout.

Il posizionamento relativo sposta l’elemento relativamente alla posizione originale:

position: relative

9 top: #px

left: #px

per cui le coordinate di riferimento sono quelle originarie.

Il posizionamento assoluto è quello che possiamo dare ad un elemento blocco e lo possiamo

posizionare esattamente dove vogliamo. Non indicare alcun valore per la proprietà position

equivale a impostare il valore static.

La proprietà z-index permette di stabilire ciò che sa sopra e ciò che sta sotto, cioè quando i

blocchi si sovrappongono, l’ordine di sovrapposizione può essere determinato con la proprietà z-

index: z-index: 10 copre z-index: 8

Il posizionamento fisso rimane nella sua posizione anche quando facciamo lo scrolling della

pagina. position: fixed;

Un’altra proprietà relativa i blocchi e agli elementi al suo interno è l’overflow, che si applica ai

contenitori con immagini che non stanno dentro i blocchi (il contenuto è più grande del

➝ ➝ ➝

contenitore). Ex: 3.22 overflow visibile; 3.34 overflow hidden; 3.25 overflow scroll;

3.26 overflow auto.

La proprietà float applicata a elementi con la stessa class, mette gli elementi uno accanto

all’altro. Responsive = si applica alla dimensione dello schermo.

Ex: layout css2 4.1: #centrato {

position:absolute;

height: 300px;

top:50%; margin-top:-150px;

width:400px;

left:50%;

margin-left: -200px;

border: 1px solid #000;

background: #EEE;

color: #000;

}

Viene centrato perché si usa la posizione assoluta + top/left:50% meno (-) metà dell’altezza/

larghezza px.

Dimensione media pagine: 800px x 600px

Per mettere un video in HTML si usa:

<video src=“video.webm” controls>

Non tutti i formati video sono supportati da tutti i browser. Altri attributi per i video sono

type=“video/webm"; codecs=“vp8…?

Per l’audio:

<audio controls=“controls”><source src=“song.mp3” type=“audio/mpeg”></audio>

Per inserire un video Youtube si possono usare tre tag:

iframe crea una nuova pagina nella pagina

• object

• embed (vuoto)

• 30 Novembre 2015

Lezione 7: HTML5 e CSS3

Il tag semantico time va inserito così:

<time pubdate datetime="2011-04-20T15:00+01:00">

April 4th 2011

</time>

10

Il tag figure fa inserire l’immagine e una caption:

<figure> <img src="pic_mountain.jpg" alt="The Pulpit Rock">

<figcaption>Caption.</figcaption></figure>

:

Le pseudo classi di CSS vanno scritte con tag classe. Esempi di pseudo classe sono:

p: empty

• span:only-child {color: #f00;}

• a[href^="mailto:"] {text-decoration: none;}

Per usare dei font particolari si usa: @font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

url('Sansation_Light.eot'); /* IE */

}

***********************

div

{

font-family: myFirstFont;

}

oppure:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type=‘text/

css'> @import url(http://fonts.googleapis.com/css?family=Open+Sans);

@

La vuol dire che si usa una regola CSS.

Per aggiungere l’ombra al testo: h1 {

/*In CSS3, the text-shadow property applies shadow to text.*/

text-shadow: 5px 5px 5px #FF0000; }

Per smussare i bordi: div { border-radius: 20px; }

per specificare i singoli angoli: border-top-left-radius:2em;

border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

Se scrivi: div {

11 border-radius: 170px/60px;

}

viene così:

Si possono inserire delle ombre ai box oppure dei bordi particolari (con le immagini).

Si possono inserire più colonne di testo se ne riduci la larghezza oppure se inserisci il column

number, e si può decidere quanto spazio mettere tra le colonne e lo spazio.

Si possono fare delle modifiche simili a quelle dei programmi di grafica con i seguenti tag

(preceduti da transform:) :

translate() ;

• rotate() : ruota sugli assi;

• scale();

• skew();

• matrix();

Regole di usabilità (Web usability)

[Paragone maniglia/porta.] L’usabilità è la scienza che ha come obiettivo far funzionare la

tecnologia per le persone senza problemi (“Usability is the science of making technology work

for people”). Si parla di user friendly, la tecnologia deve essere amichevole, gli utenti non

devono trovarsi qualcosa come “nemico” sul computer. Le componenti dell’usabilità sono:

Learnability: How easy is it to use the first time? Evitare che si legga un “manuale” prima di

• usarlo;

Efficiency: How quickly can users reach goals? Quando l’utente riesce a fare in maniera fatica

• e veloce i compiti che deve eseguire sul sito;

Satisfaction: How positive is the experience? Per i siti commerciali è fondamentale perchè fa

• ritornare l’utente.

Cos’è l’usabilità? L’usabilità è l’efficacia, l’efficienza e la soddisfazione con cui specifici utenti

raggiungono specifici obiettivi in particolari ambienti. L’efficienza riguarda la quantità di risorse

spese in relazione all’accuratezza ed alla completezza degli obiettivi raggiunti.

Cos’è l’ingegneria dell’usabilità?

Deriva dall’ingegneria del software

• Include le specifiche di usabilità come parte dei requisiti dello sviluppo di un sistema

• L’usabilità si può misurare testandola con degli utenti reali

First principles of interaction design:

Anticipazione dei bisogni dell’utente;

• ➝

Autonomia l’interfaccia appartiene allestente ma bisogna fornirgli i giusti strumenti: offrire

• sempre la visibilità dello stato del sistema; [esempi di non autonomia: quando si aprono le

finestre pop-up di reindirizzamento/spam]

Uso dei colori non usare solo il colore per fornire informazioni ma utilizzare anche altri

• accorgimenti grafici;

12


PAGINE

16

PESO

294.54 KB

AUTORE

Rig_Ce

PUBBLICATO

+1 anno fa


DETTAGLI
Corso di laurea: Corso di laurea in Discipline delle arti, della musica e dello spettacolo (DAMS)
SSD:
Università: Torino - Unito
A.A.: 2017-2018

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher Rig_Ce di informazioni apprese con la frequenza delle lezioni di Fondamenti di informatica e programmazione e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Torino - Unito o del prof Gena Cristina.

Acquista con carta o conto PayPal

Scarica il file tutte le volte che vuoi

Paga con un conto PayPal per usufruire della garanzia Soddisfatto o rimborsato

Recensioni
Ti è piaciuto questo appunto? Valutalo!

Altri appunti di Fondamenti di informatica e programmazione

Fondamenti di informatica e programmazione I - Appunti prima parte
Appunto
Appunti su Javascript. Guida completa per lo sviluppatore
Appunto
Appunti Informatica e programmazione
Appunto
Appunti XML - Damiano
Appunto