HTML CSS guida unica. htmlcss.it

Transcript

1 HTML CSS guida unica htmlcss.it

2 Accesso al web Dispositivi Il modo in cui tutti noi navighiamo il web è in costante evoluzione: console giochi, web TV, computer desktop, netbook, ma soprattutto smartphone e tablet presenti e futuri. È importante ricordare che un sito web non può mai avere lo stesso aspetto su ogni strumento in ogni dimensione di schermo e di testo. Inoltre differenti dispositivi possono avere differenti capacità di banda, dunque diverse velocità di connessione all internet. Browsers Software chiamati web browser. Alcuni tra i più popolari sono Chrome, Explorer, Firefox, Opera e Safari. È possibile digitare direttamente l indirizzo di un sito web, cliccare un link da un altro sito o usare un proprio elenco di preferiti. I browsers vengono aggiornati con regolarità così da supportare nuove funzioni e linguaggi. È importante sapere che non sempre i visitatori hanno l ultima versione di un browser, dunque non sempre possono avere accesso alle ultime novità dei linguaggi di programmazione per il web. Quando si apre una pagina web, in realtà viene fatta una richiesta attraverso l internet ad un web server, uno speciale computer sempre connesso ottimizzato proprio per inviare pagine web. Alcune grandi soggetti hanno dei loro propri web server; altrimenti è possibile rivolgersi a fornitori di web hosting che a pagamento ospitano il nostro sito web.

3 Accesso al web Quando ci connettiamo al web lo facciamo attraverso un ISP Internet Service Provider (Telecom, Vodafone, etc.), digitando un indirizzo internet, ad esempio google.com. Il computer contatta un network di servers chiamato DNS Domain Name System che risponderà rinviando un indirizzo IP Internet Protocol relativo alla richiesta fatta. Ogni dispositivo nel web è associato ad un unico IP, come fosse un numero telefonico. l IP che il server DNS rinvia permette al computer di collegarsi al web server che ospita il sito richiesto. Il web server, a questo punto, è in grado di inviare al browser le pagine vere e proprie del sito google.com. 2 DNS 1 ISP 4 google.com 3 IP

4 Dietro al web Cosa vediamo Quando vediamo un sito, il nostro browser sta ricevendo e interpretando HTML e CSS dal web server che ospita le pagine web. Quel codice viene trasformato nel design che vediamo. Molti siti contengono anche altro contenuto come immagini, video, audio, animazioni. O codice ulteriore come JavaScript o Flash. Come si crea Un sito può essere completamente sviluppato usando solo HTML e CSS. Progetti più complessi, come ad esempio quelli che necessitano di costante aggiornamento dei contenuti, richiedono tecnologie più complesse. Questi siti possono avere un database in cui archiviare informazioni, linguaggi di programmazione come PHP, ASP.Net, Java o Ruby nel web server. HTML5 e CSS3 Da quando è nato l internet ci sono state diverse versioni di HTML e CSS: ognuna migliora ed espande la precedente. Ad oggi le versioni HTML5 e CSS3 sono ancora in fase di sviluppo, ma quasi tutti i browser già supportano alcune delle loro nuove funzioni.

5 Dietro al web: HTML e CSS Tutti i siti web usano HTML e CSS. A volte Content Management System, piattaforme ecommerce e Blog Framework possono aggiungere altre tecnologie. HTML Struttura <p>questo è un paragrafo.</p> Hyper Text Markup Language Linguaggio di marcatura che definisce la struttura dei contenuti di una pagina web. Ovvero HTML dice al browser che cosa è un certo elemento (es. un titolo, un paragrafo, una immagine, un link, ecc.). CSS Stile p { color: blue; } Cascading Style Sheets Linguaggio di presentazione che definisce lo stile dei contenuti di una pagina web. Ovvero CSS dice al browser come appare il contenuto di un certo elemento (es. la pagina ha uno sfondo giallo, il titolo e di colore rosso, il paragrafo ha un bordo, ecc.).

6 Strutturare per capire e navigare Ogni giorno veniamo a contatto con un certo numero di documenti: giornali, riviste, moduli da riempire, cataloghi e altro. Molte pagine web sono semplicemente delle versioni digitali di questi documenti. Per ognuno di questi documenti, la struttura è molto importante per due ragioni: la struttura aiuta il lettore a capire il messaggio che si vuole comunicare; la struttura aiuta il lettore a navigare nel documento stesso.

7 Come le pagine usano la struttura Pensiamo ad un articolo di giornale. Può avere un titolo, un sottotitolo, un occhiello, del testo, delle immagini e se particolarmente lungo dei paragrafi o sezioni. Questa struttura aiuta il lettore a capire il fatto raccontato, e resta simile quando la stessa storia viene pubblicata online, magari con aggiunta di contenuti video e/o audio.

8 Strutturare un documento di testo Testo Usare un titolo, un sottotitolo e dei paragrafi in un documento spesso riflette la gerarchia delle informazioni contenute nel testo. Ad esempio un testo potrebbe essere così composto: titolo principale, introduzione, sottotitolo e primo paragrafo, sottotitolo e secondo paragrafo. Quando usiamo un programma di scrittura creiamo testo strutturato: ogni sezione potrebbe evere un sottotitolo, ogni paragrafo potrebbe avere un titoletto, e così via. Word Processor: Lorem Ipsum:

9 Aggiungere codice Codice Aggiungendo del codice al testo del documento precedente (01.03) abbiamo una pagina web.

10 Aggiungere codice usando gli elementi <html> <body> <h1>questo è il titolo principale</h1> <p><b>lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis fermentum nunc at convallis. Morbi ut lectus nisi. Etiam vitae nisl ante, quis accumsan justo.</b></p> <h2>questo è un sottotitolo</h2> <p>suspendisse fermentum, mi hendrerit mattis cursus, diam justo adipiscing arcu, aliquet suscipit nisi neque eget ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> codice Il codice è costituito da caratteri racchiusi in parentesi angolari chiamati elementi HTML. Un elemento è costituito da due tags: uno di apertura e uno di chiusura (quest ultimo contiene una barra /). Ogni elemento dice qualcosa al browser a proposito delle informazioni che si trovano tra i suoi tag di apertura e di chiusura. Il browser non visualizza il codice (in blu), ma solo ciò che si trova al suo interno (in nero). <h2>questo è un altro sottotitolo</h2> <p>nunc in ante justo. Sed cursus, diam vitae convallis hendrerit, odio nunc consectetur metus, et tempus leo quam aliquam libero.</p> </body> </html>

11 Elementi e tags Un elemento HTML è composto da: un tag di apertura + il contenuto + un tag di chiusura. <p> parentesi angolare sinistra </p> parentesi angolare destra parentesi angolare sinistra barra parentesi angolare destra tag di apertura tag di chiusura elemento

12 Attributi di elemento: nome e valore Un elemento può avere degli attributi che forniscono ulteriori informazioni circa il contenuto. Questi attributi appaiono nel tag di apertura e sono costituiti da due parti: nome e valore. attributo nome attributo valore <p lang= en >Paragraph in English</p> Nome Indica quale tipo di informazione aggiuntiva, relativa al contenuto dell elemento, stiamo indicando al browser. Dovrebbe essere scritto sempre in minuscolo. Valore Indica l impostazione dell attributo. Dovrebbe essere compreso tra virgolette doppie. Differenti attributi possono avere differenti valori. In questo esempio un attributo chiamato lang indica la lingua usata nell elemento <p> paragrafo. Il valore en specifica che la lingua usata è inglese. Se avessimo dato il valore it la lingua indicata sarebbe stata Italiano.

13 Elementi block e inline Gli elementi a livello di blocco (block) iniziano una nuova riga all interno del documento e occupano l intera larghezza disponibile. Alcuni esempi: <header> <footer> <article> <section> <aside> <div> <h1> <h2> <h3> <h4> <h5> <h6> <p> <table> <form> <ul> <ol> <li> <dl> <dt> <dd> Gli elementi a livello di linea (inline) non iniziano una nuova riga ma restano nel flusso del documento, mantenendo la loro larghezza necessaria. Alcuni esempi: <span> <a> <strong> <em> <img> <br> <input> <abbr>

14 I tags sono come dei contenitori <html> <body> <h1>questo è il titolo principale</h1> Il contenuto tra <html> e </html> è codice HTML. Il contenuto tra <body> e </body> dovrebbe essere visibile nella finestra principale del browser. Il contenuto tra <h1> e </h1> è un titolo di primo livello. <p><b>lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis fermentum nunc at convallis. Morbi ut lectus nisi. Etiam vitae nisl ante, quis accumsan justo.</b></p> <h2>questo è un sottotitolo</h2> <p>suspendisse fermentum, mi hendrerit mattis cursus, diam justo adipiscing arcu, aliquet suscipit nisi neque eget ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <h2>questo è un altro sottotitolo</h2> <p>nunc in ante justo. Sed cursus, diam vitae convallis hendrerit, odio nunc consectetur metus, et tempus leo quam aliquam libero.</p> Il c ontenuto tra <p> e </p> è un paragrafo. Il contenuto tra <h2> e </h2> è un titolo di secondo livello. Il contenuto tra <p> e </p> è un paragrafo. Il contenuto tra <h2> e </h2> è un titolo di secondo livello. Il contenuto tra <p> e </p> è un paragrafo. </body> </html>

15 Evoluzione di HTML e Doctype HTML Tim Berners-Lee HTML 4 XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 XHTML 1.0 Frameset HTML 5 in progress Doctype Date le diverse versioni HTML sviluppate nel tempo, ogni pagina web dovrebbe contenere una dichiarazione DOCTYPE che dica al browser quale versione viene usata in quella specifica pagina. HTML 4 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html4/loose.dtd > Strict XHTML 1.0 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN DTD/xhtml1-strict. dtd > Transitional XHTML 1.0 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN xhtml1/dtd/xhtml1- transitional.dtd > HTML 5 <!DOCTYPE html>

16 Parti principali di una pagina web <html> <head> <title> <body> Contiene tutto il codice e il contenuto per la pagina web ed è utilizzato per dichiarare al browser quale tipi di elementi di codice aspettarsi nella pagina. Contiene il codice che esegue attività vitali in background, fra cui il titolo della pagina, i collegamenti agli stili e altre informazioni. Tuttavia una pagina web può esistere anche senza questa sezione. Contiene il titolo della pagina che appare sulla barra del browser, nei preferiti se si salva la pagina, nei motori di ricerca <meta charset= utf-8 /> Istruisce il browser per la corretta interpretazione del set di caratteri usati. Contiene tutto il contenuto visibile nella pagina proncipale del browser. <html> <head> <meta charset= utf-8 /> <title>questo è il titolo della pagina</title> </head> codice risultato Questo è il Body della pagina Qualsiasi cosa inclusa nell elemento body di una pagina dovrebbe essere visibile nella finestra principale del browser. <body> <h1>questo è il Body della pagina</h1> <p>qualsiasi cosa inclusa nell elemento body di una pagina dovrebbe essere visibile nella finestra principale del browser.</p> </body> </html>

17 Struttura base di una pagina web <!DOCTYPE html> <head> <meta charset= utf-8 /> <title>titolo della pagina</title> </head> <body> <h1>titolo di primo livello</h1> <p>questo è un paragrafo.</p> </body> </html>

18 Definire gli stili con i CSS CSS permette di creare delle regole che dicono al browser come deve apparire il contenuto di un elemento. HTML Questo elemento dice al browser che deve mostrare un paragrafo. CSS Questo stile dice al browser che deve mostrare un paragrafo di colore blu. <p>paragrafo.</p> p { color: blue; }

19 Definire gli stili con i CSS Le regole CSS possono essere collegate ad una pagina web nei seguenti modi. Stili esterni <link> Un foglio di stile esterno è un file che contiene gli stili CSS del sito web, mantenendoli separati da qualsiasi altra pagina. Ad un file.css esterno possono essere collegate più pagine. Per collegare un documento a un foglio di stile esterno è sufficiente collocare un elemento link nell intestazione <head>. Stili interni <style> Vengono applicati utilizzando l elemento style con il valore text/css nell intestazione <head>. Stili inline <style> Uno stile inline viene applicato attraverso l attributo <style> direttamente all elemento desiderato. <head> <link rel= stylesheet type= text/css href= style.css /> </head> <head> <style type= text/css > Tutti gli stili CSS qui </style> </head> <p style= font-family: sans-serif; color: #3366CC; > Stile inline </p>

20 Capire CSS: il box model CSS crea un box immaginario attorno ad ogni elemento HTML e poi permette di dare uno stile a quasi tutti gli aspetti sia del contenuto che del box stesso. Il box model è un costrutto programmatico imposto dai CSS che permette di ridefinire le impostazioni base di ogni elemento HTML.

21 Costruzione di una regola CSS Una regola CSS è composta da: uno o più selettori + una o più dichiarazioni (proprietà e valore) in parentesi graffe. selettore dichiarazione p { font-family: Helvetica; color: red; } proprietà valore proprietà valore Questa regola indica al browser che tutti gli elementi <p> (paragrafo) devono essere mostrati usando il font Helvetica color rosso. Più dichiarazioni sono sempre divise da un punto e virgola ;.

22 Costruzione di una regola CSS p { font-family: Helvetica; color: red; } Una regola è un istruzione di formattazione. p { font-family: Helvetica; color: red; } Un selettore determina a quale elemento applicare lo stile. p { font-family: Helvetica; color: red; } Una dichiarazione contiene le specifiche di formattazione. p { font-family: Helvetica; color: red; } Una proprietà è lo stile che viene applicato all elemento. p { font-family: Helvetica; color: red; } Un valore determina il comportamento della proprietà.

23