Slide 1

Slide 1 text

HTML & CSS Markup & Presentation for web application Edoardo Tenani @edoardotenani about.me/edoardo.tenani Programmare è Design 24/10/2013

Slide 2

Slide 2 text

HTML

Slide 3

Slide 3 text

HTML? ● HyperText Markup Language (HTML) ● è il linguaggio di markup solitamente usato per la formattazione di documenti ipertestuali Linguaggio di Markup: un linguaggio di markup è un insieme di regole che descrivono i meccanismi di rappresentazione (strutturali, semantici o presentazionali) di un testo

Slide 4

Slide 4 text

Elementi / Attributi / Tag Elements: body, h1, p, div, strong, em, span Gli elementi permettono di definire gli oggetti Attributes: href="http://about.com", title="Edoardo Tenani" Gli attributi aggiungono informazioni agli elementi Tag:
Una tag è l'unione di un elemento e i suoi attributi

Slide 5

Slide 5 text

Pagina HTML di base Hello World

This is a website

Slide 6

Slide 6 text

Block & Inline elements Block header section h1...h6 ul, ol, li footer aside p article div table dl, dt, dd form I Block elements occupano tutta la larghezza disponibile ( della pagina o dell'elemento che li contiene ), si scrivono uno per linea Inline span strong img input a em br abbr Gli Inline elements solo la dimensione necessaria per ospitare il contenuto, non si scrivono uno per linea

Slide 7

Slide 7 text

Quiz

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

CSS

Slide 11

Slide 11 text

CSS ● Cascading Style Sheets (CSS) o Fogli di stile a Cascata ● è un linguaggio usato per definire la formattazione di documenti HTML CSS 1 => CSS 2, 2.1 => CSS 3 L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare.

Slide 12

Slide 12 text

HTML Linguaggio di markup per dare struttura al contenuto CSS Linguaggio di presentazione per dare al contenuto stile e definire come appare

Slide 13

Slide 13 text

HTML Contenuto CSS Stile

Slide 14

Slide 14 text

Selettori, Proprietà Selettore: h1 { font: bold 16px/24px Arial, sans-serif; } I Selettori determinano a quali elementi viene applicato lo stile Proprietà: h1 { font: bold 16px/24px Arial, sans-serif; } Le Proprietà sono gli stili che vengono applicati agli elementi

Slide 15

Slide 15 text

Valori, Regole Valore: h1 { font: bold 16px/24px Arial, sans-serif; } I Valori determinano il comportamento di una Proprietà Regola: h1 { font: bold 16px/24px Arial, sans-serif; } Una Regola include un Selettore, una Proprietà e un Valore

Slide 16

Slide 16 text

Dichiarazioni Dichiarazione: h1 { font: bold 16px/24px Arial, sans-serif; } Le Dichiarazioni sono una linea all'interno di una regola, composte da Proprietà e Valore, terminate da punto e virgola.

Slide 17

Slide 17 text

Selettori elementi, ID, classi Selettore per elemento: h1 { ... } Un selettore elemento identifica un elemento per il suo nome Selettore per classe: .classe { ... } Un selettore classe identifica un elemento per la sua classe Selettore per ID: #id { ... } Un selettore ID identifica un elemento per il suo ID

Slide 18

Slide 18 text

Classi e ID Classi Più classi nella stessa pagina. Utili per identificare elementi simili ID Uno solo nella stessa pagina. Utili per identificare elementi univoci.

Slide 19

Slide 19 text

Quiz

Slide 20

Slide 20 text

Distinguete tra selettori, proprietà, valori ul#social { list-type: none; } ul#social li { float: left; margin: 12px 0 0 0; padding: 0 3px; } ul#social li a { display: block; height: 17px; } ul#social li.blog a { backgound-color: blue; } ul#social li.mail a { backgound-color: red; } ul#social li.twitter a { backgound-color: green; } ul#social { list-type: none; } ul#social li { float: left; margin: 12px 0 0 0; padding: 0 3px; } ul#social li a { display: block; height: 17px; } ul#social li.blog a { backgound-color: blue; } ul#social li.mail a { backgound-color: red; } ul#social li.twitter a { backgound-color: green; }

Slide 21

Slide 21 text

ul#social { list-type: none; } ul#social li { float: left; margin: 12px 0 0 0; padding: 0 3px; } ul#social li a { display: block; height: 17px; } ul#social li.blog a { backgound-color: blue; } ul#social li.mail a { backgound-color: red; } ul#social li.twitter a { backgound-color: green; } Distinguete tra selettori, proprietà, valori ul#social { list-type: none; } ul#social li { float: left; margin: 12px 0 0 0; padding: 0 3px; } ul#social li a { display: block; height: 17px; } ul#social li.blog a { backgound-color: blue; } ul#social li.mail a { backgound-color: red; } ul#social li.twitter a { backgound-color: green; }

Slide 22

Slide 22 text

The Box Model

Slide 23

Slide 23 text

Comprendere il box-model Il box-model è il modo in cui vengono calcolate le dimensioni ( larghezza e altezza ) degli elementi nelle pagine HTML.

Slide 24

Slide 24 text

box-model di base Di base il box model è definito come content-box: la width dell'elemento è definita dalla dimensione del suo contenuto. Margini, bordo e padding? Vanno aggiunti alla larghezza del contenuto!

Slide 25

Slide 25 text

box-model: border-box Attualmente si sta imponendo un nuovo modello di box-model, chiamato border-box. La width dell'elemento è definita dalla dimensione del suo contenuto, dal padding e dal bordo.

Slide 26

Slide 26 text

Differenze? Le differenze sono puramente "matematiche": content-box : width 50px content largo 50px padding largo 10px bordo largo 1px width? 50 + 20 + 2 = 72px

Slide 27

Slide 27 text

Differenze? Le differenze sono puramente "matematiche": border-box : width 50px content largo 28px padding largo 10px bordo largo 1px width? 28 + 20 + 2 = 50px

Slide 28

Slide 28 text

Reference www.webplatform.org developer.mozilla.org/it/

Slide 29

Slide 29 text

Esercizi! ⇒ www.codecademy.com

Slide 30

Slide 30 text

Grazie! Questions?

Slide 31

Slide 31 text

Risorse avanzate ● learnlayout.com ⇒ Corso base CSS per i layout ● browserdiet.com ⇒ Tecniche avanzate di miglioramento delle performance ( non da sapere ma interessante! )