1 Scoprire e capire HTML Creare semplici pagine WEB Maria Laura Alessandroni

2 Pagine WEB HTML è il linguaggio di formattazione delle pagine web Basato sullutilizzo di contrassegni (TAG) Con Notepad è possibile scrivere pagine web usando direttamemente lHTML I browser (IE, Netscape,…) permettono di visualizzare le pagine web Con programmi di web editor è possibile realizzare pagine web senza conoscere lHTLM Utilizzano uninterfaccia grafica + grafica per le immagini + grafica per le immagini Linguaggio di programmazione

3 Sito Internet Insieme di pagine web collegate e relative ad uno stesso argomento o azienda Per essere visibile sul web deve risiedere su un server web Se ne può avere uno dedicato e autogestito Dominio personalizzato (di solito a pagamento) Il sito è ospitato in uno spazio web di un ISP (internet Service Provider) Con un DNS associato Semplice cartella allinterno di un dominio predefinito (di solito gratuito)

4 Sviluppo e upload Il sito si realizza in locale, sul proprio PC (ambiente di sviluppo) LOCALE SERVER Il sito deve risiedere sul server web per essere visibile sul web UPLOAD Si utilizza un programma di FTP (File Transfer Protocol) È necessario possere un account di accesso al server web fornito dallamministratore Sono necessari: Server Name Username Password

5 Introduzione HTML è lacronimo di HyperText Markup Language HyperText significa ipertesto e indica un testo che permette di passare automaticamente ad unaltra parte del testo o ad altro file; Markup significa contrassegno ed indica che per formattare il testo e dare un aspetto alla pagina si usano particolari contrassegni detti tag; Language significa linguaggio, poiché lHtml è un linguaggio riconosciuto da tutti i browser (internet explorer, netscape,…).

6 Principi di base Tutti gli elementi della pagina devono essere inseriti tra un tag di inizio ed un tag di fine (o chiusura). La sintassi è: testo o elemento multimediale Il testo di una pagina HTML, per essere riconosciuto dai browser, deve racchiudere tutti i suoi elementi tra i tag e. Lestensione di tali file è htm o html.

7 Principi di base 2 Come una lettera, una pagina HTML contiene sempre unintestazione, racchiusa tra i tag e, un corpo, racchiuso tra i tag e. Quindi, il codice di una pagina HTML vuota è: HEAD BODY HTML

8 Creazione di una pagina Creare una cartella MioWeb; Creare un nuovo documento con Notepad; Salvare il documento nella cartella MioWeb, con il nome index.html; Scrivere il codice di una pagina web vuota; Dare un titolo alla pagina (apparirà nella barra del titolo del browser) utilizzando il tag Inserire nel body il testo Ciao Mondo!

9 ATTRIBUTI I tag possono avere attributi che ne specificano le caratteristiche. Nellesempio, il tag BODY ha lattributo BGCOLOR per specificare il colore di sfondo della pagina lattributo BACKGROUND per inserire unimmagine di sfondo della pagina

10 Esempio Benvenuti nel mio sito Ciao Mondo!

11 TAG Il testo viene visualizzato con il carattere impostato sul browser. Per impostare un tipo di carattere specifico si utilizza il tag, che supporta i seguenti attributi: FACE per il tipo di carattere (arial, verdana, Comic,…) SIZE per la dimensione del carattere COLOR per il colore del carattere

12 ESEMPIO … Viva linformatica …

13 TAG IMG Per inserire unimmagine in una pagina WEB è necessario usare il tag IMG; lattributo obbligatorio SRC, permette di specificare il path (posizione nel disco rigido) dellimmagine da inserire

14 Collegamenti ipertestuali Permette di passare ad unaltra pagina o ad altro file Il testo o limmagine su cui fare clic per attivare il collegamento deve essere inserito tra i tag Il percorso della pagina o file collegati deve essere inserito nellattributo HREF Jazz e dintorni (da Musica e Moda)

15 Se il percorso al file è completo si parla di indirizzamento assoluto. Ad esempio Jazz e dintorni (da Musica e Moda) È poco utilizzato poiché troppo legato allorganizzazione del proprio disco; Ci sono problemi se si pubblicano le relative pagine su di un Web Server. Indirizzamento assoluto

16 Indirizzameto Relativo Se si vuole inserire nella pagina index.html, un collegamento alla pagina jazz.html che si trova nella sottocartella articoli allora HREF = articoli/jazz.html HREF=testi.html fa riferimento ad un file nella stessa cartella di index.html HREF=../canto.html fa riferimento ad un file nella cartella immediatamente superiore a quella in cui si trova index.html