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

HTML 

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 

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 

Pagina HTML di base Hello World

This is a website



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 

Quiz 

Distinguete i diversi elementi (elem, attr, tag)

• TechLab's Blog
• TechLab's Email
• TechLab's Twitter
...

• TechLab's Blog
• TechLab's Email
• TechLab's Twitter
...



Distinguete i diversi elementi (elem, attr, tag)

• TechLab's Blog
• TechLab's Email
• TechLab's Twitter
...

• TechLab's Blog
• TechLab's Email
• TechLab's Twitter
...



CSS 

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. 

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

HTML Contenuto CSS Stile 

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 

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 

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. 

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 

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. 

Quiz 

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

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

The Box Model 

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

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! 

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. 

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

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

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

Esercizi! ⇒ www.codecademy.com 

Grazie! Questions? 

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