LEZIONE 1 HTML Come costruire il proprio sito con pochi strumenti e tanta creatività...
La struttura di una pagina web intestazione <HTML> <HEAD> <TITLE> Qui si dichiara il titolo del documento </TITLE> <HEAD> <BODY> corpo Qui si inserisce il testo della pagina web, le immagini, i link,... </BODY> </HTML>
La sezione head <HEAD> <TITLE> Qui si dichiara il titolo del documento </TITLE> </HEAD> Il titolo non viene visualizzato all interno della pagina, ma compare nella barra superiore della finestra del browser ad es. Internet Explorer
La sezione body <BODY> </BODY> Qui sono inserite le immagini, il testo i link, gli oggetti multimediali che si vogliono far comparire in una singola pagina web Per inserire tutto ciò abbiamo bisogno dei tag, ossia i marcatori html. Iniziamo subito con il primo tag...
IL TAG <p> Il tag <p> serve a disporre un testo all interno della pagina <p> Scrivo il mio primo testo sul web </p> Con l effetto di inserire un ritorno a capo e una linea vuota <p> questa riga </p> <p> appare spezzata</p> Invece <p> questa riga È scritta tutta di seguito nonostante ci siano gli a capo</p>
ALTRI TAG PER INIZIARE Il tag <br > produce un ritorno a capo Il tag <b> serve a scrivere testo in grassetto <b> questo testo è in grassetto</b> Il tag <i> serve a scrivere testo in corsivo <i> questo testo è in grassetto</i> Il tag <u> serve a scrivere testo sottolineato <u> questo testo è in grassetto</u>
IL TAG <p> Per allineare il testo giustificato a destra: <p align="right"> Scrivo il mio primo testo sul web </p> Valore dell attributo Chiusura normale del tag Attributo
IL TAG <p> Per allineare il testo giustificato al centro: <p align= center"> Scrivo il mio primo testo centrato</p> Valore dell attributo Chiusura normale del tag Attributo
IL TAG <p> Per allineare il testo giustificato a sinistra: <p align= left"> Scrivo il mio primo testo sinistra</p> Valore dell attributo Chiusura normale del tag Attributo
ATTRIBUTO DI UN TAG La sintassi di un attributo all interno di un tag è: attributo="valore E un tag può avere più attributi Quindi in definita la struttura di un tag sarà: <TAG attributo_1="valore1"attributo_2="valore2">contenuto</tag>
UNA LINEA ORIZZONTALE Per inserire un separatore orizzontale all interno del testo si utilizza il tag <HR> che non necessita di chiusura. Si possono specificare le dimensioni, l ampiezza e l allineamento Ad esempio i codici: <hr> oppure <hr size= 4 align= center > Determineranno due linee un po diverse. PROVATE PER CREDERE!!!
UN COLORE DI SFONDO Se vogliamo impostare un colore di sfondo è necessario impostare l attributo del tag body bgcolor. <body bgcolor="blue"> Molti colori sono disponibili utilizzando le corrispondenti parole chiave in inglese. È preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore, che ci permette tra le altre cose di scegliere anche tonalità di colore non standard. Con la notazione esadecimale il nostro esempio diventa: <body bgcolor="#0000ff"> Colore not. esadecimale Orange #FFA50 Blue #0000FF White #FFFFFF Yellow #FFFF00 Gray #808080 brown #A52A2A Black #000000 Red #FF0000 Green #008000 Violet #EE82EE Le prime due cifre sono la qtà di rosso, le successive due cifre sono la qtà di verde, le ultime due cifre sono la qtà di blu. PROVATE PER CREDERE!!!
UN IMMAGINE DI SFONDO Se vogliamo impostare un immagine di sfondo è necessario impostare l attributo del tag body background. <body background= immagini/paper.gif"> In tal modo specifichiamo il percorso in cui si trova l immagine e il formato. In genere, se l immagine è piccola viene interpretata dal browser in maniera ciclica, ovvero una accanto all altra in maniera da riempire tutta la pagina web. Colore not. esadecimale Orange #FFA50 Blue #0000FF White #FFFFFF Yellow #FFFF00 Gray #808080 brown #A52A2A Black #000000 Red #FF0000 Green #008000 Violet #EE82EE Le prime due cifre sono la qtà di rosso, le successive due cifre sono la qtà di verde, le ultime due cifre sono la qtà di blu. PROVATE PER CREDERE!!!
Una musica di sottofondo Se vogliamo inserire una musica di sottofondo utilizziamo il tag BGSOUND <bgsound src= musica/vasco.midi loop= 2 > In tal modo specifichiamo il percorso in cui si trova il brano il formato e il numero di volte che viene eseguito il brano. Loop=-1 o infinite lo esegue un numero infinito di volte. ATTENZIONE: NELLA CARTELLA MUSICA DEVE ESSERE PRESENTE IL VOSTRO BRANO! PROVATE PER CREDERE!!!
Esercizio1: Creare una pagina con il titolo Il mio primo esempio in html contenente i tuoi dati anagrafici : Nome e cognome centrato IN GRASSETTO Due interlinee e una linea orizzontale Uno sfondo colorato Nato il... Andare a capo residente a... Andare a capo BENVENUTI in corsivo Salvare nella cartella MioSito come es1.html Creare una cartella immagini e inserire il file puzzle1.gif Duplicare il file es1 sostituendo il colore di sfondo con l immagine puzzle1 Salvare nella cartella MioSito come es2.html