Tutti i siti web usano HTML e CSS. Dopo che avrai imparato questi due linguaggi, sarai pronto per costruire il tuo sito web!

Transcript

1 Html e CSS Che cosa sono HTML e CSS? Tutti i siti web usano HTML e CSS. Dopo che avrai imparato questi due linguaggi, sarai pronto per costruire il tuo sito web! HTML sta per Hyper Text Markup Language, Linguaggio di Marcatura per ipertesti. Esso è utilizzato per dare ai siti web la struttura stessa del sito con elementi tipo testo, collegamenti ipertestuali (link), immagini ed altri elementi fondamentali. CSS sta per Cascading Style Sheets, Fogli di stile a cascata. E' usato' per modificare l'aspetto degli elementi HTML cioè delle pagine web. Una singola pagina di un sito web viene chiamata pagina web (webpage). In questo corso impareremo a costruire pagine web e vedremo il risultato del nostro lavoro su un browser (il browser è il software che ci permette di navigare su internet ed in particolare di vedere le pagine web: esempi di browser famosi sono google chrome, mozilla firefox, internet explorer, safari, etc). Nella prossima lezione vedremo come è fatta un elemento HTML Anatomia di un elemento HTML Iniziate scrivendo il seguente codice HTML, non importa se non capite tutto. Chiamate il file index.html. <html lang="it"> <title>pagina WEB</title> <h1>stai costruendo un sito web!</h1> Esploriamo ora un elemento HTML. La linea 9 del file index.html contiene un titolo <h1>stai costruendo un sito web!</h1>

2 Tutti gli elementi HTML iniziano con un tag di apertura. In questo caso il tag di apertura è <h1> Molti elementi richiedono un tag di chiusura, caratterizzato da uno slash /. In questo caso il tag di chiusura è </h1> L'utente del sito web (cioè colui che visita la pagina web) può solo vedere il contenuto tra il tag di apertura e di chiusura, ma non il tag stesso. N.B. Ci sono molti altri elementi HTML in index.html oltre al titolo. Non allarmarti! Incontreremo molti di questi elementi nel seguito e li spiegheremo a fondo. Ora per verificare quanto detto prova a cambiare (a piacere) il testo che appare tra il tag di apertura <h1> e quello di chiusura </h1> e visualizza il risultato sul browser. File: index.html <html> <title>pagina WEB</title> <h1>stai costruendo un sito web! Complimenti!</h1> Se hai difficoltà chiedi ad un tuo compagno o al professore. Aggiungere un titolo. Ora impariamo qualcos'altro sui titoli I titoli sono elementi HTML usati spesso. Puoi pensare ad essi come ai titoli di un giornale. In un giornale puoi vedere subito i titoli in quanto le parole di un titolo sono più grandi del resto del testo e perché sono in grassetto. Ci sono sei tipi di titolo: h1, h2, h3, h4, h5 e h6. h1 è il più grande e h6 il più piccolo. Usate il più grande per il nome del sito web.

3 Esercizio 1. A questo punto fai una copia del file index.html e chiamalo index1.html e, in questo nuovo file, scrivi come contenuto del tag h1 <h1>sedda Bike Sharing </h1> Ora vedi il risultato della tua modifica sul Bowser Esercizio 2. Usa un titolo di tipo h3 per creare un sottotitolo per Sedda Bike sharing in questo modo <h3>condividi i tuoi pedali con il mondo.</h3> Vedi il risultato sul browser. Osserva come il sottotitolo è più piccolo del titolo principale in quanto è un titolo di tipo h3. Prima che lo chiediate in una pagina web puoi iserire tutti i titoli che vuoi e quante volte vuoi. Sentiti libero di cambiare il Titolo ed il sottotitolo del tuo sito web come preferisci. Modifichiamo ora il contenuto del tag <title> inserendo Sedda Bike Sharing. Questo non avrà influenza sulla pagina visualizzata se non per la barra del titolo (in realtà anche per i motori di ricerca) File: index2.html <html> <title>sedda Bike Sharing</title> <h1>sedda Bike Sharing</h1> <h3>condividi i tuoi pedali con il mondo.</h3> Aggiungere un paragrafo. La nostra pagina web ora ha un titolo principale ed un sottotitolo. E' ora di aggiungere una descrizione della nostra società! I paragrafi sono degli elementi dell'html che possono contenere una o più frasi proprio come in un paragrafo di un

4 tema o di un libro. Dimenticavo: il tag per il paragrafo è p. <p>testo del paragrafo qui</p> Usiamo allora questo elemento per aggiungere la descrizione della nostra società. Esercizio 3 Sotto l'elemento h3 aggiungi un paragrafo che contiene la descrizione della società tipo questo. <p>hai bisogno di due ruote mentre sei in città? Utilizza ed affitta le nostre eleganti ed affidabili biciclette!</p> Prova nel browser. Osserva come il testo dentro il paragrafo è più piccolo dei titoli e non è in grassetto. File: index3.html <html> <title>sedda Bike Sharing</title> <h1>sedda Bike Sharing</h1> <h3>condividi i tuoi pedali con il mondo.</h3> <p>hai bisogno di due ruote mentre sei in città? Utilizza ed affitta le nostre eleganti ed affidabili biciclette!</p> Elementi ancora o collegamento ipertestuale. Bel lavoro! La pagina web incomincia ad essere più completa! Cosa dobbiamo fare per collegare la nostra pagina ad un'altra? L'elemento ancora dell'html rende questo possibile con un singolo click. ecco un esempio <a href=" Clicca qui per Google!</a> L'elemento ancora usa un attributo per collegare gli utenti ad un'altra pagina. Nell'esempio di sopra il testo "Clicca qui per Google! ci permette di collegarci al sito

5 IMPORTANTE: gli indirizzi web, come hanno un nome tecnico: URL (Uniform Resource Locator) Facciamo qualche passo avanti 1. Usiamo un elemento ancora per collegarci ad una pagina che elenca le città dove si possono noleggiare le bici di Sedda Bike Sharing! All'interno del tag <p> dopo l'ultima frase inseriamo il seguente testo: Ecco una lista di città dove puoi trovare le nostre biciclette! Visualizza la pagina con il browser 2. Ora usiamo un elemento ancora <a> per far si che la parola "lista" colleghi la nostra pagina web alla pagina web di nome città.html, in questo modo Ecco una <a href="città.html">lista</a> di città dove puoi trovare le nostre biciclette! Affinché questo collegamento funzioni sono necessarie due cose a) devi creare il file città.html inserendoci i nomi di alcune città. Visto che ci sei crea un file html corretto. b) devi posizionarlo nella stessa cartella dove è contenuto il file index2.html in particolare il punto b) ci permette di non specificare un URL completo o assoluto ma relativo. Visualizza la pagina con il browser! Nel web browser, ora osserverai come la parola "lista" appaia sottolineata, indicando in questo modo che si tratta di un link. Clicca sul link per provare se funziona Una vista ravvicinata al lavoro svolto! Bel lavoro! I link creati tramite gli elementi ancora sono una competenza fondamentale per essere considerati degli sviluppatori di siti web. Il diagramma seguente mostra le differenti parti di cui è composto la sintassi di un elemento ancora (la sintassi indica le regole per formare un elemento HTML corretto e valido).

6 Valore Attributo testo del link <a href= >Usa Google Maps</a> nome attributo Osservate quanto segue 1) qualunque URL valido può essere usato come valore dell attributo href 2) L URL deve essere racchiuso tra virgolette doppie 3) il testo copmpreso tra i tag <a> e </a> può essere formato da poche o tante parole a tua scelta Aggiungere immagini Per aggiungere immagini ad un sito web si usa l elemento immagine dell HTML, ossia il tag <img>. Il tag img è diverso da quelli sinora visti in quanto non ha bisogno di tag di chiusura, è un tag secco. Cosi come i siti web hanno un URL anche le immagini hanno un URL, per esempio il seguente Gli URL delle immagini solitamente finiscono con l estensione jpg o png, che sono le estensioni più usate per i file immagine usati su internet e non solo. L attributo src imposta la sorgente per l elemento immagine. Aggiungiamo una fotografia al nostro sito 1. Nel nostro file, nella linea al di sotto del paragrafo inseriamo un elemento immagine. Usate il seguente URL per l immagine: Ricordate che l URL deve essere racchiuso tra virglette. Visualizzate la pagina web per vedere su tutto funziona. 2.Voleta cmbiare l immagine mostrata dall elemento immagine? Semplicemente impostate il valore di src ad una altra fotografia. Qui c è un altra foto <img src="

7 Sostituitela e visualizzate la pagina web. File: index.html <html> <title>sedda Bike Sharing</title> <h1>sedda Bike Sharing</h1> <h3>share Your Pedals with the world</h3> <p>hai bisogno di due ruote mentre sei in città? Utilizza ed affitta le nostre eleganti ed affidabili biciclette! Qui c è una <a href="cities.html">lista</a> di citta dove puoi trovare le nostre biciclette! </p> <img src=" Aggiungere un video Grande le foto rendono le pagine web molto più accattivanti! Cosa c è di più accattivante di una foto? Un Video! L elemento HTML video può aggiungere un video ad una pagina web! <video width="320" height="240" controls> <source src="video-url.mp4" type="video/mp4"> </video> L elemento video usa molti attributi. Diamogli uno sguardo: width and height: Impostano la dimensione della finestra che mostra il video. controls: Adds play, pause and volume control. source src: Imposta l URL del video da mostrare. type: Specifica il formato del video. 1. Cancellate l elemento immagine dal file così possiamo usare

8 il suo spazio per il video. Vedete il risultato sul browser 2. Ora sotto all elemento paragrafo, create l elemento video. Usate il codice di sopra come guida. Il video becessità di: attributi width and height dell attributo controls dell attributo source src impostato a: ed anche dell attributo type Ricorda che i valori degli attributi vanno tra doppie virgolette eccetto che per controls. Visalizzate la pagina e quindi il video nel web browser. Cliccate sul pulsante play per vedere il video.