Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Seconda lezione) Unitre Pavia a.a.

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Seconda lezione) Unitre Pavia a.a."

Leonzia Verde
7 anni fa
Visualizzazioni

1 Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Seconda lezione) Unitre Pavia a.a /01/2015 dott. 1

2 In informatica l'hypertext Markup Language (HTML) ( linguaggio di descrizione per ipertesti linguaggio di marcatura per il web) Le pagine che compongono un sito web sono salvate con estensione.htm o.html La prima pagina del sito, quella che si apre automaticamente viene chiamata, per convenzione: default.html (è il caso di webalice) Index.html (è il caso di altervista) Home.html Homepage.html L estensione htm o html forza l apertura del file da parte di un Browser (Explorer, Mozilla, Opera, Safari, Google chrome ) 27/01/2015 dott.

3 Organizzazione del sito in locale E una buona norma e molti editor costringono a farlo, creare una cartella in locale, in cui inserire il materiale elaborato. Nella cartella si può creare una sotto cartella contenente il materiale utile a cui fanno riferimento i vari file (es. immagini) inserite Ricordarsi che nessun elemento è inserito nel file stesso ma viene recuperato e caricato ogni volta dall esterno 27/01/2015 dott.

4 L accessibilità Siti Web La legislazione vigente legge n.4 del 2004 (legge Stanca), impone a tutti i Siti aperti dalla Pubblica Amministrazione l obbligo di conformarsi a precisi criteri di compilazione tali da permettere l accessibilità da parte di soggetti che presentano difficoltà visive, uditive Vengono introdotte quindi modalità di lettura dei testi con sintetizzatori vocali, descrizione delle immagini Questi simboli indicano la verifica del rispetto di questi criteri: 27/01/2015 dott. 4

5 Struttura tipo di una pagina web Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del World Wide Web Consortium che riguardano il codice HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 27/01/2015 dott.

6 Poi apriamo il nostro primo marcatore tag, che indica che quanto è compreso tra apertura e chiusura è in codice HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>... altri tag... </html> Importante: ricordarsi che i tag devono essere aperti < > e chiusi </ > 27/01/2015 dott.

7 Un documento HTML è normalmente diviso in due sezioni: Testata (<head>)contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera Corpo (<body>)qui è racchiuso il contenuto vero e proprio del documento 27/01/2015 dott.

8 <meta http-equiv="content-type" content="text/html; charset=iso "> Il set di caratteri può essere: charset=utf-8 indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese). <title> Nome del sito</title> Il title è il titolo della pagina e compare in alto sulla barra del browser (se guardate in alto a sinistra del browser ). È bene compilarlo da subito, onde evitare poi di avere pagine senza titolo. 27/01/2015 dott.

9 Esempio di una pagina web laboratoriou3 pagina vuota specifiche del World Wide Web Consortium Set di caratteri occidentali 27/01/2015 dott.

10 Cartella prova esempio 1 testata Titolo pagina Corpo pagina 27/01/2015 dott.

11 Cartella prova esempio 2 Manda a capo la riga 27/01/2015 dott.

12 Cartella prova esempio 3 Rispetto all esempio Uno è stato cambiato solo il titolo della pagina, che è diventato: La mia prima pagina web 27/01/2015 dott.

Documenti analoghi

Prof. Pagani Corrado HTML

Prof. Pagani Corrado HTML IPERTESTI E MULTIMEDIALITÀ Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave sensibili (link). Può essere visto come una rete; i documenti