LEZIONE 1 HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "LEZIONE 1 HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività..."

Ottavia Cavalli
8 anni fa
Visualizzazioni

1 LEZIONE 1 HTML Come costruire il proprio sito con pochi strumenti e tanta creatività...

2 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>

3 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

4 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...

5 IL TAG Il tag serve a disporre un testo all interno della pagina Scrivo il mio primo testo sul web Con l effetto di inserire un ritorno a capo e una linea vuota questa riga appare spezzata Invece questa riga È scritta tutta di seguito nonostante ci siano gli a capo

6 ALTRI TAG PER INIZIARE Il tag produce un ritorno a capo Il tag serve a scrivere testo in grassetto questo testo è in grassetto Il tag serve a scrivere testo in corsivo questo testo è in grassetto Il tag serve a scrivere testo sottolineato questo testo è in grassetto

7 IL TAG Per allineare il testo giustificato a destra: Scrivo il mio primo testo sul web Valore dell attributo Chiusura normale del tag Attributo

8 IL TAG Per allineare il testo giustificato al centro: Scrivo il mio primo testo centrato Valore dell attributo Chiusura normale del tag Attributo

9 IL TAG Per allineare il testo giustificato a sinistra: Scrivo il mio primo testo sinistra Valore dell attributo Chiusura normale del tag Attributo

10 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>

11 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!!!

12 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 # brown #A52A2A Black # Red #FF0000 Green # 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.

13 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 # brown #A52A2A Black # Red #FF0000 Green # 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!!!

14 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!!!

15 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

Documenti analoghi

Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language

Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML Elisa Quintarelli-Laura Mandelli 1 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized