Pablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Pablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S"

Corrado Gianni
5 anni fa
Visualizzazioni

1 Breve introduzione all' HTML Pablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S

2 Un assaggio di HTML Come abbiamo visto nelle lezioni precedenti il tipico (non l'unico!) linguaggio in cui è scritto un ipertesto è l'html = Hyper Text Markup Language HTML più che un linguaggio di programmazione è un linguaggio di Markup ovvero di formattazione. E' un linguaggio con comandi pensati per la formattazione (=visualizzazione) ottimale degli ipertesti. Noi vedremo soltanto la struttura tipica di un sorgente HTML e i comandi principali. Sarà richiesta la conoscenza operativa dei più semplici comandi Cosa avviene quando apriamo una pagina web? Codice sorgente scritto in HTML file blabla.html Il browser lo interpreta Viene visualizzato l'ipertesto Livello del programmatore Processo svolto in automatico dal computer Livello dell'utente Se mai vi capiterà di progammare, incontrerete spesso processi simili

Struttura del documento HTML (il sorgente) I comandi, detti tag (= marcatori), sono compresi tra < e > Curiosità: HTML è stato inventato da un fisico, Tim Berners-Lee, e i fisici usano spesso quei

3 Struttura del documento HTML (il sorgente) I comandi, detti tag (= marcatori), sono compresi tra < e > Curiosità: HTML è stato inventato da un fisico, Tim Berners-Lee, e i fisici usano spesso quei simboli insieme, noti in Meccanica Quantistica come bra < l e ket l > dato che bra+ket = bra[c]ket = parentesi <! questo è un commento> <html> si inizia ;-) questo è lo header: informazioni di servizio che NON sono visualizzate si pronuncia \ˈhe-dər\ (con la 'e') Sotto la testa c'è un corpo tra <body> e </body> ci mettiamo I'ipertesto da visualizzare Abbiamo già imparato i comandi <head> <body> <!> It's very simple, isn't it?

And now... we can play with HTML! Creiamo con un editor un file prova.html codice sorgente <html> <head> <title>esercizio in html</title> </head> <body> <h1>prova testo in html</h1> <!

4 And now... we can play with HTML! Creiamo con un editor un file prova.html codice sorgente <html> <head> <title>esercizio in html</title> </head> <body> <h1>prova testo in html</h1> <!questo è un commento> testo in corsivo testo in grassetto testo sottolineato ho voglia di andare a capo! mettiamo un link a google: <a href=" output con Firefox </body> </html> CONOSCENZA OPERATIVA: SAPER FARE QUESTO SU ALTRI ESEMPI SIMILI, MA NON UGUALI A QUESTO

5 Abbiamo già imparato tanti comandi! Oltre a <head> <body> <!> comando <h1> </h1> uso per il titolo Il numero 1 indica la dimensione e il livello del titolo/sottotitolo, ci sono h1, h2,,h6 testo in corsivo [in inglese italics] testo in grassetto [in inglese bold] testo in sottolineato [in inglese underlined] vai a capo, break ATTENZIONE A NON SBAGLIARE LA SINTASSI! <a href=" inserisci link a google il link si chiama cliccami

6 Esercizi (cose che bisogna saper fare) Prova a creare il tuo sorgente html con i tags che abbiamo visto, prova a cambiare colore allo sfondo o ai caratteri, prova ad inserire una lista ordinata o non ordinata Colori <body bgcolor = FF > crea un background color rosso colore di sfondo rosso crea un carattere di colore blu Il codice dei colori è RGB Red Green Blue, numeri esadecimali da 00 a FF (cioè da 0 a 255 in decimale! 255= (16 x 16)-1 = FF16) si usano sfumature di 256 colori decimali (cioè colori esadecimali, cifra tonda in esadecimale) bianco è FF FF FF nero è verde 00 FF 00 e così via (nero= nessuna luce, bianco = somma di tutte le luci) Liste <ul> <li> Torino <li> Milano <li> Napoli </ul> Lista non ordinata unordered list ul li = list item Lista ordinata ordered list ol <ol> <li> Venezia <li> Roma <li> Firenze </ol> li = list item

7 Ulteriori comandi li puoi trovare in rete (o sul libro) e tanti altri siti web on line dedicati all'html Prova ad inserire tabelle, figure, frames, testi in movimento, collegamenti, bottoni, effetti speciali e quant'altro... prova a cambiare le opzioni dei vari comandi e vedere cosa succede, stai costruendo il tuo primo sito web ;-)! Verifica anche le eventuali dipendenze dal browser (taluni comandi funzionano solo su alcuni browsers o possono avere effetti diversi a seconda del browser che stai utilizzando ottimizzazione dei siti)

Documenti analoghi

Pablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S

Pablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S Breve introduzione all' HTML Pablo Genova gallini.genova@gmail.com I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S. 2017 2018 Un assaggio di HTML Come abbiamo visto nelle lezioni precedenti